用mpvue写微信小程序tab栏切换

最新推荐文章于 2024-07-09 20:40:58 发布

爱吃栗子的小单

最新推荐文章于 2024-07-09 20:40:58 发布

阅读量3.1k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序 tab栏 mpvue

本文链接：https://blog.csdn.net/weixin_40820061/article/details/86494451

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果如下图：
在这里插入图片描述

index.vue

<div class="test">
      <div class="testNav">
        <div
          :class="{'selected':tab === 1,'testTitle':true}"
          @click="changTab(1)"
        >人气</div>
        <div
          :class="{'selected':tab === 2,'testTitle':true}"
          @click="changTab(2)"
        >销量</div>
        <div
          :class="{'selected':tab === 3,'testTitle':true}"
          @click="changTab(3)"
        >综合</div>
      </div>
      <div class="container">
        <div v-if="tab===1">1</div>
        <div v-else-if="tab===2">2</div>
        <div v-else>3</div>
      </div>
    </div>

js

export default {
  data() {
    return {
      tab: 1
    };
  },
  methods: {
    changTab(index) {
      this.tab = index;
    }
  }
}

样式

.test {
    width: 100%;
    .testNav {
        padding: 0 20rpx;
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        .testTitle {
            flex: 1;
            text-align: center;
        }
        .selected {
            color: #87caee;
            border-bottom: 1px solid #87caee;
        }
    }
    .container {}
}