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