专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络
免费热线：400-683-0016      微信咨询  |  联系我们

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

当前位置：网站建设 > 技术支持
资料来源：网络整理       时间：2023/2/14 0:36:18       共计：3601 浏览
  • 一资料参考
  • 二实现步骤
    • HTML内容
    • 通过muiinit方法中pullRefresh参数配置各项参数
    • 下拉刷新具体业务实现
    • 上拉加载具体业务实现
    • 自动下拉刷新
    • 到接口取数据

一、资料参考

  • 官方文档：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
	
    •

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);
        }
    });
};
版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。
·上一条：C#读取PDF ——PDFBox使用 | ·下一条：$.ajax({})方法success，error，complete，beforeSend使用例子及解释

Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有