mayou/htmldev/cps/src/views/marketing/index.vue

<template>
  <div>
    <div
      class="navigator-container"
      ref="navigato">
      <ul
        class="tab-list"
        ref="tabList">
        <li class="tab-item"
            :class="{'link-avtive': $route.name === item.routeName}"
            v-for="(item, index) in navList"
            :key="index"
            @click="_selectNav(item)">
          <img
            :src="$route.name === item.routeName ? item.active : item.default"
            alt="">
          <p class="tab-name">{{ item.title }}</p>
        </li>
      </ul>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      currentTabIndex: 0, // 当前默认tab
      scroll: null,
      navList: [
        {
          id: 0,
          title: '省钱',
          default: require('./image/ic_save_0@2x.png'),
          active: require('./image/ic_save_1@2x.png'),
          routeName: 'MarketingSave'
        },
        {
          id: 1,
          title: '返钱',
          default: require('./image/ic_return_0@2x.png'),
          active: require('./image/ic_return_1@2x.png'),
          routeName: 'MarketingReturn'
        },
        {
          id: 2,
          title: '赚钱',
          default: require('./image/ic_make_0@2x.png'),
          active: require('./image/ic_make_1@2x.png'),
          routeName: 'MarketingMake'
        }
      ]
    }
  },
  mounted () {
    this.funInitBScroll(0)
    this._initTabListWidth()
    const timer = setTimeout(() => {
      clearTimeout(timer)
      this._adjust(this.currentTabIndex)
    }, 500)
  },
  activated () {
    if (this.$route.meta.isUseCache) {
      if (this.scroll) {
        this.scroll.refresh()
      }
    }
  },
  methods: {
    funInitBScroll (index) {
      const options = {
        probeType: 1,
        click: true,
        startX: this.initTranslate(index),
        scrollY: false,
        scrollX: true,
        scrollbar: false,
        startY: 0,
        freeScroll: false,
        mouseWheel: true,
        bounce: true,
        zoom: false
      }
      this.scroll = new BScroll(this.$refs.navigato, options)
    },
    _selectNav (item) {
      if (item === undefined) {
        return
      }
      // this.$emit('funChange', item.id)
      this.$router.replace({ name: item.routeName })
    },
    selectNav (item) {
      if (item === undefined) {
        return
      }
      this.currentTabIndex = item.id
      this._adjust(item.id)
    },
    _initTabListWidth () {
      const tabList = this.$refs.tabList
      const items = tabList.children
      let width = 0
      for (let i = 0; i < items.length; i++) {
        width += items[i].clientWidth
      }
      tabList.style.width = (width + 1) + 'px'
    },
    initTranslate (tabId) {
      const viewportWidth = this.$refs.navigato.clientWidth
      const tabListWidth = this.$refs.tabList.clientWidth
      const minTranslate = Math.min(0, viewportWidth - tabListWidth)
      const middleTranslate = viewportWidth / 2
      const items = this.$refs.tabList.children
      let width = 0
      this.navList.every((item, index) => {
        if (item.id === tabId) {
          return false
        }
        width += items[index].clientWidth
        return true
      })
      let translate = middleTranslate - width
      translate = Math.max(minTranslate, Math.min(0, translate))
      return translate
    },
    // 导航类目超过一屏在使用
    _adjust (tabId) {
      this.scroll.scrollTo(this.initTranslate(tabId), 0, 300)
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['Mine'].findIndex(item => item === to.name) > -1) {
      from.meta.isUseCache = true
    }
    next()
  }
}
</script>
<style lang='scss' scoped>
.navigator-container {
  width: 100%;
  padding: 10px 0;
  white-space: nowrap;
  overflow: hidden;

  .tab-list {
    font-size: 0;
  }

  .tab-item {
    display: inline-block;
    width: 125px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 0;

    &.link-avtive {
      img {
        width: 36px;
        height: 36px;
      }

      p {
        font-size: 26px;
        color: #1F314A;
      }
    }

    img {
      display: inline-block;
      vertical-align: middle;
      width: 24px;
      height: 24px;
    }

    p {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      color: #8B8B8B;
      line-height: 36px;
    }
  }
}
</style>