uni-app上拉加载和下拉刷新代码

Bertha 。 2022-11-28 13:50 117阅读 0赞

[http://www.5imoban.net/jiaocheng/hbuilder/2019/0911/3619.html][http_www.5imoban.net_jiaocheng_hbuilder_2019_0911_3619.html]

### 1、pages.json配置需要上拉加载和下拉刷新的enablePullDownRefresh为true ###

{
     "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
     {
     "path": "pages/index/index",
     "style": {
     "navigationBarBackgroundColor": "#FFFFFF",
     "navigationBarTitleText": "E健康",
     "navigationBarTextStyle": "black",
     "enablePullDownRefresh": true,   //允许上拉加载和下拉刷新为true
     "navigationStyle":"custom",
     "titleNView":false
     }
     },
     ]
    }

### 2、下拉刷新代码，与created、methods等同级 ###

//刷新
    onPullDownRefresh:function() {
     this.getList();
     setTimeout(function () {
     uni.stopPullDownRefresh();
     }, 1000);
    },
    stopPullDownRefresh:function(){
    },

### 3、上拉加载 ###

//data配置变量
    data(){
     return {
     page:1,
     limit:20,
     totalPage:'',//总页数
     totalCount:'',//列表总数
     lists:[],  //列表数据
     }
    },
    //methods获取数据示例
    methods:{
     getList(){
     var that=this;
     this.$func.api(this.$apiConfig.IntegralProductPage(),{
     'page':that.page,
     'limit':that.limit,
     },
     function(res){
     if(res.data.status==200){
     // 根据总条数计算总页数
     that.totalCount = res.data.data.total;
     // 如果总数除以limit 余数为0 说明没有下一页了
     if (res.data.data.total % that.limit === 0) {
         that.totalPage = parseInt(res.data.data.total / that.limit);
     } else {
         that.totalPage = parseInt((res.data.data.total / that.limit)) + 1;
     }
     var resultList=res.data.data.rows;
     if (that.page == 1) {
         that.lists = resultList;
     } else {
         that.lists = that.lists.concat(resultList);
     }
     }
     },function(err){})
     },
    },
    //上拉加载
    onReachBottom(){
     if (this.page >= this.totalPage) {
            func.msg("没有更多内容了");
            return
        }
        // 加载更多数据
        this.page++;
        this.getList();
    },

[http_www.5imoban.net_jiaocheng_hbuilder_2019_0911_3619.html]: http://www.5imoban.net/jiaocheng/hbuilder/2019/0911/3619.html