vue和mintui-Loadmore结合实现上拉加载（移动端钉钉微应用）

最近做移动端钉钉微应用，使用Vue2.0+Webpack+Mint-UI实现上拉加载功能（下拉刷新也是同理，需要的可以看下Min-UI官方介绍）。下面是实现代码：

HTML部分：

<template lang="html">  
<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都可以很好的加载。