隐藏

mui下拉加载、上拉刷新(包括分页,vue.js)

发布:2020/1/20 8:55:28作者:管理员 来源:本站 浏览次数:1361

一、资料参考

二、实现步骤

1.HTML内容

(最好按照这个结构来布置,当然 id的位置可以稍微根据实际需要来调整)

<!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--数据列表--> <ul class="mui-table-view mui-table-view-chevron"> </ul> </div> </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.通过mui.init方法中pullRefresh参数配置各项参数

mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {//下拉刷新 auto:true,//可选,默认false.自动下拉刷新一次 contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 callback: pulldownRefresh
        },
        up: {//上拉加载 //auto:true,//可选,默认false.自动上拉加载一次 contentrefresh: '正在加载...',
            contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容; callback: pullupRefresh
        }
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3.下拉刷新具体业务实现

function pulldownRefresh() { setTimeout(function() { count = 1;//刷新并显示第一页 data={ //..., page:count
        };
        type=1;//代表下拉刷新 toList(data,type);//具体取数据的方法 }, 100);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

4.上拉加载具体业务实现

function pullupRefresh() { setTimeout(function() { count++;//翻下一页 data={ //..., page:count
        };
        type=2;//代表上拉加载 toList(data,type);//具体取数据的方法 }, 100);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

5.自动下拉刷新

此处只提供一种方法,因为在init参数配置中,auto:true,也能实现同样的效果,目前还不知道两者的区别。

if(mui.os.plus) {
    mui.plusReady(function() { setTimeout(function() { mui('#pullrefresh').pullRefresh().pulldownLoading();
        }, 1000);
    });
} else {
    mui.ready(function() { mui('#pullrefresh').pullRefresh().pulldownLoading();
    });
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

6.到接口取数据

此处提供的是ajax方法。同时处理”上拉显示更多”以及“没有更多数据”的翻页切换。

var vm = new Vue({//此处采用vue.js el: '#pullrefresh',
    data: {
        companylist: null,
    },
    created: function() { },
    methods: {
    }
}); var toLsit = function(data,type) { plus.nativeUI.showWaiting("等待中....",{padlock: true});//数据出来前显示等待加载框 mui.ajax(url, {
        data:data,
        dataType: 'json',
        type: 'POST',
        timeout: 10000,
        success: function(data) { for (var i in data.company_list) { var arr = new Array(); for (var item in data.company_list[i]) {
                     arr[item] = data.company_list[i][item];
                 } if(type==1){//上拉刷新 /*下面这句很关键!*/ mui('#pullrefresh').pullRefresh().refresh(true);//有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载) vm.companylist = data.company_list;
                      plus.nativeUI.closeWaiting();//数据渲染完毕,关闭加载框 mui.currentWebview.show(); //显示当前页面  } if(type==2){//下拉加载 vm.companylist.push(arr);
                      plus.nativeUI.closeWaiting();//数据渲染完毕,关闭加载框 mui.currentWebview.show(); //显示当前页面 }
             }

             mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//结束下拉刷新 /*结束上拉加载,并根据情况切换“下拉显示更多数据”,以及“没有更多数据了”。执行endPullupToRefresh()方法,结束转雪花进度条的“正在加载...”过程,若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时*/ if(data.status == 1){
                 mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
             } else {
                 mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
             }
            plus.nativeUI.closeWaiting();
            mui.currentWebview.show(); //显示当前页面 if(data.status!=1&&count==1){
                alert(data.errormessage);
                plus.nativeUI.closeWaiting();
                mui.currentWebview.show(); //显示当前页面 }
        },
        error: function(xhr, type, errerThrown) { mui.toast('网络异常,请稍候再试');
            plus.nativeUI.closeWaiting();  
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
        }
    });
};