微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）

最新推荐文章于 2025-06-11 13:11:18 发布

原创

最新推荐文章于 2025-06-11 13:11:18 发布 · 556 阅读

4 ·

CC 4.0 BY-SA版权

需求：顶部导航栏

效果图：

wxml：

<!--导航条-->
<view class="navbar">
  <text wx:for="{
  
  {navbar}}" data-idx="{
  
  {index}}" class="item {
  
  {currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{
  
  {item}}</text>
</view>
 
<!--首页-->
<view hidden="{
  
  {currentTab!==0}}">
  tab_01
</view>
 
<!--搜索-->
<view hidden="{
  
  {currentTab!==1}}">
  tab_02
</view>
 
<!--我-->
<view hidden="{
  
  {currentTab!==2}}">
  tab_03
</view>

wxs