1.npm i mint-ui -S
2.main.js中引入import 'mint-ui/lib/style.css'
3.以下是代碼結(jié)構(gòu)部分:
<template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">  <ul class="list">   <li v-for="(item, index) in proCopyright">   <div>{{item.FZD_ZPMC}}</div>   </li>  </ul> </v-loadmore> </div></template><script> import {Loadmore} from 'mint-ui';export default { components:{  'v-loadmore':Loadmore, }, data () { return {  pageNo:1,  pageSize:50,  proCopyright:[],  allLoaded: false, //是否可以上拉屬性,false可以上拉,true為禁止上拉,就是不讓往上劃加載數(shù)據(jù)了  scrollMode:"auto", //移動(dòng)端彈性滾動(dòng)效果,touch為彈性滾動(dòng),auto是非彈性滾動(dòng)  totalpage:0,  loading:false,  bottomText: '', } }, mounted(){ this.loadPageList(); //初次訪(fǎng)問(wèn)查詢(xún)列表 }, methods:{ loadBottom:function() {  // 上拉加載  this.more();// 上拉觸發(fā)的分頁(yè)查詢(xún)  this.$refs.loadmore.onBottomLoaded();// 固定方法,查詢(xún)完要調(diào)用一次,用于重新定位 }, loadPageList:function (){  // 查詢(xún)數(shù)據(jù)  this.axios.get('/copyright?key='+ encodeURIComponent('公司名稱(chēng)')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res =>{  console.log(res);  this.proCopyright = res.data.result.PRODUCTCOPYRIGHT;  this.totalpage = Math.ceil(res.data.result.COUNTOFPRODUCTCOPYRIGHT/this.pageSize);  if(this.totalpage == 1){   this.allLoaded = true;  }  this.$nextTick(function () {   // 是否還有下一頁(yè),加個(gè)方法判斷,沒(méi)有下一頁(yè)要禁止上拉   this.scrollMode = "touch";   this.isHaveMore();  });  }); }, more:function (){  // 分頁(yè)查詢(xún)  if(this.totalpage == 1){  this.pageNo = 1;  this.allLoaded = true;  }else{  this.pageNo = parseInt(this.pageNo) + 1;  this.allLoaded = false;  }  console.log(this.pageNo);  this.axios.get('/copyright?key='+ encodeURIComponent('公司名稱(chēng)')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res=>{  this.proCopyright = this.proCopyright.concat(res.data.result.PRODUCTCOPYRIGHT);  console.log(this.proCopyright);  this.isHaveMore();  }); }, isHaveMore:function(){  // 是否還有下一頁(yè),如果沒(méi)有就禁止上拉刷新  //this.allLoaded = false; //true是禁止上拉加載  if(this.pageNo == this.totalpage){  this.allLoaded = true;  } } },}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped> li{  padding:30px 0;  background-color: #ccc;  margin-bottom:20px; }</style>以上這篇結(jié)合mint-ui移動(dòng)端下拉加載實(shí)踐方法總結(jié)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注