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 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
原生js实现随机点名功能
Nov 05 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
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python变量的存储原理详解
2019/07/10 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
试用期转正鉴定评语
2014/01/27 职场文书
小学语文课后反思精选
2014/04/25 职场文书
个人安全承诺书
2014/05/22 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang