Mintui is a mobile component library developed for vue by mintui team, which is convenient to realize some functions of mobile terminal. Here, only Loadmore function is used to realize the pull-up paging refresh and pull-down loading of data on the mobile terminal without any code.

<template>
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
    <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
      <ul class="list" v-for="(val, key) in pageList">
        <li>
          <div>I am little 11.</div>
          <div>I am little 11.</div>
        </li>
      </ul>
    </v-loadmore>
  </div>
</template>
<script>
  import {Loadmore} from 'mint-ui';
  export default {
    data:function() {
      return {
        searchCondition:{  //Paging properties
          pageNo:"1",
          pageSize:"10"
        },
        pageList:[],
        allLoaded: false, //Whether the attribute can be pulled up? false can be pulled up. If true is disable pulling up, the data will not be loaded
        scrollMode:"auto" //Elastic rolling effect at the mobile end, with touch as elastic rolling and auto as non elastic rolling
      }
    },
    components: {
      'v-loadmore':Loadmore  // Starting aliases for components, vue will not be case sensitive when converting template labels. For example, loadmore will become loadmore after the label conversion, which is prone to some matching problems
                              // When recommending application components, use a-b form to name
    },
    mounted(){
      this.loadPageList();  //First visit query list
    },
    methods: {
      loadTop:function() { //Drop down trigger method provided by component
        //Drop-down loading
        this.loadPageList();
        this.$refs.loadmore.onTopLoaded();// Fixed method, to be called once after query, for relocation
      },
      loadBottom:function() {
        // Pull up loading
        this.more();// Page query triggered by pull-up
        this.$refs.loadmore.onBottomLoaded();// Fixed method, to be called once after query, for relocation
      },
      loadPageList:function (){
          // Query data
        this.api.PageList(this.searchCondition).then(data =>{
          // If there is still another page, add a method to judge. If there is no next page, pull-up is prohibited
          this.isHaveMore(data.result.haveMore);
          this.pageList = data.result.pageList;
          this.$nextTick(function () {
            // The original meaning is to call the delayed callback function at the end of the DOM update cycle. The main idea is that DOM elements are written here if they need to be modified for some reasons. They can only be written after modifying some data,
            // The reason for this is that there is a pit. When the iphone uses the WebKit overflow scrolling attribute, it will block the pull-up loading effect of loadmore when the mobile elastic scrolling effect is used,
            // It took a long time to solve this problem, that is, to use this function, which means to set the property to auto first, normal sliding, and then change to elastic sliding after loading the data. Without this problem in Android, the elastic sliding experience on the mobile end will be better
            this.scrollMode = "touch";
          });
        });
      },
      more:function (){
          // Paging query
        this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;
        this.api.loadPageList(this.searchCondition).then(data=>{
          this.pageList = this.pageList.concat(data.result.pageList);
          this.isHaveMore(data.result.haveMore);
        });
      },
      isHaveMore:function(isHaveMore){
        // Is there another page? If not, do not pull up to refresh
        this.allLoaded = true; //true disables pull-up loading
        if(isHaveMore){
          this.allLoaded = false;
        }
      }
    }
  }
</script>

It takes a little time to sort out the code. After copying, you can change it. Of course, you need to have a basic vue development framework and a little development foundation. The code is very simple. This plug-in is very useful and has a good effect. You can modify the text when loading, such as adding arrow heads. You can see the documents.

PS: there is a hole to be noticed. It is said in the notes that the properties of loadmore and WebKit overflow scrolling in iPhone conflict and can't be pulled up. It's still that vue doesn't learn very well. It wastes too much time. Take warning

Reprint: https://blog.csdn.net/di315362886/article/details/73920779