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

libin19890520 发布于2019-08-23 12:51 / 3097人阅读

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

首先安装mint-ui组件库

npm install mint-ui

在main.js中引入mint-ui和样式

import "mint-ui/lib/style.css"
import MintUi from "mint-ui"
Vue.use(MintUi)

然后在组件中引入lodeMore

import {Loadmore} from "mint-ui"

在template模板中写法如下：

    
    
        
            {{item.sum}}(总计奖励)
            {{item.time | formatDate}}

js代码如下：

data(){
        return{
                pagesize:1,//分页
                pageval:5, //每次请求的个数
                allLoaded:false,//是否加载完毕
                haveMore: true, //是否有更多数据
            }
        },
        created(){
            this.loaddata();
        },
        methods:{
            loadBottom: function(){//上拉加载更多
                 this.more();                 
                 this.$refs.loadmore.onBottomLoaded();
            },
            loadTop: function(){//下拉刷新
                this.pagesize =1;
                this.loaddata();               
                this.$refs.loadmore.onTopLoaded();
            },
            more() {
              // 分页查询
              this.pagesize ++;
              this.loaddata()
              this.isHaveMore(this.haveMore)
            },
            loaddata(){//加载数据从vuex中拿数据
                this.$store.dispatch("managementAwardListDetail/getmanagerlistDetail",[this.timer,this.pagesize]).then(()=>{
                    if(this.$store.state.managementAwardListDetail.code == 200){
                        if(this.pagesize == 1){
                            this.list = this.$store.state.managementAwardListDetail.list;
                        }
                        else{
                            this.list = this.list.concat(this.$store.state.managementAwardListDetail.list);
                            if(this.$store.state.managementAwardListDetail.list.length == this.pageval){
                                 this.haveMore = true;
                            }else{
                                this.haveMore = false;
                            }
                        }
                    }else{
                        this.$toast({
                            message:this.$store.state.managementAwardListDetail.msg,
                        });
                    }
                }).catch((e)=> {
                    console.log(e);
                })
            },
            isHaveMore: function () {
              // 是否还有下一页，如果没有就禁止上拉刷新
              this.allLoaded = true // true是禁止上拉加载
              if (this.haveMore) {
                this.allLoaded = false
              }
            }
        },

css部分省略了，这样就大功告成了！初学前端，大神请轻喷！

云服务器 GPU云服务器上拉加载 js上拉加载数据下拉刷新下拉刷新空白

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

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

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

摘要：因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用自带的组件实现上拉加载更多功能。代码如下上拉加载更多初始化方法如下下面便是上拉加载更多的方法这样就大功告成啦因为业务的需要界面需要实现分页的功能，所以我就研究了一下如何利用mint-ui自带的loadmore组件实现上拉加载更多功能。首先在文件中引入组件 import {Indicator, Loadmore} f...

LiuZh 2019-08-20 15:35 评论0 收藏0
记 vue 移动端开发中的经验(2)

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

Flands 2019-08-23 15:42 评论0 收藏0
实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

摘要：做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个插件好一点安装不要使用安装导入在哪个页面使用则在哪个页面导入这里的话，我使用全局导入会出现问题若有错还请大家指出暂时想到的就是局部引入注册组件注册组件做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点 1.npm安装 npm ins...

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

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

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