做分页处理时,当接口中有总页数参数,我们可以现在return中声明5个变量,分别是关键字(可有可无),满足条件的商品列表,当前加载的页号,总页数,加载的默认状态,然后在methods方法中声明一个加载下一页数据的方法,先判断有没有更多数据(通过当前页数与总页数比较大小),若没有直接返回,若状态为true,即isLoading = 'more',则用当前页号和总页数和data像服务器端异步请求商品数据,然后再进行拼接,具体详情请看下方代码块
![](https://i-blog.csdnimg.cn/blog_migrate/4e8f6e58ee11aaacaa0a8df27c169002.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f0c190da682fe86af8d64929aadb2b40.png)
<template>
<view>
<!-- <text>这里是列表页</text> -->
<uni-list>
<!-- link:让列表可以点击,增加点击反馈; 右侧还添加向右的箭头 -->
<!-- clickable:让列表可以点击,增加点击反馈; -->
<uni-list-item
v-for="(p,i) in products"
:key="i"
clickable
:to="`/pages/details/details?pid=${p.lid}`">
<!-- 左侧插槽中的内容 -->
<view class="product-header" slot="header">
<image :src="$base+p.pic" mode="widthFix"></image>
</view>
<!-- 中间主体插槽的内容 -->
<view class="product-body" slot="body">
<text class="title">{{p.title}}</text>
<text class="price">¥{{p.price}}</text>
<view class="bottom">
<uni-tag v-if="Number(p.is_onsale)" text="促销" type="error" size="mini"></uni-tag>
<text>{{p.sold_count}}条热销评论,100%好评</text>
</view>
</view>
</uni-list-item>
</uni-list>
<!-- <text>{{products}}</text> -->
<!-- 商品列表后的"加载更多"提示条 -->
<!-- status: more,表示“还有更多数据可供加载”的状态 -->
<!-- status: loading,表示“正在加载数据”的状态 -->
<!-- status: noMore,表示“没有更多数据了”的状态 -->
<!-- <uni-load-more status="more"></uni-load-more> -->
<!-- <uni-load-more status="loading"></uni-load-more> -->
<!-- <uni-load-more status="noMore"></uni-load-more> -->
<uni-load-more :status=" isLoading ? 'loading' : ( pageNum<pageCount ? 'more' : 'noMore' ) "/>
</view>
</template>
<script>
import { productList } from '../../servies';
export default {
data() {
return {
//'列表页'必须的五个数据
kw:'', //要显示的商品搜索关键字,可有可无
products:[], //满足条件的商品列表
pageNum: 0, //当前加载到的页号(即第几页)
pageCount:99999, //可供加载的数据总页数(注意初始值需要大于0)
isLoading:false, //当前正在加载数据吗?必须等待上一次加载完成才能下一次的加载
}
},
onLoad({bname,kw}){
//页面加载时,读取路由参数--就是页面地址后面追加的查询字符串
if(bname){ //如果上一页面传递给当前页面"品牌名称",则修改导航条标题
uni.setNavigationBarTitle({
title: bname+'馆'
});
}
if(kw){
this.kw = kw
}
//调用"加载下一页数据" 情形1----页面加载时
this.loadNextPageData()
},
onReachBottom(){
console.log('滚动到页面底部了,可以加载下一页数据了');
//调用"加载下一页数据" 情形2----滚动到页面底部
this.loadNextPageData()
},
onPullDownRefresh() {
console.log('用户在页面顶部下拉了,希望刷新当前页面');
// ① 清除当前已经加载到的数据和状态
this.products = [] //加载的商品清空
this.pageNum = 0 //加载到的页号重新变为0
// ② 调用"加载下一页数据"情形3-----页面局部下拉刷新
this.loadNextPageData()
// ③ 隐藏页面顶部的"下拉刷新"提示动画符
uni.stopPullDownRefresh() //停止下拉刷新(所产生的动画提示符)
},
methods: {
//加载下一页数据
async loadNextPageData(){
// ① 如果当前正在加载中 或者 已经没有更多数据了,则退出
if(this.isLoading || this.pageNum>=this.pageCount){
return
}
// ② 设置"当前正在加载中"为true;
this.isLoading = true
// ③ 向服务器端异步请求商品数据,如果拿到数据了则拼接到现有数据的尾部
let {pno,pageCount,data} = await productList(this.pageNum+1,this.kw)
this.pageNum = pno //当前加载到的页号
this.pageCount = pageCount //数据的总页数
this.products = [...this.products,...data] //旧数据尾部拼接新数据
// ④ 设置"当前加载中"为false
this.isLoading = false
}
}
}
</script>
<style lang="scss">
.product-header{
image{
width: 150rpx;
margin-left: -10rpx;
margin-right: $uni-spacing-row-sm;
}
}
.product-body{
.title {
font-size: $uni-font-size-base;
//文本只显示2行,溢出则用省略号代替
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //显示模式为:Webkit内核专用的盒子
-webkit-box-orient: vertical; //盒子中内容排序方向为竖直方向
-webkit-line-clamp: 2; //行数固定为:2
}
.price{
font-weight: bold;
color: $uni-color-primary;
}
.bottom{
font-size: $uni-font-size-base - 1px;
color: $uni-text-color-grey;
display: flex;
align-items: center;
}
}
</style>