MintUI 上拉加载下拉刷新 解决添加this.$refs.loadmore.onBottomLoaded();页面卡死问题

用MintUI 写一个上拉加载下拉刷新，解决this.$refs.loadmore.onBottomLoaded();页面卡死问题

首先先导入样式和 js 文件

用脚手架写的话就按照下面的方式引入

//安装
npm install mint-ui -S

//在main.js文件中，全局引入
import Mint from 'mint-ui';
Vue.use(Mint);

//按需引入部分组件，应该都知道components的作用，不知道的:https://www.baidu.com/
import { Loadmore } from 'mint-ui';
components:{
  "v-loadmore": Loadmore
},

不是用脚手架做的话呢，用下面这种方式引入，不过这种应该用的少，毕竟做项目的话都是用脚手架去做，方便好多

<!--mintUI插件中的css文件-->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!--mintUI插件中的js文件-->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

1、脚手架做的是这样的

HTML：
//注意:style="{'-webkit-overflow-scrolling': scrollMode}"解决加上this.$refs.loadmore.onBottomLoaded();页面会卡死的问题，一定要在顶部盒子上加
<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" topDropText="放开那萝莉 让我来" topPullText="在往下拉试试"  topLoadingText="正在刷新">
		<ul class="list" v-for="items in pageList">
			<li>
				<div>{{items}}</div>
			</li>
		</ul>
	</v-loadmore>
</div>
css:
.main-body{//一定要设置高度以及overflow，不然上拉加载不会有效果
	height: 100%;
	overflow: scroll;
}
js:
loadTop() { //组件提供的下拉触发方法
	//下拉刷新
    setTimeout(() => {
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    }, 2000);
},
loadBottom() {
// 上拉加载
   this.allLoaded = false;
   setTimeout(() => {
     this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
   }, 2000);
},

在这里我是加了setTimeout的，主要是给你们能够看到效果，也可以不加
基本上就是这样写的

2、不是用脚手架写的

HTML：
<div class="app_loadmore" :style="{'-webkit-overflow-scrolling': scrollMode}">
	<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
		<ul class="list" v-for="items in pageList">
			<li>
				<div>{{items}}</div>
			</li>
		</ul>
	</mt-loadmore>
</div>
css:
.app_loadmore {
	height: 100%;
	overflow: scroll;
}
js:
new Vue({
	el: ".app_loadmore",
	data: {
		pageList: ["我是牛逼","我是牛逼","我是牛逼","我是牛逼","我是牛逼","我是牛逼","我是牛逼","我是牛逼","我是牛逼","我是牛逼"],
		allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了 
		scrollMode: "auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
	},
	methods: {
		loadTop() { //组件提供的下拉触发方法 
			//下拉加载 
			setTimeout(() => {
				this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位
			},2000) 
		},
		loadBottom() {
			// 上拉加载 
			this.allLoaded = false;
			setTimeout(() => {
				this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
			},2000)
		},
	}
})

其实两者没有啥差距，主要是想自己看到效果的话，自己可以先完全复制下面这种不是用脚手架写的方式去看看效果

MintUI 官网：http://mint-ui.github.io/#!/zh-cn
MintUI 官网中的上拉加载下拉刷新位置：http://mint-ui.github.io/docs/#/en2/loadmore

还有一个就是滑动过快的时候，会报Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.这么个错误
解决方法我也写了：https://blog.csdn.net/weixin_44557053/article/details/97663508