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

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;
}

 

发布了29 篇原创文章 · 获赞 3 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览