1.npm i mint-ui -S

2.main.js中引入import 'mint-ui/lib/style.css'

3.以下是代碼結構部分：

<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為禁止上拉，就是不讓往上劃加載數據了  scrollMode:"auto", //移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動  totalpage:0,  loading:false,  bottomText: '', } }, mounted(){ this.loadPageList(); //初次訪問查詢列表 }, methods:{ loadBottom:function() {  // 上拉加載  this.more();// 上拉觸發的分頁查詢  this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調用一次，用于重新定位 }, loadPageList:function (){  // 查詢數據  this.axios.get('/copyright?key='+ encodeURIComponent('公司名稱')+"&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 () {   // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉   this.scrollMode = "touch";   this.isHaveMore();  });  }); }, more:function (){  // 分頁查詢  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('公司名稱')+"&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(){  // 是否還有下一頁，如果沒有就禁止上拉刷新  //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>

以上這篇結合mint-ui移動端下拉加載實踐方法總結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。