cube-ui indexList的正确使用
demo地址:https://github.com/zphtown/cube-ui-bug
上拉和下拉核心代码:
onPullingDown () {
this.isNoMore = false
this.from = 1
this.getList(1)
},
onPullingUp () {
if (this.isNoMore) {
this.$refs.indexList.forceUpdate()
return
}
this.getList()
},
getList (isUpdate) {
axios.get('http://api.zphtown.com/getGoldList.php', {
params: {
from: this.from,
size: this.size
}
})
.then(res => {
const { list } = res.data
const len = list.length
let arr = []
list.map(v => {
let time = parseTime(v.createTime, '{y}年{m}月')
let index = arr.findIndex(v2 => v2.name === time)
if (index === -1) {
arr.push({
name: time,
items: []
})
}
arr[index > -1 ? index : arr.length - 1].items.push(v)
})
if (isUpdate) {
if (len) {
this.list = arr
} else {
this.$refs.indexList.forceUpdate()
}
} else {
arr.map(v => {
let index = this.list.findIndex(v2 => v2.name === v.name)
if (index > -1) {
this.list[index].items.push(...(v.items))
} else {
this.list.push(v)
}
})
if (len) {
if (len === this.size) {
setTimeout(() => {
this.$refs.indexList.forceUpdate(true)
}, 30)
} else {
console.log('nodata')
this.isNoMore = true
setTimeout(() => {
this.$refs.indexList.forceUpdate(true, true)
}, 30)
}
} else {
this.$refs.indexList.forceUpdate()
this.isNoMore = true
}
this.from++
}
})
}
}
划重点:


cube-ui indexList的正确使用的更多相关文章
- 腾讯优测优分享 | 游戏的UI自动化测试可以这样开展
腾讯优测是专业的自动化测试平台,提供自动化测试-全面兼容性测试,云真机-远程真机租用,漏洞分析等多维度的测试服务,让测试更简单! 对于目前的两大游戏引擎cocos-2dx.unity3D,其UI自动化 ...
- WWDC15 Session笔记 - Xcode 7 UI 测试初窥
https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...
- vue UI框架
一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...
- 报表UI测试点
1.功能完整性:是否实现了产品需求功能 2.数据准确性:UI显示数据,是否与后端传过来的数据一致 3.页面兼容性:浏览器兼容.布局 4.分页查询 5.数据格式一致性:小数精确位.百分比保留位数等 6. ...
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了 1. React的组件化才是web ui部件的正确方向1 1.1. 组件化集成html ,css ...
- Vue UI API简单笔记
VUE UI 目录 VUE UI 一 移动端常用UI组件库 二 PC端常用UI组件库 三 ElementUI组件按需引入 一 移动端常用UI组件库 Vant http://vant-contrib.g ...
- 一种新的UI测试方法:视觉感知测试
什么是视觉测试 视觉测试(Visual Testing),主要检查软件用户界面(UI)是否正确显示给所有用户.它检查网页上的每个元素的形状.大小和位置是否符合预期,还检查这些元素是否在不同的设备和浏览 ...
- .Net中的反应式编程(Reactive Programming)
系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...
- Html5 Egret游戏开发 成语大挑战(九)设置界面和声音管理
在上一篇中,简单的使用界面元素快速实现了一个游戏中的二级页面,这种直接在游戏页面上做UI的做法并不太好,原因是,UI会让游戏的压力变大,即使它是隐蔽的,如果同样的功能在其它的地方也是一样的,那么就要写 ...
随机推荐
- Java IO & Serialization
Java IO & Serialization 专为开卷考试准备,内容包括基本的文本文件和二进制文件的读写以及序列化反序列化操作 IO demo package helloworld; imp ...
- DP&图论 DAY 2 下午
DP&图论 DAY 2 下午 基础树形DP 前言◦ 1:与树或图的生成树相关的动态规划.◦ 2:以每棵子树为子结构,在父亲节点合并,注意树具有天然的子结构.这是很优美的很利于dp的.◦ 3 ...
- 自定义ViewPager+RadioGroup联动效果的实现
package com.loaderman.myviewpager; import android.os.Bundle; import android.support.v7.app.AppCompat ...
- Ironic 裸金属管理服务的网络模型
目录 文章目录 目录 Bare-Metal networking in Neutron 核心网络类型 网络拓扑 抽象网络拓扑图 Neutron Implementation Neutron 了解裸金属 ...
- linux下抓取tomcat相关内存、线程、文件句柄等快照,用于故障排除。
以下脚本推荐放在定时任务里,写好cron表达式,在不影响业务系统的情况下dump一些信息分析系统性能瓶颈以及故障排除. 因为每次dump的时候jvm会暂停(几秒到几十秒不等).所以在生产系统使用时慎用 ...
- 7-1 shell编程基础之二
shell编程基础之二 算数运算 bash中的算术运算:help let +, -, *, /, %取模(取余), **(乘方),乘法符号有些场景中需要转义 实现算术运算: (1) let var=算 ...
- PJzhang:关闭wps小广告和快速关闭445端口
猫宁!!! kali linux上安装的wps,没有广告,而且轻巧简洁. 如果你在windows上安装wps,除了ppt.word.excel,还会有一个h5的应用,当然,最令人烦扰的当 ...
- PJzhang:crunch,一个很好的字典生成工具
猫宁!!! 之前收集子域名的时候使用过子域名挖掘机这个windows软件,查看了它所使用的字典,基本上是小写字母数字1-4位的一个合集. 36+36*36+36*36*36+36*36*36*36 ...
- 对JavaScript事件处理程序/事件监听器的设定的简单介绍
下面是一些对事件处理进行设定的方式. 指定为HTML元素的属性(事件处理程序) 指定为DOM元素的属性(事件处理程序) 通过EventTarget.addEventListener()进行指定(事件监 ...
- 5分钟了解图数据库Neo4j的使用
1.图数据库安装与配置 1.1安装与配置 配置path = %NEO4J_HOME%\bin 启动命令:neo4j console web访问:http://localhost:7474 1. ...