uni-app:使用uni-list显示列表数据之三：上拉加载更多(hbuilderx 3.6.18)

一，代码：

<template>
    <view>
        <uni-list >
            <uni-list-item :border="false" v-for="(item, index) in itemList" :key="index">
                <template v-slot:body >
                    <view @click="goItem(item.id)" v-if="item.id==5" style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #ffeeee;display: flex;flex-direction: row;" >
                      <image style="width: 100%;" mode="aspectFit" src="https://imgs.lhdtest.com/ware/sowhatimg/ware/orig/2/39/39383.jpg" />
                    </view>
                    
                    <view @click="goItem(item.id)" v-else style="border-radius: 20rpx; min-height:160rpx;margin-top:20rpx;width:690rpx;margin-left:30rpx;margin-right:30rpx;background: #efefef;display: flex;flex-direction: row;" >
                        <view style="width:490rpx;padding-left: 20rpx;padding-right: 20rpx;">
                            <view style="height:100%;width:510rpx;display: flex;flex-direction: column;justify-content: center;">
                                {{item.title}}
                            </view>
                        </view>
                        <view style="width:200rpx;display: flex;flex-direction: column;justify-content: center;">
                            {{item.author}}
                        </view>
                    </view>
                </template>
            </uni-list-item>
            <uni-load-more :showIcon="true" :showText="true" :status="loadStatus" ></uni-load-more>
        </uni-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                itemList:[],      //列表项数组
                isLoading:false,  //是否加载中
                currentPage:1,    //当前页
                totalPage:1,      //总页数
                loadStatus:"loading",   //uni-load-more的状态
            }
        },
        methods: {
            //上拉加载更多
            loadMore:function() {
                if (this.currentPage < this.totalPage) {
                    if(!this.isLoading){  //此处判断，上锁，防止重复请求
                          this.isLoading=true;       
                          this.currentPage+=1;
                          this.loadStatus = "loading";
                          this.getList();
                     }
                }
            },
            //下拉刷新
            refreshData:function(){
                if (this.isLoading == false) {
                    this.isLoading = true;
                    this.itemList = [];
                    this.currentPage = 1;
                    this.totalPage = 1;
                    this.loadStatus = "loading";
                    this.getList();
                }
            },
            //跳转到详情页
            goItem:function(id) {
                alert(id);
            },
            
            //访问接口
            getList:function() {
            uni.request({
                url:'/api/item/list?page='+this.currentPage,
                method:'get',
            }).then((result)=>{
                let [error,res] = result;
                //result将返回一个数组[error,{NativeData}]
                if(res.statusCode === 200){
                    console.log(res.data);
                    //总页数
                    this.totalPage = res.data.data.total;
                    //把接口返回的数组合并到本地
                    this.itemList=this.itemList.concat(res.data.data.list);
                    console.log(this.itemList);
                }
                if(res.statusCode === 404){
                    console.log('请求的接口没有找到');
                }
                
                this.isLoading=false;
                if (this.currentPage >= this.totalPage){
                    this.loadStatus = "noMore";
                }

               //访问接口返回结果后，停止下拉刷新的动画
                setTimeout(() => {
                    console.log('定时结束');
                    uni.stopPullDownRefresh();
                }, 500);
            })
            },
            //加载时访问接口得到数据
            onl oad: function(options) {
                  // 页面创建时执行
                  console.log("页面加载");
                  this.getList();
              },
              onShow: function() {
                console.log("页面进入");
              },
              onReady: function() {
                console.log("页面首次渲染完毕时执行");
              },
              onHide: function() {
                console.log("页面离开");
              },
              onPullDownRefresh: function() {
                //在pages.json中设置enablePullDownRefresh为true开启下拉
                console.log("下拉刷新触发");
                this.refreshData();
              },
              onReachBottom: function() {
                // 页面触底时执行
                console.log("下拉到底");
                 this.loadMore();
              },
              onPageScroll: function() {
                console.log("页面滚动时执行");
              },
             onResize: function() {
                console.log("屏幕旋转触发");
              }
        }
    }
</script>

<style lang="scss">
    /* 取消各item的padding */
    /deep/ .uni-list-item__container {
        position: relative;
        display: flex;
        flex-direction: row;
        padding: 0px 0px;
        padding-left: 0px;
        flex: 1;
        overflow: hidden;
    }
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: [email protected]

二，测试效果

三，查看hbuilderx的版本: