vue和mintui-Loadmore結合實作上拉加載（移動端釘釘微應用）

最近做移動端釘釘微應用，使用Vue2.0+Webpack+Mint-UI實作上拉加載功能（下拉重新整理也是同理，需要的可以看下Min-UI官方介紹）。下面是實作代碼：

HTML部分：

<template >  
<div class="video-content" :style="{'-webkit-overflow-scrolling': scrollMode}">
    <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore" :bottomPullText='bottomText' @bottom-status-change="handleBottomChange">  
        <ul>                                
            <li v-for="(item,index) in companylist" :key="index" class="previvew-cover">  
                <router-link :to="{name: 'detail',query:{ uid:item.id,imgUrl:item.cover,marks:comMark,access_token:access_token}}">  
                    <img :src="item.cover" />  
                    <span v-if="item.coverType==1" class="previvew-cover-box">  
                        <span><p class="previvew-cover-title">{{item.title}}</p></span>  
                    </span>  
                </router-link>  
            </li>  
        </ul>  
        <div slot="bottom" class="mint-loadmore-bottom">  
            <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">上拉加載更多...</span>  
            <span v-show="bottomStatus === 'loading'"><img src="../images/uploading.gif"/>加載中...</span>  
        </div>  
    </v-loadmore>  
</div>  
</template>  
           

JS部分：

<script type="text/javascript">
	import axios from 'axios';
	import router from '../router';
	import { Loadmore } from 'mint-ui';
	import { global_set } from '../script/global.js'
	export default {
		data() {
			return {				
				companylist: [],
				comPagesNum: '',
				comMark: '',
				pageNo: 1,
				comTotal: '',
				bottomText: '',
				allLoaded: false, //是否可以上拉屬性，false可以上拉，true為禁止上拉，就是不讓往上劃加載資料了
				scrollMode: "auto", //移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動
				bottomStatus: '',							
				api: {
					comList: global_set.host + "/course/getList", 				
				}

			}
		},
		components: {
			'v-loadmore': Loadmore, // 為元件起别名，vue轉換template标簽時不會區分大小寫，例如：loadMore這種标簽轉換完就會變成loadmore，容易出現一些比對問題
			
		},
		mounted() {
		    //初次通路查詢資料清單  
             this.comInitData();
		},
		methods: {
			comInitData: function() { 
				axios.get(this.api.comList, {
						params: {
							access_token: this.access_token,
							pageNumber:this.pageNo,
							pageSize: 10,
							sortName: 'createTime',
							sortOrder: 'desc'
						}
					})
					.then((data) => {
						this.companylist = data.data.list;
						this.comMark = 0;
						this.comTotal = data.data.total;
						this.comPagesNum = data.data.pages;
					})
					.catch(function(err) {
						console.log(err);
					})

			},
			
			loadBottom: function() {
				if(this.comTotal > 10) {
					var u = navigator.userAgent;
					var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
					var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
					setTimeout(() => {
						// 分頁查詢
						this.pageNo += 1;
						if(this.pageNo <= this.comPagesNum) {
							axios.get(this.api.comList, {
									params: {
										access_token: this.access_token,
										pageNumber: this.pageNo,
										pageSize: 10,
										sortName: 'createTime',
										sortOrder: 'desc'
									}
								})
								.then((data) => {
									this.companylist = this.companylist.concat(data.data.list);
									this.isHaveMore(data.data.hasNextPage);  // 上拉判斷是否還有下一頁資料要加載  
								})
								.catch(function(err) {
									console.log(err);
								})							
							this.$refs.loadmore.onBottomLoaded(); // 固定方法，查詢完要調用一次，用于重新定位。
							if(isiOS == true) {
								this.scrollMode = "touch";
							}

						}

					}, 1000);
				} else {
					this.allLoaded = true;
					//$('.mint-loadmore-bottom').html('親，已經到底了哦！');
					setTimeout(() => {
						$('.mint-loadmore-content').css({
							'transform': 'translate3d(0, 0, 0)'
						});
					}, 500)
				}
			},
			handleBottomChange(status) {
				this.bottomStatus = status; //上拉狀态變換
			},
			isHaveMore: function(isHaveMore) {
				// 是否還有下一頁，如果沒有就禁止上拉重新整理
				this.allLoaded = true; //true是禁止上拉加載
				if(isHaveMore == true) {
					this.allLoaded = false;
				}
			},



		},

	}
</script>
           

以上就是整個實作方式，android和ios都可以很好的加載。