使用Mint UI出现的问题

2017-09-01

摘要：使用Mint UI的总结

主要使用Mint UI中的Toast、Indicator、Infinite scroll、Message box、Swipe、Lazy load、Cell、Cell Swipe这八种组件

1.Toast、Indicator、Message box、Swipe与Lazy load在使用时没有遇见任何问题

2.Infinite scroll是无限滚动指令，当它与<keep-alive>组件组合使用时会出现问题：路由跳转之后，原来组件的无限滚动指令仍然处于滚动状态(infinite-scroll-disabled为false未发生改变)，会一直请求数据。解决此问题需要调用activated和deactivated这两个生命周期钩子

<template>
  <ul class="moreli" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <li v-for="item in list" :key="item.id">
      <!-- 代码 -->
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      list: []
    }
  },
  methods: {
    loadMore() {
      this.loading = true; // 关闭无限滚动
      // 执行代码
    }
  },
  activated() {
    this.loading = false; // 开启无限滚动
  },
  deactivated() {
    this.loading = true; // 关闭无限滚动
  }
}
</script>

3.Cell组件在使用时遇到了问题：我想使用原生跳转跳到其他网站。但当我改变to的值为完整链接时，它并没有像我预想的那样跳转，而是进行路由匹配，未找到后重定向跳到主页了（没有原生跳转的示例，我也很无奈啊）。最后只能将需要原生跳转的Cell组件绑定了点击事件，通过改变location对象实现跳转

1	<mt-cell title="github" @click.native="changeTitle" is-link></mt-cell>

4.使用Cell Swipe组件增加右滑删除按钮。组件right属性写法：

<mt-cell-swipe v-for="(item, index) in allchat" :key="item.from" 
  :right="
    [
      {
        content: '<div class=\'icon-bin\' style=\'font-size:0.8rem;\'></div>', 
        style: { backgroundColor: '#f1f2f6' }, 
        handler () {
          remove(index)
        }
      }
    ]"
>
</mt-cell-swipe>