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

客官°小女子只卖身不卖艺 2022-03-26 04:18 277阅读 0赞

效果如下图：  
![在这里插入图片描述][20190115155814714.png]

### 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 { }
    }

[20190115155814714.png]: /images/20220326/c676dd9a75a1421f80be9c4d12f46115.png

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 mpvue+ weapp微信小程序

1.检查版本查看node和npm是否安装成功 node -v npm-v ![版本查看][watermark_type_ZmFuZ3p...

心已赠人/ 2024年04月19日 15:27/ 0 赞/ 85 阅读

相关微信小程序——实现tab切换效果

效果图如下：点击那个tab标题就显示对应内容，并高亮显示对应的下划线。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

一时失言乱红尘/ 2023年02月21日 11:43/ 0 赞/ 18 阅读

相关微信小程序之tab切换效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

r囧r小猫/ 2022年12月29日 02:11/ 0 赞/ 177 阅读

相关微信小程序Tap栏切换

> 这里是引用利用swiper的current属性来实现tab栏切换效果图 ![请添加图片描述][e1216556747f433cb513176393dbbc57.g

深藏阁楼爱情的钟/ 2022年09月05日 14:55/ 0 赞/ 238 阅读

相关微信小程序横版日历，tab栏

> 代码地址如下： > [http://www.demodashi.com/demo/14243.html][http_www.demodashi.com_demo_142

痛定思痛。/ 2022年05月09日 15:50/ 0 赞/ 286 阅读

相关微信小程序如何设置底部菜单栏（tab栏）

![70][] tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现

谁践踏了优雅/ 2022年05月08日 09:54/ 0 赞/ 1967 阅读

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

效果如下图： ![在这里插入图片描述][20190115155814714.png] index.vue <div class="test">

客官°小女子只卖身不卖艺/ 2022年03月26日 04:18/ 0 赞/ 278 阅读

相关 mpvue微信小程序系列

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

向右看齐/ 2022年02月27日 08:18/ 0 赞/ 362 阅读

相关 mpvue--开发微信小程序

官方文档：[http://mpvue.com/][http_mpvue.com] 常见问题先去仓库看看：[https://github.com/Meituan-Dianpi

落日映苍穹つ/ 2022年01月22日 11:07/ 0 赞/ 386 阅读

相关微信小程序学习：（六）tab切换及内容切换

微信小程序学习：（六）tab切换及内容切换 github地址： [https://github.com/leoricding/-][https_github.com_le

男娘i/ 2021年11月14日 00:12/ 0 赞/ 667 阅读