现在下拉刷新和上拉加载更多是很常见的需求,并且在列表上的用户交互(比如删除当前列表项,标记当前列表项为收藏等)也是非常常见的需求,mint-ui提供了Loadmore组件和CellSwipe组件分别实现了上述两种功能。关于两个组件的详细使用,这里不废话了,官网的例子跑一边基本上就掌握了。这里主要介绍两者结合使用,完成常见的用户操作。
直接看代码吧:
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');
}
}
}
其中,注意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组件要设置高度属性,不然上拉加载更多这个功能不会正常运行!!!
作者:袁杰Jerry
来源:CSDN
原文:https://blog.csdn.net/qq_25324335/article/details/79938751
版权声明:本文为博主原创文章,转载请附上博文链接!