vue和mint-ui loadMore 實現上拉加載和下拉刷新

libin19890520 發布于2019-08-23 12:51 / 3129人閱讀

摘要：首先安裝組件庫在中引入和樣式然后在組件中引入在模板中寫法如下總計獎勵代碼如下分頁每次請求的個數是否加載完畢是否有更多數據上拉加載更多下拉刷新分頁查詢加載數據從中拿數據是否還有下一頁，如果沒有就禁止上拉刷新是禁止

首先安裝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上拉加載數據下拉刷新下拉刷新空白

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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