分页处理另一种方法(带总页数参数)

做分页处理时,当接口中有总页数参数,我们可以现在return中声明5个变量,分别是关键字(可有可无),满足条件的商品列表,当前加载的页号,总页数,加载的默认状态,然后在methods方法中声明一个加载下一页数据的方法,先判断有没有更多数据(通过当前页数与总页数比较大小),若没有直接返回,若状态为true,即isLoading = 'more',则用当前页号和总页数和data像服务器端异步请求商品数据,然后再进行拼接,具体详情请看下方代码块

<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>