工作笔记六——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~~