微信小程序选项卡的实现方法_微信小程序首页如何做四个选项-优快云博客

本文链接：https://blog.youkuaiyun.com/document_write/article/details/99119891

本文详细介绍了如何在微信小程序中实现选项卡功能，包括wxml结构设计、wxss样式设置以及js交互逻辑的编写，帮助开发者创建用户友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 wxml

<view class="content">
   <view class="menu">
       <text   class='menuTitle {{ind=="0"?"borders":""}}' data-index="0" catchtap="title">第一项</text>
       <text   class='menuTitle {{ind=="1"?"borders":""}}' data-index="1" catchtap="title">第二项</text>
       <text   class='menuTitle {{ind=="2"?"borders":""}}' data-index="2" catchtap="title">第三项</text>
       <text   class='menuTitle {{ind=="3"?"borders":""}}' data-index="3" catchtap="title">第四项</text>
   </view>
   <view  class="details">
       <view class="goods">
           <view class="item"  hidden="{{ind!='0'}}">第一页</view>
           <view class="item"  hidden="{{ind!='1'}}">第二页</view>
           <view class="item"  hidden="{{ind!='2'}}">第三页</view>
           <view class="item"  hidden="{{ind!='3'}}">第四页</view>
       </view>
   </view>
</view>

二wxss


.content{
  width:100%;
}
.menu{
 font-size: 28rpx;
 color: #262626;
 line-height: 80rpx;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: space-around;
 box-shadow: 0 1px 0 0 #f5f5f5;
}
.menuTitle{
 border-bottom: 3px solid transparent;
 color:#262626;
}
.goods{
  width:100%;
  height:300rpx;
  overflow: hidden;
}
.item{
  width:100%;
  height:300rpx;
}
.borders{
 border-bottom: 4rpx solid #f00;
 color:#f00;
}

三js


Page({
  data: {
    ind:0
  },
  title:function(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      ind: index
    });
  }
})