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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
vue 单页应用和多页应用的优劣
Oct 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
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php-msf源码详解
2017/12/25 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
常用python编程模板汇总
2016/02/12 Python
Random 在 Python 中的使用方法
2018/08/09 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
django最快程序开发流程详解
2019/07/19 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
保险内勤岗位职责
2014/04/05 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
双拥工作宣传标语
2014/06/26 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
搞笑婚前保证书
2015/02/28 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
升学宴祝酒词
2015/08/11 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书