mint-ui 的navbar踩坑记

  1. 云栖社区>
  2. 博客>
  3. 正文

mint-ui 的navbar踩坑记

eyunshu 2019-01-18 21:46:46 浏览11316
展开阅读全文

首先,mt-tab-item不支持v-for


<mt-tab-item v-for="(item,key) in list" :key="key" id="item.title">{{item.title}}</mt-tab-item>

能正常显示导航,但点击任何一个菜单,都会全部选中,所以只能像例子一样,一个个写。

其次,如果需要同时选择图片,应该这么写


<template>
  <div id="tab-bar">
    <mt-tabbar v-model="selected" v-show="isShow" fixed>
      <mt-tab-item id="main">
          <img :src="selected === img1.title? img1.url1: img1.url0" slot="icon">首页
      </mt-tab-item>
      <mt-tab-item id="focus">
        <img :src="selected === img3.title? img3.url1: img3.url0" slot="icon">我的关注
      </mt-tab-item>
      <mt-tab-item id="todolist">
        <img :src="selected === img7.title? img7.url1: img7.url0" slot="icon">待办事项
      </mt-tab-item>
      <mt-tab-item id="my">
        <img :src="selected === img9.title? img9.url1: img9.url0" slot="icon">我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style>
</style>
<script>
  import * as types from '../store/mutation-types'
  export default {
    data(){
      return {
        selected: sessionStorage.getItem('selected') || 'main', 
        img1: {title: 'main', url0: require("../assets/tool/home.png"), url1: require("../assets/tool/home_selected.png")},
        img3: {title: 'focus', url0: require("../assets/tool/focus.png"), url1: require('../assets/tool/focus_selected.png')},
        img7: {title: 'todolist', url0: require("../assets/todolist/todolist.png"), url1: require("../assets/todolist/todolist_selected.png")},
        img9: {title: 'my', url0: require("../assets/tool/user.png"), url1: require("../assets/tool/user_selected.png")}
      }
    },
    computed: {
      isShow: function () {
        return this.$store.state.footerVisible;
      }
    },
    watch: {
        'selected': {
          handler() {
            switch (this.selected) {
                case 'main': 
                    this.$router.push('/main')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'main')
                    break
                case 'focus': 
                    this.$router.push('/focus')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'focus')
                    break
                case 'todolist': 
                    this.$router.push('/todolist')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'todolist')
                    break
                case 'my': 
                    this.$router.push('/my')
                    this.$store.commit(types.SELECT_FOOTER_TAB, 'my')
                    break
            }
        }
      }
    }
  }
</script>




网友评论

登录后评论
0/500
评论
eyunshu
+ 关注