mint-ui的loadmore和mt-cell-swipe结合使用问题

现在下拉刷新和上拉加载更多是很常见的需求，并且在列表上的用户交互（比如删除当前列表项，标记当前列表项为收藏等）也是非常常见的需求，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
版权声明：本文为博主原创文章，转载请附上博文链接！