tangwang-pc/src/components/MobileHeader.vue

<template>
  <div
    class="mobile-header"
    :style="{ position: isIndex ? (needFixed ? 'fixed' : '') : 'fixed' }"
  >
    <div ref="mobileHeader">
      <div>
        <p
          v-for="item in tabArr"
          :key="item.name"
          :class="{ chosenMobileTab: activeTab === item.name }"
          @click="handleClick(item)"
        >
          {{ item.font }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
function getDay() {
  const today = new Date();
  const y = today.getFullYear();
  let m = today.getMonth() + 1;
  let d = today.getDate();
  m = m < 10 ? '0' + m : m;
  d = d < 10 ? '0' + d : d;
  return y + '-' + m + '-' + d;
}
export default {
  props: {
    isIndex: {
      type: Boolean,
      default: false
    },
    needFixed: {
      type: Boolean,
      default: false
    },
    bannerHeight: {
      type: Number,
      default: 0
    },
    isMore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      activeTab: '',
      tabArr: [
        {
          font: '推荐',
          name: 'index',
          url: '/',
          statInfo: { category: '推荐', des: '推荐tab' }
        },
        {
          font: '视频',
          name: 'video',
          url: '/video',
          statInfo: { category: '视频', des: '视频tab' }
        },
        {
          font: '一问医答',
          name: 'doctor',
          url: '/doctor',
          statInfo: { category: '一问医答', des: '一问医答tab' }
        },
        {
          font: '药物',
          name: 'article-medicine',
          url: '/article?labelId=-1',
          statInfo: { category: '文章', des: '文章-药物tab' }
        },
        {
          font: '饮食',
          name: 'article-food',
          url: '/article?labelId=2',
          statInfo: { category: '文章', des: '文章-饮食tab' }
        },
        {
          font: '运动',
          name: 'article-sport',
          url: '/article?labelId=3',
          statInfo: { category: '文章', des: '文章-运动tab' }
        },
        {
          font: '并发症',
          name: 'article-complication',
          url: '/article?labelId=17',
          statInfo: { category: '文章', des: '文章-并发症tab' }
        },
        {
          font: '监测',
          name: 'article-survey',
          url: '/article?labelId=-2',
          statInfo: { category: '文章', des: '文章-监测tab' }
        },
        {
          font: '心理',
          name: 'article-mind',
          url: '/article?labelId=18',
          statInfo: { category: '文章', des: '文章-心理tab' }
        }
      ]
    };
  },
  created() {
    let activeName = this.$route.name;
    if (this.$route.name === 'article') {
      const labelId = Number(this.$route.query.labelId);
      let affixArticle = '';
      switch (labelId) {
        case -1:
          affixArticle = 'medicine';
          break;
        case 2:
          affixArticle = 'food';
          break;
        case 3:
          affixArticle = 'sport';
          break;
        case 17:
          affixArticle = 'complication';
          break;
        case -2:
          affixArticle = 'survey';
          break;
        case 18:
          affixArticle = 'mind';
          break;
        default:
          break;
      }
      activeName += '-' + affixArticle;
    }
    this.activeTab = activeName;
  },
  mounted() {
    if (!this.isMore) {
      if (this.activeTab === 'index') {
        if (!localStorage.getItem('indexTabAniDay')) {
          this.animationFun();
          localStorage.setItem('indexTabAniDay', getDay());
        } else {
          let _day = localStorage.getItem('indexTabAniDay');
          if (getDay() !== _day) {
            this.animationFun();
            _day = getDay();
            localStorage.setItem('indexTabAniDay', _day);
          }
        }
      }
      const left =
        document.getElementsByClassName('chosenMobileTab')[0].offsetLeft;
      const centerL =
        ((document.documentElement.clientWidth || document.body.clientWidth) -
          70) /
        2;
      document
        .getElementsByClassName('mobile-header')[0]
        .scrollTo(left - centerL, 0);
    }
  },
  methods: {
    animationFun() {
      const windowW =
        document.documentElement.clientWidth || document.body.clientWidth;
      const tabW = this.$refs.mobileHeader.clientWidth;
      this.$refs.mobileHeader.animate(
        [{ marginLeft: '0' }, { marginLeft: windowW - tabW + 'px' }],
        {
          duration: 1000,
          delay: 1000
        }
      );
      this.$refs.mobileHeader.animate(
        [
          { marginLeft: windowW - tabW + 'px' },
          { marginLeft: windowW - tabW + 'px' }
        ],
        {
          duration: 200,
          delay: 2000
        }
      );
      this.$refs.mobileHeader.animate(
        [{ marginLeft: windowW - tabW + 'px' }, { marginLeft: 0 }],
        {
          duration: 1000,
          delay: 2200
        }
      );
    },
    handleClick(item) {
      if (item.name !== this.activeTab) {
        this.baiduStat(
          (this.isMore ? '更多页面-' : '导航栏-') + item.statInfo.category,
          'click',
          item.statInfo.des
        );
        const { href } = this.$router.resolve({
          path: item.url
        });

        window.location.href = href;
      }
    }
  }
};
</script>
<style lang="scss">
.mobile-header {
  overflow-x: scroll;
  top: 60px;
  display: flex;
  border-bottom: 1px solid $bg-color;
  width: 100%;
  height: 48px;
  background: $body-color;
  white-space: nowrap;
  z-index: 2;
  & > div {
    & > div {
      display: flex;
      overflow: hidden;
      height: 48px;
      position: relative;
      p {
        flex: none;
        width: 70px;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: $font-color1;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
        &.chosenMobileTab {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: $main-blue-color;
        }
      }
    }
  }
}
</style>