小程序顶部tap顶部导航切换,方法一

这是第一种方法,适用于切换的页面展示效果不同时可用

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}}">
  <view class="order">
000
  </view>

</view>
 
<!---->
<view hidden="{{currentTab!=1}}">
<view class="order">
111
  </view>
</view>
 
<!---->
<view hidden="{{currentTab!=2}}">
  <view class="order">
222
  </view>
</view>
<!---->
<view hidden="{{currentTab!=3}}">
<view class="order">
333
  </view>
</view>

<view hidden="{{currentTab!=4}}">
 <view class="order">
<view class="order-foot">
444
</view>
  </view>
</view>

js:

Page({
 data: {
    navbar: ['未使用', '已使用'],
    currentTab: 0,
    idx: '',
  },
  navbarTap: function (e) {
    let idx= e.currentTarget.dataset.idx;
   console.log("idx:"+idx);
   this.setData({
     currentTab: idx,
     idx:idx
   })
   console.log("idx22:"+this.data.idx);
 },
  onLoad: function (options) {
    console.log("optionsid:"+options.id);
    this.setData({
      idx:options.id,
      currentTab: options.id,
    })
    console.log(this.data.idx+".."+this.data.currentTab);
  },
})

wxss:

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

}
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  width: 87rpx;
  margin-left: 36rpx;
  background: #FF5A60;
}