npm 安装
推荐 npm 安装,因为它能更好的和 wepback 打包工具更好的使用。
在这里安装 mint-ui 和引入,我就不多做介绍了,如果有需要可以看一下我的博客有一篇专门是关于安装 mint-ui 和引入的文章。
下拉、上拉刷新,支持自定义 HTML 模板。
引入
这两行实在 main.js 文件中进入的。
例子
<template>
<mt-loadmore :auto-fill="false" :bottom-method="loadBottom" ref="loadmore" :bottpm-all-loaded="isAllLoaded">
<ul>
<li>
</li>
</ul>
</mt-loadmore>
</template>
<script>
export default {
data(){
},
methods:{
concatByPage(page) {
this.$axios.get('url')
.then(res => {
//一个判断,根据自己的需求
if(){
//Loadmore 的进制函数调用的属性来控制
this.isAllLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();//通知元素重新定位
})
.catch();
},
loadBottom(){
// 这个是通过下拉加载的话,调用 concatByPage() 这个函数
this.concatByPage(this.page);
}
}
}
</script>
<style>
</style>
以上的基本要用到的东西,是放在你所需要用到下拉、上拉加载刷新的项目文件中的模板。
容易踩坑的点
- 在用 Loadmore 的时候,引入这些属性基本就可以用。
2.以下这两个都是在拉动函数里面写入的。我上边的代码例子中也有,可以参考!
3.这一点非常重要,也是很容易踩坑的一点
必须把 index.html 的头部声明去掉。这么说,是因为有些浏览器支持,有些不支持。
到这里基本配置完成 loadmore 加载功能了。