Vue.js-based mobile component library Mint-ui for unlimited scrolling load more

By crawling the pits several times, I found these listeners rolling to load more components in common,

Because these load more methods are bound on the elements that need to load more content,

So the entry page is triggered directly once, when the monitor hears the scrolling event, continues to load more,

Therefore, for infinite scrolling loading, you do not need to write a function for the first load list.

The code is as follows:

Html:

//Parent Component<DivV-infinite-scroll= "Loadmore"infinite-scroll-disabled= "Loading"infinite-scroll-distance= "+">          <lifelists: Loadingtextbtn= "Loadingtextbtn": Loadingtext= "Loadingtext": Loadingcomplete= "Loadingcomplete": Lifelist= "Lifelist"></lifelists></Div>//lifelists Components:<Lifelistitem: Lists= "Lifelist"></Lifelistitem>        <Divclass= "Loading-text"V-show= "{loadingtextbtn:true}">          <spanV-text= "Loadingtext"></span>          <Mt-spinnerv-if= "(loadingcomplete==false)"type= "Snake": Size= "+"></Mt-spinner></Div>Lifelistitem Components:<DivID= "Lifelistitembox"><Router-linkv-for= "(Item,index) in lists": to= "{name: ' Lifedetails ', Params:{id:item.id}}": Key= "Index">          <Divclass= "LifeListItem1"v-if= "(item.status== ' online ')">            <Divv-if= "(item.hasprice==true)">              <Divclass= "Title1">{{Item.title}}</Div>              <Divclass= "Price">                <bclass= "Now"><spanclass= "unit">{{Item.monetaryunit}}</span>{{Item.price}}</b>              </Div>            </Div>            <DivV-else class= "Title2">{{Item.title}}</Div>            <Divclass= "Info">published in {{Formattime (item.createat)}}&nbsp;&nbsp;&nbsp;&nbsp;{{Item.countryname}} {{item.cityname}}</Div>            <Divclass= "ImageList">              <img: src= "img"alt=""v-for= "(Img,index) in Item.photos">            </Div>            <Divclass= "Content">{{Item.detail}}</Div>            <Divclass= "Listbar">              <Divclass= "Iconbox">                <svgclass= "icon Icon-dianzan"Aria-hidden= "true">                  < UseXlink:href= "#icon-dianzan"></ Use>                </svg>{{Item.like}}</Div>              <Divclass= "Iconbox">                <svgclass= "icon icon-pinglun2"Aria-hidden= "true">                  < UseXlink:href= "#icon-pinglun2"></ Use>                </svg>{{Item.commentcount}}</Div>            </Div>          </Div>        </Router-link></Div>

Vue.js

Data

        page:0,        size:ten,        loadingtextbtn:false,        loadingtext:"try to load"  ,        Loadingcomplete:false,        refreshcomplete:false, City        : "",        Country:""

Methods

Loadmore () { This. Loading =true;  This. loadingtextbtn=true; if(Parseint ( This. Page) ==0){           This. $store. Dispatch (' Loadmorelifelist ', {city: "New York", Country: "United States", Category: ", page: This. Page,size: This. Size});  This. page++; }Else if(Parseint ( This. Page) >0&&parseint ( This. Page) <parseint ( This. TotalPages)) {setTimeout ()= {  //This . $store. Dispatch (' Loadmorelifelist ', {city:this.city,country:this.country,category: "", Page:this.page,si Ze:this.size})               This. $store. Dispatch (' Loadmorelifelist ', {city: "New York", Country: "United States", Category: ", page: This. Page,size: This. Size});  This. page++; }, 1000); }Else{           This. loadingtext= "Full load Complete";  This. loadingcomplete=true;  This. Loading =false; }      },

It is important to judge, when the current page is 0, that is, the first page, do not need settimeout timer, direct request loading, when loading more time can add a timer.

Find many Mint-ui Loadmore components on the web to achieve pull-up loading more, because the pull trigger corresponding loading more events, so when the page should not automatically load the data, you can add a function to get the first page of data.

Vue.js-based mobile component library Mint-ui for unlimited scrolling load more