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 function调用时的参数检测常用办法
Feb 26 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
iframe实用操作锦集
Apr 22 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
vue选项卡切换登录方式小案例
Sep 27 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
德生1994机评
2021/03/02 无线电
PHP新手上路(六)
2006/10/09 PHP
PHP 函数语法介绍一
2009/06/14 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php创建session的方法实例详解
2015/01/27 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
jquery中动态效果小结
2010/12/16 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
Angular实现form自动布局
2016/01/28 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
JS实现吸顶特效
2020/01/08 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
2020/02/26 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Numpy之reshape()使用详解
2019/12/26 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
总经理文秘岗位职责
2014/02/03 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
英文辞职信范文
2015/05/13 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Go语言 详解net的tcp服务
2022/04/14 Golang