微信小程序商城开发_MUI 上拉改写/下拉加载功用

MUI 上拉刷新/下拉加载功能实例代码       这篇文章主要介绍了MUI 上拉刷新/下拉加载功能实例代码,包括一些个人心得,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

新闻信息列表必备的功能,支持Table,Ul等列表.

以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:

 !--下拉刷新容器-- 
 div id="pullrefresh" 
 div 
 !--数据列表-- 
 /ul 
 /div 
 /div 
 script type="text/javascript" 
 mui.init
 pullRefresh: 
 container: '#pullrefresh',
 down: {
 callback: pulldownRefresh
 up: {
 contentrefresh: '正在加载...',
 callback: pullupRefresh
 * 下拉刷新具体业务实现
 function pulldownRefresh() 
 setTimeout(function() 
 var table = document.body.querySelector('.mui-table-view');
 var cells = document.body.querySelectorAll('.mui-table-view-cell');
 //模拟数据
 for (var i = cells.length, len = i + 3; i len; i++) {
 var li = document.createElement('li');
 li.className = 'mui-table-view-cell';
 li.innerHTML = ' a Item ' + (i + 1) + ' /a 
 //下拉刷新,新纪录插到最前面;
 table.insertBefore(li, table.firstChild);
 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //pleted
 }, 1500);
 var count = 0;
 * 上拉加载具体业务实现
 function pullupRefresh() 
 setTimeout(function() {
 mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count 2)); //参数为true代表没有更多数据了。
 var table = document.body.querySelector('.mui-table-view');
 var cells = document.body.querySelectorAll('.mui-table-view-cell');
 for (var i = cells.length, len = i + 20; i len; i++) {
 var li = document.createElement('li');
 li.className = 'mui-table-view-cell';
 li.innerHTML = ' a Item ' + (i + 1) + ' /a 
 table.appendChild(li);
 }, 1500);
 if (mui.os.plus) {
 mui.plusReady(function() {
 setTimeout(function() {
 mui('#pullrefresh').pullRefresh().pullupLoading();
 }, 1000);
 } else 
 mui.ready(function() {
 mui('#pullrefresh').pullRefresh().pullupLoading();
 /script 

 个人心得

1、手动加载loading,并且会立即调用[下拉刷新]绑定的函数

mui('#pullrefresh').pullRefresh().pullupLoading(); //使用这个之后,自动会加载[下拉刷新]绑定的函数

2、停止上拉刷新和下拉加载的loading

mui('#pullrefresh').pullRefresh().endPullupToRefresh(num = cnt); //参数可以为返回true/false的表达式
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

3、初始化

<("");

那么请务必将以下代码放置在清空代码之后.这和scroll的滚动性质有关

mui('#pullrefresh').pullRefresh().refresh(true); //恢复滚动
mui('#pullrefresh').pullRefresh().scrollTo(0,0,100); //滚动置顶

4、Iscroll方面的扩展和内容


5 Vue使用

 template 
 div 
 header 
 button @click="model" span /span {{ modelName }} /button 
 h1 笑话大全 /h1 
 /header 
 div id="pullrefresh" 
 div 
 div v-for="item in items" 
 div style="" 
 div 
 p {{ item.content }} /p 
 /div 
 /div 
 div v-if="item.url" 
 img :src=" item.url " width="100%" height="100%" draggable="false"/ 
 /div 
 div 
 Posted on {{ item.updatetime }}
 /div 
 /div 
 /div 
 /div 
 /div 
 /template 
 script 
export default {
 data () {
 return { 
 items:[],
 page :1,
 pagesize:5,
 count:0,
 modelName:"图文"
 methods : {
 getJoke () {
 let self = this; 
 var model = self.modelName == "图文" "pic" : ""; 
 $.ajax({
 type:"get",
 url:`/ 合并并且返回一个新数组
 self.page += 1; 
 self.count += 10;
 mui('#pullrefresh').pullRefresh().endPullupToRefresh(self.count = 1000);
 model () {
 this.modelName = this.modelName == "图文" "文字" : "图文";
 this.items = [];
 this.getJoke(); 
 pulldownRefresh () {
 setTimeout(() = {
 mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
 },1500)
 pullupRefresh () {
 this.getJoke();
 created () {
 let self = this;
 mui.ready(function(){
 mui.init
 pullRefresh: 
 container: '#pullrefresh',
 down: {
 callback: self.pulldownRefresh
 up: {
 contentrefresh: '正在加载...',
 callback: self.pullupRefresh
 }); 
 self.getJoke(); 
 /script 
 style lang="css" scoped 
 .mui-card:nth-last-child(1){margin-bottom:70px;}
 .mui-card-header img:first-child{width:100%;height: 100%;}
 .mui-pull-bottom-pocket{position:inherit}
 /style 

以上所述是小编给大家介绍的MUI 上拉刷新/下拉加载功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zmjldkxcx.cn/jingyan/3200.html