一、资料参考

官方文档：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>1
2
3
4
5
6
7
8
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
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
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
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
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);        }    });};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。