工作笔记六——mint-ui的loadmore和mt-cell-swipe结合使用问题
现在下拉刷新和上拉加载更多是很常见的需求,并且在列表上的用户交互(比如删除当前列表项,标记当前列表项为收藏等)也是非常常见的需求,mint-ui提供了Loadmore组件和CellSwipe组件分别实现了上述两种功能。关于两个组件的详细使用,这里不废话了,官网的例子跑一边基本上就掌握了。这里主要介绍两者结合使用,完成常见的用户操作。
直接看代码吧:
<template>
<div id="loadmore">
<mt-header fixed title="Loadmore使用案例">
<router-link to="/tool" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
</mt-header>
<div class="content">
<mt-loadmore style="min-height: 100%;overflow: auto"
:top-method="loadTop"
:bottom-all-loaded="bottomAllLoaded"
:auto-fill="false"
@bottom-status-change="handleBottomChange"
@top-status-change="handleTopChange"
:bottom-method="loadBottom" ref="loadmore">
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus === 'loading'">
数据加载中<i class="fa fa-spinner fa-pulse"></i>
</span>
<span v-show="topStatus === 'drop'">我在加载数据</span>
<span v-show="topStatus === 'pull'">下拉我就更新给你看</span>
</div>
<div slot="bottom" class="mint-loadmore-bottom" v-show="!bottomAllLoaded">
<span v-show="bottomStatus === 'drop'">释放更新</span>
<span v-show="bottomStatus === 'pull'">上拉加载更多</span>
<span v-show="bottomStatus === 'loading'">
数据加载中<i class="fa fa-spinner fa-pulse"></i>
</span>
</div>
<mt-cell-swipe
@click.native="clickMe"
v-for="(item,index) in list"
:right="[
{content: '发布',style: {background: 'red', color: '#fff', textAlign: 'center'},
handler(){release(index)}},
{content: '删除',style: {background: 'green', color: '#fff', textAlign: 'center'},
handler(){delete1(index)}}
]"
:title="item+'s'"
:key="index">
</mt-cell-swipe>
</mt-loadmore>
</div>
</div>
</template>
<style lang="scss">
.content {
margin-top: 40px;
height: auto;
.mint-cell-wrapper{
border-bottom: 1px solid #eaeaea;
}
}
</style>
<script>
import {Toast} from 'mint-ui'
export default {
data(){
return {
bottomAllLoaded: false,
topStatus: '',
bottomStatus:'',
list: []
}
},
methods: {
release(val){
console.info('release:' + val)
},
delete1(val){
console.info('delete:' + val)
},
clickMe(){
console.info('click me')
},
loadTop(){
let that = this;
for (let i = 0; i < 10; i++) {
this.list.unshift('unshift' + i)
}
setTimeout(function () {
that.$refs.loadmore.onTopLoaded();
}, 1000)
},
loadBottom(){
for (let i = 0; i < 2; i++) {
this.list.push('push' + i)
}
if (this.list.length > 100) {
this.bottomAllLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();
},
handleTopChange(status){
this.topStatus = status;
},
handleBottomChange(status) {
this.bottomStatus = status;
},
},
mounted(){
for (let i = 0; i < 10; i++) {
this.list.push(i)
}
},
created(){
let _footer = this.$store.state.footerVisible;
if (_footer) {
this.$store.commit('TOGGLE_FOOTER');
}
}
}
</script>
其中,注意mt-cell-swipe的这个用法:
:right="[
{ content: '发布',style: {background: 'red', color: '#fff', textAlign: 'center'},
handler(){release(index)}},
{ content: '删除',style: {background: 'green', color: '#fff', textAlign: 'center'},
handler(){delete1(index)}}
]"
这里给right属性绑定了一个数组,是直接定义在组件上的,如果定义在data函数里面,会出问题:你无法将当前操作的列表项直接传递给一个属性。所以,在模块上直接定义数组,就大大简化了这个问题,我们可以直接将操作项传递给handler中的方法。
另外,一个官网上没有提及的一个问题,Loadmore组件要设置高度属性,不然上拉加载更多这个功能不会正常运行!!!
演示如图:
源码地址:https://github.com/JerryYuanJ/a-vue-app-template/blob/master/src/pages/tool/Loadmore.vue
欢迎star~~