zhangsiye/mini/components/TabBar/index.vue

<template>
  <view class="tab-bar">
    <view class="content main-between cross-center">
      <view
        v-for="(item,index) in list"
        :key="index"
        class="tab-item dir-top-wrap cross-center main-center"
        :class="{active: active === index}"
        @click="handleSwitch(index)"
      >
        <view class="icon">
          <image :src="active === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
        </view>
        <text>{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'TabBar',
  data() {
    return {
      color: '#8a8a8a',
      selectedColor: '#6EEBE8',
      types: {
        1: {
          'pagePath': '/pages/index/index',
          'iconPath': '/static/image/tab/home.png',
          'selectedIconPath': '/static/image/tab/home-HL.png'
        },
        2: {
          'pagePath': '/pages/trace/index',
          'iconPath': '/static/image/tab/trace.png',
          'selectedIconPath': '/static/image/tab/trace-HL.png'
        },
        3: {
          'pagePath': '/pages/my/index',
          'iconPath': '/static/image/tab/my.png',
          'selectedIconPath': '/static/image/tab/my-HL.png'
        }
      },
      list: [
        {
          'pagePath': '/pages/index/index',
          'iconPath': '/static/image/tab/home.png',
          'selectedIconPath': '/static/image/tab/home-HL.png',
          'text': '首页'
        },
        {
          'pagePath': '/pages/trace/index',
          'iconPath': '/static/image/tab/trace.png',
          'selectedIconPath': '/static/image/tab/trace-HL.png',
          'text': '追剧'
        },
        {
          'pagePath': '/pages/my/index',
          'iconPath': '/static/image/tab/my.png',
          'selectedIconPath': '/static/image/tab/my-HL.png',
          'text': '我的'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      active: seate => seate.tab.index
    })
  },
  created() {
    this.calc()
    uni.hideTabBar()
  },
  methods: {
    handleSwitch(index) {
      if (index === this.active) {
        return
      }
      this.$store.dispatch('tab/index', index)
      const item = this.list[index]
      uni.switchTab({
        url: item.pagePath
      })
    },
    calc() {
      let active = 1
      const page = uni.$u.page()
      this.list.forEach((obj, index) => {
        if (obj.pagePath === page) {
          active = index
        }
      })
      if (active !== this.active) {
        this.$store.dispatch('tab/index', active)
      }
    },
    getData() {
      this.$api.setting.tabBar().then(res => {
        const data = res.data
        data.forEach(obj => {
          Object.assign(obj, this.types[obj.type])
        })

        console.log('-->data', data)

        this.list = data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .content{
      background: $bg-color;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 120rpx;
      background-size: 110% 100%;

      .tab-item{
        flex: 1;
        color: #8a8a8a;
        transition: .3s;
        font-size: 24rpx;
        position: relative;
        &.active{
          color: #6EEBE8;
        }
        .icon{
          width: 42rpx;
          height: 42rpx;
          image{
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
</style>