uni-app:使用uni-list显示列表数据之二：下拉刷新(hbuilderx 3.6.18)

一，配置pages.json

说明：给需要下拉刷新的页面设置 "enablePullDownRefresh": true

           其默认值是false

代码：

        {

            "path" : "pages/list1/list1",

            "style" :                                                                                    

            {

                "navigationBarTitleText": "",

                "enablePullDownRefresh": true

            }

        },

如图:

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/04/uniapp-shi-yong-unilist-xian-shi-lie-biao-shu-ju-zhi-er-xia/

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

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，代码

<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-list>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                itemList:[],   //列表项数组
            }
        },
        methods: {
            //跳转到详情页
            goItem:function(id) {
                alert(id);
            },
            //访问接口
            getList:function() {
            uni.request({
                url:'/api/item/list',
                method:'get',
            }).then((result)=>{
                let [error,res] = result;
                //result将返回一个数组[error,{NativeData}]
                if(res.statusCode === 200){
                    console.log(res.data);
                    this.itemList = res.data.data.list;
                    console.log(this.itemList);
                }
                if(res.statusCode === 404){
                    console.log('请求的接口没有找到');
                }
               //访问接口返回结果后，500ms停止下拉刷新的动画
                setTimeout(() => {
                    console.log('定时结束');
                    uni.stopPullDownRefresh();
                }, 500);
            })
            },
            //加载时访问接口得到数据
            onLoad: 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.getList();       //重新获取接口数据
              },
              onReachBottom: function() {
                // 页面触底时执行
                console.log("下拉到底");  
              },
              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>

三，测试效果

四，查看hbuilderx的版本: