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

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();
},

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！