微信小程序tab选项卡源码(二)使用于嵌入页面中间非全屏内容、高度自适应、选项卡内容各不相同的场景(

2020-11-06 10:05发布

微信小程序tab选项卡,支持点击切换、左右滑动切换

效果图

tab-02.wxml

<view style="padding:50px;background:#dfdfdf;text-align:center;">
  头部内容
</view>
 
<view class="tab-content">
  <!--头部tab切换部分start-->
  <view class="tab-menu">
    <view class="{{currentTab==0?'tab-menu-select':'default'}}" data-current="0" catchtap="switchNav">
      内容
    </view>
    <view class="{{currentTab==1?'tab-menu-select':'default'}}" data-current="1" catchtap="switchNav">
      直播
    </view>
    <view class="{{currentTab==2?'tab-menu-select':'default'}}" data-current="2" catchtap="switchNav">
      资料
    </view>
    <view class="{{currentTab==3?'tab-menu-select':'default'}}" data-current="3" catchtap="switchNav">
      留言
    </view>
    <view class="{{currentTab==4?'tab-menu-select':'default'}}" data-current="4" catchtap="switchNav">
      总结
    </view>
  </view>
  <swiper current='{{currentTab}}' bindchange="tabChange" class='tab-swiper' style="height:{{swiperHeight}}px">
    <swiper-item>
      <view class="swiper-view-0">
        内容
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-view-1">
        直播
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-view-2">
        资料
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-view-3">
        留言
      </view>
    </swiper-item>
    <swiper-item>
      <view class="swiper-view-4">
        总结
      </view>
    </swiper-item>
  </swiper>
  <!--切换内容部分end-->
</view>
 
<view style="padding:50px;background:#dfdfdf;text-align:center;">
  底部内容
</view>

tab-02.js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0,
    swiperHeight: 200
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setSwiperHeight()
  },
 
  //以下为tab事件
  setSwiperHeight: function () {
    let that = this
 
    // 创建节点选择器
    let query = wx.createSelectorQuery();
    query.select('.swiper-view-' + that.data.currentTab).boundingClientRect((rect) => {
      let rectHeight = rect.height; // 获取高度
      that.setData({
        swiperHeight: rectHeight > 200 ? rectHeight : 200
      })
 
      console.log(JSON.stringify(rect))
    })
    query.exec()
  },
  //tab切换函数,让swiper当前滑块的current的index与tab头部index一一对应
  switchNav: function (e) {
    var index = e.target.dataset.current;
    if (this.data.currentTab == index) {
      return false;
    } else {
      this.setData({
        currentTab: index
      });
    }
 
    this.setSwiperHeight()
  },
  //滑动swiper切换,让swiper当前滑块的current的index与tab头部index一一对应
  tabChange(e) {
    this.setData({
      currentTab: e.detail.current
    })
 
    this.setSwiperHeight()
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

tab-02.wxss

page {
        height: auto;
}
 
/* .tab-swiper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  box-sizing: border-box;
  padding: 92rpx 0rpx 0rpx 0rpx;
  z-index: -1;
}
.tab-swiper swiper-item {
  overflow-y: scroll;
} */
 
.tab-content {
  background-color: #fff;
}
 
.tab-menu {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
  z-index: 11;
}
 
.tab-menu view {
  margin: 0rpx auto;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #434343;
}
 
.tab-menu .tab-menu-select {
  position: relative;
}
 
.tab-menu .tab-menu-select:after {
  position: absolute;
  left: -7rpx;
  bottom: 0rpx;
  content: "";
  width: 70rpx;
  height: 8rpx;
  background-color: rgb(235, 21, 60);
  border-radius: 4px 4px 0 0;
}

 

作者:China_Lzw

链接:https://blog.csdn.net/qq285679784/article/details/102538343

来源:CSDN
著作权归作者所有,转载请联系作者获得授权,切勿私自转载。