本文主要是介绍uniapp——list列表分页,数据是rows,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
html
<view class="plr-30"><empty v-if="list.length==0&&status != 'loading'" top="280"></empty><view class="mt-30 mb-50" v-for="(item,i) in list" :key="i" @click="toDetail(item)"><view class="size-32 u-line-2">{{item.title}}</view></view><u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" /></view>
data
data() {return {page: 1,status: 'loadmore',list: [],}},
方法
getList() {this.status = "loading";this.$http('/other/news/listApp', {pageNum: this.page,pageSize: 10}).then(res => {let data = res.rows// ********* 解决重复tab切换接口慢数据拼接问题,如果是第一页不拼接this.list = this.page == 1 ? data : this.list.concat(data)// ****** 根据总条数计算总页数 let total = parseInt(res.total / 10) + ((res.total % 10) == 0 ? 0 : 1)if (this.page == total) {this.status = "nomore"} else {this.page = this.page + 1this.status = "loadmore"}uni.stopPullDownRefresh();})},update() {this.page = 1this.list = []this.getList()},
下拉、触底
onPullDownRefresh() {this.update()},onReachBottom() {//避免多次触发if (this.status == 'loading' || this.status == 'nomore') {return;}this.getList()},
这篇关于uniapp——list列表分页,数据是rows的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!