微信小程序学习- 选项卡切换

最新推荐文章于 2024-07-09 22:57:28 发布

月弯是美

最新推荐文章于 2024-07-09 22:57:28 发布

阅读量218

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/xiyao217/article/details/90635004

版权

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

0 篇文章 0 订阅

订阅专栏

index.html

<view class="navbar">
  <text wx:for="{{navbar}}" wx:key="unique" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" bindtap="navbarTap">{{item}}</text>
</view>
 
<view hidden="{{currentTab!==0}}"> 111 </view>
<view hidden="{{currentTab!==1}}"> 222 </view>
<view hidden="{{currentTab!==2}}"> 333 </view>

index.js

var app = getApp()
Page({
  data: {
    navbar: ['111', '222', '333'],
    currentTab: 0
  },
  navbarTap: function (e) {
    this.setData({ 
      currentTab: e.currentTarget.dataset.idx
    })
  } 
})

index.css

page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.navbar{
  flex: none;
  display: flex;
  background: #fff;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
}
.active{
  color: red;
}