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++ } }) } }
划重点: