模板网首页 > 建站教程 > APP开发,混合APP >  uni-app上拉加载和下拉刷新代码正文

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();
},
0
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢