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

一、资料参考

• 官方文档：http://dev.dcloud.net.cn/mui/pulldown/

二、实现步骤

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>

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

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

function pulldownRefresh() {
    setTimeout(function() {
        count = 1;//刷新并显示第一页
        data={
            //...,
            page:count
        };
        type=1;//代表下拉刷新
        toList(data,type);//具体取数据的方法
    }, 100);
}

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

function pullupRefresh() {
    setTimeout(function() {
        count++;//翻下一页
        data={
            //...,
            page:count
        };
        type=2;//代表上拉加载
        toList(data,type);//具体取数据的方法
    }, 100);
}

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

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