基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多-白红宇

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

阅读量：7081 次

发布时间：2019-06-28

本文共 2319 字，大约阅读时间需要 7 分钟。

通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，

因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，

所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，

所以对于无限滚动加载不需要写首次载入列表的函数，

代码如下：

html:

//父组件
               
      
     
//LifeLists组件：
             
               
                
      
     
LifeListItem组件：
     
                
                   
                      
         
          {
   {item.title}}
         
              
                         
          { {item.monetaryUnit}}{ {item.price}}              
         
            
        
            
        
         {
   {item.title}}
        
            
        
                       发布于{
    {formatTime(item.createAt)}}                                {
    {item.countryName}} {
    {item.cityName}}            
        
            
                      
                     
        
            
        
         {
   {item.detail}}
        
            
                      
                         
          
            
                          {
    {item.like}}              
         
              
                         
          
            
                          {
    {item.commentCount}}

vue.js

data:

page:0,        size:10,        loadingTextBtn:false,        loadingText:"努力加载中",        loadingComplete:false,        refreshComplete:false,        city:"",        country:""

methods:

loadMore() {        this.loading = true;        this.loadingTextBtn=true;        if(parseInt(this.page)==0){          this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});          this.page++;        }else if(parseInt(this.page)>0&&parseInt(this.page)
     
       {  //            this.$store.dispatch('loadMoreLifeList',{city:this.city,country:this.country,category:"",page:this.page,size:this.size})              this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size});              this.page++;          }, 1000);        }else{          this.loadingText="已全部加载完成";          this.loadingComplete=true;          this.loading = false;        }      },

这里重要的是判断，当当前页面为0的时候，即第一页的时候，不需要setTimeout定时器，直接请求加载，当加载更多的时候可以加个定时器。

网上找到很多mint-ui 的loadmore组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。

转载于:https://www.cnblogs.com/beileixinqing/p/8087300.html

你可能感兴趣的文章