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

<!--下拉刷新容器--><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>

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

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

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

<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>