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

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

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

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

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

代码如下:

html:

//父组件

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
          <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</div>

//LifeLists组件:

<LifeListItem :lists="lifeList"></LifeListItem>
        <div class="loading-text" v-show="{loadingTextBtn:true}">
          <span v-text="loadingText"></span>
          <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</div>
LifeListItem组件:

<div id="lifeListItemBox">
<router-link v-for="(item,index) in lists" :to="{name:'lifeDetails',params:{id:item.id}}" :key="index">
          <div class="lifeListItem1" v-if="(item.status=='online')">
            <div v-if="(item.hasPrice==true)">
              <div class="title1">{{item.title}}</div>
              <div class="price">
                <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>
              </div>
            </div>
            <div v-else class="title2">{{item.title}}</div>
            <div class="info">
              发布于{{formatTime(item.createAt)}}
              &nbsp;&nbsp;&nbsp;&nbsp;
              {{item.countryName}} {{item.cityName}}
            </div>
            <div class="imageList">
              <img :src="img" alt="" v-for="(img,index) in item.photos">
            </div>
            <div class="content">{{item.detail}}</div>
            <div class="listBar">
              <div class="iconBox">
                <svg class="icon icon-dianzan" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                {{item.like}}
              </div>
              <div class="iconBox">
                <svg class="icon icon-pinglun2" aria-hidden="true">
                  <use xlink:href="#icon-pinglun2"></use>
                </svg>
                {{item.commentCount}}
              </div>
            </div>
          </div>
        </router-link>
</div>

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)<parseInt(this.totalPages)){
          setTimeout(() => {
  //            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组件来实现上拉加载更多,由于上拉触发相应的加载更多事件,所以当进入页面的时候应该不会自动载入数据,则这里可以加一个获取第一页数据的函数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

[收藏]IntelliJ Idea快捷键

Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化...

33560
来自专栏静晴轩

Android Studio快捷键

最常用快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...

37070
来自专栏Flutter入门到实战

开发工具总结(5)之Markdown语法图文全面详解及其工具介绍

版权声明:本文为博主原创文章(少量文字参考他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/c0a2897a...

31940
来自专栏Ryan Miao

idea快捷键总结

使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键。参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会...

298120
来自专栏技术墨客

React学习(11)—— 高阶应用:Web组件

从概念上说,React 和 Web组件 分别用于解决不同的问题。Web组件提供了强大的封装特性来支持其可重复使用性,而React提供了一系列声明性(declar...

8720
来自专栏Python爬虫与数据挖掘

如何利用CSS选择器抓取京东网商品信息

前几天小编分别利用Python正则表达式、BeautifulSoup选择器、Xpath选择器分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如...

15640
来自专栏前端儿

前端神器之Sublime Text2/3简单明了使用总结

第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~)。一般IDE比如WebStorm(它也是一款神器来着),Aptan...

14020
来自专栏从零开始学自动化测试

Selenium2+python自动化19-单选和复选框

最近发生了一些不愉快的事,其中缘由就不多说了,小编以后在这个公众号继续给大家更新,在过去的一年里感谢大家的一路支持,当然最感动的是能留下来的小伙伴,是你...

47980
来自专栏偏前端工程师的驿站

Asp.net页面生命周期

前言                                      本篇记录的是Asp.net页面生命周期,也就是管道模型的最末端HttpHandl...

31080
来自专栏进击的君君的前端之路

HTML知识点整理

23540

扫码关注云+社区

领取腾讯云代金券