vue下拉刷新，滚动加载(Mint UI)
1.安装Mint UI并配置环境安装模块npm i mint-ui -S引入 Mint UI（1）完整引入在 main.js 中写入以下内容：//main.jsimport Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'...
1.安装Mint UI并配置环境
- 安装模块
npm i mint-ui -S - 引入 Mint UI
（1）完整引入
在 main.js 中写入以下内容：
//main.js
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
需要注意的是，样式文件需要单独引入。
（2）按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
我一般改完之后是这样的，也可以直接拿去用
{
"presets": [
["es2015", { "modules": false }],
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
}
],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
[
{
"libraryName": "mint-ui",
"style": true
}
]
]
]
}
比如我们引入组件中的Loadmore，上拉加载，下拉刷新功能，在main.js中写：
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
然后运行的时候可能会报错： Couldn’t find preset “es2015” relative to directory
由于是菜鸟没使用ES标准，而引入的vue-ueditor使用了ES标准，所以编译会报错，解决办法如下：
npm install babel-preset-es2015 --save-dev
然后 npm run dev 就运行成功啦。
2.实例
接下来我们在具体页面中写一个例子：
<template>
<mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" ref="loadmore">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
<!-- 下拉时显示的内容（加载中） -->
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</mt-loadmore>
</template>
<!-- 组件的模型 -->
<script>
export default {
data () {
return {
topStatus:'',
}
},
methods:{
loadTop(){
//在你写完所要执行的方法后，一定一定要加上这句代码，这个是收回下拉动作的
this.$refs.loadmore.onTopLoaded();
},
//下拉过程，加载过程，顶部状态的改变
handleTopChange(status){
this.topStatus = status;
},
}
}
</script>
注意：mt-loadmore标签里的 ref=“loadmore”这个属性一定要加上，第一次写的时候我不小心没写，结果一直提示我loadmore报错。它里面的上拉加载更多，建议最好不要用，官网的例子执行不了，有bug，我在网上找过别人写的demo，修修改改可以用，就是稍微不注意改到哪还是执行不了，至今我都无解，而且可能还有无法预测的坑，总之不太建议用。也可能是我用得不对。
3.滚动加载更多
妈耶，这个我第一次写的时候感觉好麻烦，因为我页面里面有两个列表，是来回切换的，这两个列表都在滚动的内容里，要判断很多东西。。总之搞得我一头汗。今天先讲一下只有一个列表的情况。
1.首先，不要忘了引入需要的模块
//main.js
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
<template>
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<li v-for="item in list">要循环的内容</li>
</ul>
</template>
<!-- 组件的模型 -->
<script>
export default {
data () {
return {
is_next_page:false,//是否有下一页
scrollDisable:false,//禁止滑动（随便声明一个变量，等会儿要用到）
loading: true //滚动的初始值，tru为不执行滚动加载
}
},
methods:{
// 注意，这个方法在页面刚进来的时候就会执行，所以我们设置loading的初始值为true，让它禁止执行这个方法
// scrollDisable这个变量是为了防止用户多次滚动操作，而反复执行加载的，所以设置这个变量，等到数据加载完再让它恢复能加载更多数据
loadMore(){
if (this.scrollDisable) {
return;
}
this.scrollDisable = true;
//执行加载更多的方法，请求成功后在恢复
if(还有下一页){
//请求数据，加载更多
//这里写请求方法
//请求成功后：（一定要请求成功之后。观察是否有异步的问题，下面这两句代码一定要请求成功后）
this.loading = false;
this.scrollDisable = false;
}else{
this.loading = false;
this.scrollDisable = false;
}
}
},
mounted(){
//首次请求数据
//这里写请求方法 （请求成功后，让loading=false，让滚动加载可以执行，如果这个写的有问题的话，就用下面watch的方法解决）
},
//我写的时候因为异步的原因，上面loading=false没有用，所以用这个方法解决
//首先请求成功后，改变is_next_page的值，根据是否还有下一页，决定要不要让滚动加载的方法继续执行（如果没有下一页了，就没必要执行滚动加载了）
watch:{
is_next_page:function()(newValue, oldValue) {
this.loading = !newValue;
},
}
}
</script>
我自己写的时候，涉及到两个列表切换，然后都有滚动加载的功能，那个时候就需要判断更多的条件，但其实原理都是一样的，而且因为我写的请求是异步的，所以问题又比较麻烦点，同步的话就比较简单。只需要在每个请求数据成功后面加上改变loading的值或者scrollDisable 的值就可以了。
4.如果页面有两个列表可以切换，并且分别都有滚动加载的功能（请往下看）
虽然比较麻烦，但还是想总结一下记录下来，毕竟也比较常用，下面这个我用的是两个列表写在同一个滚动器里面的，不知道可不可以分开写，还没有试过，下次试一试。emmmmm，其实和上面的代码基本一样，那我就先复制一下代码，在上面代码的基础上进行增加。
那我们就写，一个列表是list，一个是arrays
<template>
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<li v-for="item in list" v-if="is_list">要循环的list内容</li>
<li v-for="item in arrays" v-else>要循环arrays的内容</li>
</ul>
</template>
<!-- 组件的模型 -->
<script>
export default {
data () {
return {
is_list:true,//是否是list列表页
is_next_page:false,//list是否有下一页
a_isNext_page:false,//arrays是否有下一页
scrollDisable:false,//list禁止滑动（随便声明一个变量，等会儿要用到）
a_scrollDisable:false,//arrays禁止滑动（随便声明一个变量，等会儿要用到）
loading: true //滚动的初始值，tru为不执行滚动加载
}
},
methods:{
// 注意，这个方法在页面刚进来的时候就会执行，所以我们设置loading的初始值为true，让它禁止执行这个方法
// scrollDisable这个变量是为了防止用户多次滚动操作，而反复执行加载的，所以设置这个变量，等到数据加载完再让它恢复能加载更多数据
loadMore(){
if(如果是list页){
if (this.scrollDisable) {
return;
}
this.scrollDisable = true;
if(还有下一页){
//请求数据，加载更多
//这里写请求方法
//请求成功后：（一定要请求成功之后。观察是否有异步的问题，下面这两句代码一定要请求成功后）
this.loading = false;
this.scrollDisable = false;
}else{
this.loading = false;
this.scrollDisable = false;
}
}else{
//如果是arrays页
if (this.m_scrollDisable) {
return;
}
this.m_scrollDisable = true;
//执行加载更多的方法
if(还有下一页){
//请求数据，加载更多
//这里写请求方法
//请求成功后：（一定要请求成功之后。观察是否有异步的问题，下面这两句代码一定要请求成功后）
this.loading = false;
this.m_scrollDisable = false;
}else{
this.loading = false;
this.m_scrollDisable = false;
}
}
}
},
mounted(){
//首次请求数据
//这里写请求方法 （请求成功后，让loading=false，让滚动加载可以执行，如果这个写的有问题的话，就用下面watch的方法解决）
},
//我写的时候因为异步的原因，上面loading=false没有用，所以用这个方法解决
//首先请求成功后，改变is_next_page的值，根据是否还有下一页，决定要不要让滚动加载的方法继续执行（如果没有下一页了，就没必要执行滚动加载了）
watch:{
is_next_page:function(newValue, oldValue) {
if (this.is_list) {
this.loading = !newValue;
}
},
a_isNext_page:function(newValue, oldValue){
if (!this.is_list) {
this.loading = !newValue;
}
}
}
}
</script>
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献14条内容
所有评论(0)