- <template>
- <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
- <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> //引用時把你循環遍歷出來內容抱起來
- <ul class="list" v-for="(val, key) in pageList"> //pageList是你需要循環的數組
- <li>
- <div>我是小11</div>
- <div>我是小11</div>
- </li>
- </ul>
- </v-loadmore>
- </div>
- </template>
- <script>
- import {Loadmore} from 'mint-ui'; //引入組件
- export default {
- data:function() {
- return {
- searchCondition:{ //分頁屬性
- pageNo:"1",
- pageSize:"10"
- },
- pageList:[],
- allLoaded: false, //是否可以上拉屬性,false可以上拉,true爲禁止上拉,就是不讓往上劃加載數據了
- scrollMode:"auto" //移動端彈性滾動效果,touch爲彈性滾動,auto是非彈性滾動
- }
- },
- components: {
- 'v-loadmore':Loadmore // 爲組件起別名,vue轉換template標籤時不會區分大小寫,例如:loadMore這種標籤轉換完就會變成loadmore,容易出現一些匹配問題
- // 推薦應用組件時用a-b形式起名
- },
- mounted(){
- this.loadPageList(); //初次訪問查詢列表
- },
- methods: {
- loadTop:function() { //組件提供的下拉觸發方法
- //下拉加載
- this.loadPageList();
- this.$refs.loadmore.onTopLoaded();// 固定方法,查詢完要調用一次,用於重新定位
- },
- loadBottom:function() {
- // 上拉加載
- this.more();// 上拉觸發的分頁查詢
- this.$refs.loadmore.onBottomLoaded();// 固定方法,查詢完要調用一次,用於重新定位
- },
- // 下拉的方法
- loadPageList:function (){
- // 查詢數據
- this.api.PageList(this.searchCondition).then(data =>{ //這裏是寫http請求,寫上你的接口和參數,根據你請求的方法不同寫vue一般用$axios
- // 是否還有下一頁,加個方法判斷,沒有下一頁要禁止上拉
- this.isHaveMore(data.result.haveMore); //調用最下面的驗證方法進行驗證
- this.pageList = data.result.pageList; //獲取到你需要的數據的數組
- this.$nextTick(function () {
- // 原意是DOM更新循環結束時調用延遲迴調函數,大意就是DOM元素在因爲某些原因要進行修改就在這裏寫,要在修改某些數據後才能寫,
- // 這裏之所以加是因爲有個坑,iphone在使用-webkit-overflow-scrolling屬性,就是移動端彈性滾動效果時會屏蔽loadmore的上拉加載效果,
- // 花了好久才解決這個問題,就是用這個函數,意思就是先設置屬性爲auto,正常滑動,加載完數據後改成彈性滑動,安卓沒有這個問題,移動端彈性滑動體驗會更好
- this.scrollMode = "touch";
- });
- });
- },
- //上拉加載的方法 下面的方法一樣的
- more:function (){
- // 分頁查詢
- this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;
- this.api.loadPageList(this.searchCondition).then(data=>{
- this.pageList = this.pageList.concat(data.result.pageList);
- this.isHaveMore(data.result.haveMore);
- });
- },
- isHaveMore:function(isHaveMore){
- // 是否還有下一頁,如果沒有就禁止上拉刷新
- this.allLoaded = true; //true是禁止上拉加載
- if(isHaveMore){
- this.allLoaded = false;
- }
- }
- }
- }
- </script>
基於vue2.0版本的手機端mint-ui 的Loadmore上拉刷新下拉加載的方法,對於初學者來說很有幫助,開始寫走了很多彎路,網上找到這個方法,簡單實用,不多說看代碼……
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.