MUI 上拉刷新/下拉加载功能实例代码


Posted in Javascript onApril 13, 2017

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

以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
 <div class="mui-scroll">
  <!--数据列表-->
  <ul class="mui-table-view">
  </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 class="mui-navigate-right">Item ' + (i + 1) + '</a>';
  //下拉刷新,新纪录插到最前面;
  table.insertBefore(li, table.firstChild);
  }
  mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
 }, 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 class="mui-navigate-right">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、初始化

初始化时通常要将原数据列表清空,如:$("#mui-table-view").html("");

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

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

4、Iscroll方面的扩展和内容

https://3water.com/article/111090.htm

5 Vue使用

<template>
 <div>
  <header class="mui-bar mui-bar-nav">
   <button @click="model" class=" mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>{{ modelName }}</button>
   <h1 class="mui-title">笑话大全</h1>
  </header>
  <div class="mui-content mui-scroll-wrapper" id="pullrefresh" >
   <div class="mui-scroll">
    <div class="mui-card" v-for="item in items">
      <div class="mui-card-header mui-card-media" style="">
      <div class="mui-card-content-inner">
        <p style="color: #333;">{{ item.content }}</p>
       </div>
      </div>
      <div class="mui-card-content" v-if="item.url">
       <img :src=" item.url " width="100%" height="100%" draggable="false"/> 
      </div>
      <div class="mui-card-footer">
       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:`http://localhost:8090?${model}&page=${self.page}&pagesize=${self.pagesize}`, 
    success (data) {
     let json = JSON.parse(data).result.data;
     self.items = self.items.concat(json); // 合并并且返回一个新数组
     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 上拉刷新/下拉加载功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 #Javascript
mui上拉加载功能实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 #Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 #Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 #Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 #Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
js数组去重的方法总结
2019/01/18 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
python list转dict示例分享
2014/01/28 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Django中的用户身份验证示例详解
2019/08/07 Python
pytorch之添加BN的实现
2020/01/06 Python
python字符串判断密码强弱
2020/03/18 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
网吧收银员岗位职责
2013/12/14 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
天猫活动策划方案
2014/08/21 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技