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的正确使用的更多相关文章

  1. 腾讯优测优分享 | 游戏的UI自动化测试可以这样开展

    腾讯优测是专业的自动化测试平台,提供自动化测试-全面兼容性测试,云真机-远程真机租用,漏洞分析等多维度的测试服务,让测试更简单! 对于目前的两大游戏引擎cocos-2dx.unity3D,其UI自动化 ...

  2. WWDC15 Session笔记 - Xcode 7 UI 测试初窥

    https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...

  3. vue UI框架

    一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...

  4. 报表UI测试点

    1.功能完整性:是否实现了产品需求功能 2.数据准确性:UI显示数据,是否与后端传过来的数据一致 3.页面兼容性:浏览器兼容.布局 4.分页查询 5.数据格式一致性:小数精确位.百分比保留位数等 6. ...

  5. atitit.React   优缺点 相比angular react是最靠谱的web ui组件化方案了

    atitit.React   优缺点 相比angular react是最靠谱的web ui组件化方案了 1. React的组件化才是web ui部件的正确方向1 1.1. 组件化集成html ,css ...

  6. Vue UI API简单笔记

    VUE UI 目录 VUE UI 一 移动端常用UI组件库 二 PC端常用UI组件库 三 ElementUI组件按需引入 一 移动端常用UI组件库 Vant http://vant-contrib.g ...

  7. 一种新的UI测试方法:视觉感知测试

    什么是视觉测试 视觉测试(Visual Testing),主要检查软件用户界面(UI)是否正确显示给所有用户.它检查网页上的每个元素的形状.大小和位置是否符合预期,还检查这些元素是否在不同的设备和浏览 ...

  8. .Net中的反应式编程(Reactive Programming)

    系列主题:基于消息的软件架构模型演变 一.反应式编程(Reactive Programming) 1.什么是反应式编程:反应式编程(Reactive programming)简称Rx,他是一个使用LI ...

  9. Html5 Egret游戏开发 成语大挑战(九)设置界面和声音管理

    在上一篇中,简单的使用界面元素快速实现了一个游戏中的二级页面,这种直接在游戏页面上做UI的做法并不太好,原因是,UI会让游戏的压力变大,即使它是隐蔽的,如果同样的功能在其它的地方也是一样的,那么就要写 ...

随机推荐

  1. 【黑马JavaWeb】.1.2反射机制

    文章目录 反射:框架设计的灵魂 获取Class类对象的方式 学习视频:https://www.bilibili.com/video/av47886776?p=10 本来一万行的代码,使用框架以后简化到 ...

  2. jvisualvm安装Visual GC插件

    jdk自带了查看和分析jvm的一系列工具,在%JAVA_HOME%/bin目录下,包括jvisualvm.jconsole.jmap.jstack.jstat等: 其中jvisualvm.exe提供一 ...

  3. Sql语法树示例 select username, ismale from userinfo where age > 20 and level > 5 and 1 = 1

    select username, ismale from userinfo where age > 20 and level > 5 and 1 = 1 --END-2019年9月5日17 ...

  4. TLS Thread Local Storage

    https://blog.csdn.net/yusiguyuan/article/details/22938671 https://blog.csdn.net/simsunny22/article/d ...

  5. 从浏览器地址栏输入url到显示页面的步骤

      在浏览器地址栏输入URL 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤 HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期 HTTP1.1增加了Cache-Cont ...

  6. 转:Zepto的使用以及注意事项

    为什么选择Zepto.js的原因: zepto.js的语法借鉴并且兼容jQuery,会使用jquery就会使用Zepto.js.Zepto.js是移动端的js库.Zepto.js相当于PC端的jQue ...

  7. linux 基础 复制window文件到linux

    1.下载pscp工具:地址 2.dos执行命令: pscp F:\his.rar root@192.168.3.137:/tmp/test

  8. 【JVM学习笔记】打破双亲委托机制的例子

    Tomcat也有自己的类加载器,比如Servlet,这些类加载器就改变了双亲委托模型的默认机制 (该主题有待深入)

  9. SQLserver本地数据库开发

    远程端数据库中生成脚本 注意 远程端的数据库 是中文版的还是英文版的,一般我们装的是英文版的, 如果远程端数据库是中文版的,那么我们本地的是英文版,在生成的脚本那需要修改,同时去除相应的路劲代码. 修 ...

  10. 【学习笔记】使用python将最新的测试报告以附件的形式发到指定邮箱

    import smtplib, email, os, timefrom email.mime.multipart import MIMEMultipartfrom email.mime.text im ...