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.