SoFunction
Updated on 2025-04-04

Summary of practical methods for loading with mint-ui mobile terminal

i mint-ui -S

Import 'mint-ui/lib/'

3. The following is the code structure part:

<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, //Is it possible to pull up the property? False can pull up. True is to prohibit pulling up, which means that data is not loaded by scratching up.  scrollMode:"auto", //The elastic scrolling effect of the mobile terminal, touch is elastic scrolling, auto is non-elastic scrolling  totalpage:0,
  loading:false,
  bottomText: '',
 }
 },
 mounted(){
 (); //First access query list },
 methods:{
 loadBottom:function() {
  // Pull-up load  ();// Pull-up triggered pagination query  this.$();// Fixed method, it needs to be called once after query, and is used to reposition },
 loadPageList:function (){
  // Query data  ('/copyright?key='+ encodeURIComponent('Company Name')+"&mask=001"+"&page="++"&size="+).then(res =>{
  (res);
   = ;
   = (/);
  if( == 1){
    = true;
  }
  this.$nextTick(function () {
   // Is there a next page? Add a method to judge whether there is no next page. Pull-up is prohibited    = "touch";
   ();
  });
  });
 },
 more:function (){
  // Pagination query  if( == 1){
   = 1;
   = true;
  }else{
   = parseInt() + 1;
   = false;
  }

  ();
  ('/copyright?key='+ encodeURIComponent('Company Name')+"&mask=001"+"&page="++"&size="+).then(res=>{
   = ();
  ();
  ();
  });
 },
 isHaveMore:function(){
  // Is there a next page? If not, pull-up and refresh are prohibited  // = false; //true is prohibited from pull-up loading  if( == ){
   = 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>

The above article combined with the practical methods of mint-ui mobile pull-down loading is all the content I share with you. I hope you can give you a reference and I hope you can support me more.