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会让游戏的压力变大,即使它是隐蔽的,如果同样的功能在其它的地方也是一样的,那么就要写 ...
 
随机推荐
- [占位符   ]
			
在做项目的时候,数据库中的数据会存在空值;这样,我们需要在前台给它加以判断, 如果我们不加以判断也是可行的,我们需要添加一个空白占位符 空白占位符 是个不错的选择,这样我们的页面显示数据的时候就不会 ...
 - 溢出overflow: hidden
			
如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...
 - 阶段3 3.SpringMVC·_06.异常处理及拦截器_4 SpringMVC拦截器之介绍和搭建环境
			
拦截器可以有多个 搭建环境 不用改,直接finish 复制原来项目的 依赖的包也复制过来 web.xml配置前端控制器 springmvc的配置文件 先创建对应的文件夹 分别创建java和resour ...
 - CnPack 开源软件项目
			
Cnpack公共窗体库 ------------------------------ CnPack 2009-09-14 SVN 包,包括以下内容: 1. CnPack 组件包所有源代码.2. CnP ...
 - 表视图为Group类型的注意问题
			
使用group类型的tableview时,第一个section距离navigationbar的距离很大,不符合这边的设计图. 使用 myTableView . sectionHeaderHeight ...
 - 应用安全 - 编程语言 | 框架 - PHP - Djiango - 漏洞 -汇总
			
CVE-2007-0404 Date , 类型Filename validation issue in translation framework. Full description 影响范围 CVE ...
 - VMware Workstation 15 Pro简化安装Kali Linux 2019.2
			
记录下简单安装的步骤
 - Java生成二维码连接
			
本文使用的是Goodge的zxing 添加maven依赖 <dependency> <groupId>com.google.zxing</groupId> < ...
 - Sink - 汇聚点
			
!!!1.Logger Sink 记录INFO级别的日志,通常用于调试. 属性说明: !channel – !type – The component type name, needs to ...
 - Macaca环境搭建(一)----windows系统macaca安装
			
一.安装JDK, 1.官方网站:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...