小程序的TAB切换

page页面

<view>
  <view class='nav'>
    <view class='navOne' data-current="0" bindtap="swichNav"><view class='{{navData.navIndex == 0?navData.selectedClass:""}}'>横版</view></view>
    <view class='shu-Line'></view>
    <view class='navTwo' data-current="1" bindtap="swichNav"><view class='{{navData.navIndex == 1?navData.selectedClass:""}}'>竖版</view></view>
  </view>
  
  <swiper current='{{navData.navIndex}}' bindchange="switchTab">
    <block>
      <swiper-item>
        1
      </swiper-item>
    </block>
    <block>
      <swiper-item>
        2
      </swiper-item>
    </block>
  </swiper>
</view>

wxss

.nav{
  background-color: #1c1f28;
  color: #9f9ea3;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}
.navOne,.navTwo{
  width: 49.5%;
  text-align: center;
}
.navOne view,.navTwo view{
  display: inline-block;
  height: 74rpx;
  width: 80rpx;
  
}
.navSelected{
  color: #e9d0a8;
  border-bottom: 4rpx solid #e9d0a8;
}
.shu-Line{
  width: 2rpx;
  background-color: #e9d0a8;
  height: 40rpx;
  position: relative;
  top: 24rpx;
}

js

// pages/cardModel/cardModel.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navData:{
      navIndex: 0,
      selectedClass:'navSelected',
    }
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(this.data)
  },
  // 点击导航
  swichNav(e){
    let index = e.currentTarget.dataset.current
    let navIndex = 'navData.navIndex'
    this.setData({
      [navIndex]: index
    })
  },
  // 滑动滑块
  switchTab(e){
    let index = e.detail.current
    let navIndex = 'navData.navIndex'
    this.setData({
      [navIndex]: index
    })
    console.log(e.detail.current);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})