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++
        }
      })
    }
  }

 

划重点：

 

转载于:https://www.cnblogs.com/zph666/p/11069344.html