webpack+vue+mint-ui 实现上拉加载更多（Loadmore组件）

LiuZh 发布于2019-08-20 15:35 / 3402人阅读

摘要：因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用自带的组件实现上拉加载更多功能。代码如下上拉加载更多初始化方法如下下面便是上拉加载更多的方法这样就大功告成啦

因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用mint-ui自带的loadmore组件实现上拉加载更多功能。
首先在文件中引入组件

import {Indicator, Loadmore} from "mint-ui";

参考了一下组件中的一些参数

bottomMethod 是上拉刷新执行的方法
bottomPullText  为 pull 时加载提示区域的文字 默认值为上拉刷新，一般我会定义为上拉加载更多
bottomAllLoaded 若为真，则 bottomMethod 不会被再次触发

然后在HTML中写法如下


          
            
              {{item.remark}}
              {{item.score}}
            
            
              {{item.operateTime}}
              {{item.recordTypeName}}

js中写法如下

首先在data的方法中定义初始化加载中的数组getScoreLog，当前页数pageNo，是否加载allLoaded，上拉时加载的文字bottomText，初始化方法中的数量总数totalCount。

代码如下

 data(){
      return {
        getScoreLog: [],
        pageNo: 1,
        allLoaded: false,
        bottomText: "上拉加载更多...",
        totalCount: "",
      }
    },

初始化方法如下

getData(){
        this.$http.post(commonUrl + "/restful/", {
          typeFlag: "1"
        }).then(response => {
          if (response.data.errcode == 0) {
            this.getScoreLog = response.data.scoreLog;
            this.totalGetCount = (response.data.recordCount + 9) / 10;
          }
        }, response => {
        });
      },

下面便是上拉加载更多的方法

loadBottom() {
        this.pageNo += 1;
        if (this.pageNo == this.totalGetCount) {
          this.allLoaded = true;
        }
        setTimeout(() => {
          this.$http.post(commonUrl + "/restful/", {
            pageNo: this.pageNo,
            typeFlag: "1"
          }).then(response => {
            if (response.data.errcode == 0) {
              this.getScoreLog = this.getScoreLog.concat(response.data.scoreLog);
            }
          }, response => {
          });
        }, 1500);
      },

这样就大功告成啦~

云服务器超融合服务器上拉加载 js上拉加载数据 vue组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82356.html

vue和mint-ui loadMore 实现上拉加载和下拉刷新

摘要：首先安装组件库在中引入和样式然后在组件中引入在模板中写法如下总计奖励代码如下分页每次请求的个数是否加载完毕是否有更多数据上拉加载更多下拉刷新分页查询加载数据从中拿数据是否还有下一页，如果没有就禁止上拉刷新是禁止首先安装mint-ui组件库 npm install mint-ui 在main.js中引入mint-ui和样式 import mint-ui/lib/style.css im...

libin19890520 2019-08-23 12:51 评论0 收藏0
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

摘要：网上找到很多的组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，所以对于无限滚动加载不需要写首次载入列表的函数...

huayeluoliuhen 2019-08-21 18:19 评论0 收藏0
记 vue 移动端开发中的经验(2)

摘要：官网还不断的访问不了。在此推荐一个移动端库按需引入二次封装组件列表的下拉刷新和上拉加载更多是移动端必须的组件。不用写死高度了，并且兼容对外提供了更加简明易用的刷新，回到顶部，获得和设置滚动条位置的方法统一的提示，免去重复代码。按需引入mint-ui 本项目用了 mint-ui 作为基础ui框架，在使用中遇到不少问题。官网doc 还不断的访问不了。不过还是很感谢 mint-ui 团队。...

Flands 2019-08-23 15:42 评论0 收藏0
下拉刷新，上拉加载的基础款（基本实现）

摘要：前言现在网上下拉刷新，上拉加载插件一搜一大堆，如果你想用在生产环境，那你可以直接网上搜一个靠谱的，我所做的就是不依赖任何插件，一步一步把这个插件的过程写一下，各位同学可以在此基础上定制，没有写过插件的，可以了解下插件怎么写的，整个过程定位入前言现在网上下拉刷新，上拉加载插件一搜一大堆，如果你想用在生产环境，那你可以直接网上搜一个靠谱的，我所做的就是不依赖任何插件，一步一步把这个...

DrizzleX 2019-08-26 11:36 评论0 收藏0