mpvue实现小程序导航栏下划线及点击滑动

演示

<template>
  <div>
    <div class="nav">
      <div
        v-for="(item,index) in nav"
        :key="index"
        @click="tabClick(index)"
        :class="[{'active_item':activeIndex==index},'nav_item']"
      >{{item}}</div>
      <div
        :style="'width:'+(navWidth /2)+'rpx' + ';'+ 'transform:'+ 'translateX('+(activeIndex * navWidth+navWidth/4) + 'rpx'+')'"
        class="line"
      ></div>
    </div>
    <swiper
      :style="'height:'+  swiperHeight+'rpx'"
      class="swiper"
      duration="200"
      :current="activeIndex"
      @change="swiperChange"
    >
      <block v-for="(item,index) in nav" :key="index">
        <swiper-item>
          <scroll-view
            style="height:100%"
            scroll-y="true"
            lower-threshold="50"
            @scrolltolower="onReachBottom"
          >{{item}}</scroll-view>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>


<script>
export default {
  data() {
    return {
      nav: ["待审核", "通过", "拒绝"],
      activeIndex: 0,
      navWidth: 0,
      swiperHeight: 0
    };
  },
  methods: {
    //点击导航栏
    tabClick(e) {
      this.activeIndex = e;
    },
    //swiper切换
    swiperChange(e) {
      this.activeIndex = e.mp.detail.current;
    }
  },
  onLoad() {
    let res = wx.getSystemInfoSync();
    this.navWidth = 750 / res.windowWidth * res.windowWidth / 3;  //此处获取导航栏每一栏的宽度
    this.swiperHeight = 750 / res.windowWidth * res.windowHeight - 100;   //此处获取除导航栏所剩下的swiper高度

  }
};
</script>



<style lang="less">
.nav {
  height: 100rpx;
  display: flex;
  // border: 1px solid black;
  position: relative;
  box-sizing: border-box;
  .nav_item {
    flex: 1;
    height: 100%;
    line-height: 100rpx;
    text-align: center;
  }
  .active_item {
    color: red;
  }
  .line {
    position: absolute;
    height: 6rpx;
    bottom: 0;
    background-color: red;
    transition: all 0.2s linear;
  }
}
.swiper {
}
</style>