微信小程序之选项卡 窗口顶部TabBar页面切换

微信小程序之选项卡 窗口顶部TabBar页面切换

最近在做小程序相关的开发，用到了类似某宝类似的滑动tabBar实现页面的切换，在网上看到的大多资料鱼龙混杂、模糊不清、有的还不能高度自适应，所以自己实现了一下；
好了：上图

没什么好说的都是对一些基本的组件的应用直接上代码：
1.wxml

<view class='container'>
  <view class='orderlength' >
    <view class='protab swiper-tab'>
    //可以根据自己的需求添加
      <view class="swiper-tab-item {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">销售中view>
      <view class="swiper-tab-item {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">审核中view>
      <view class="swiper-tab-item {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">已下架view>

    view>
    <view class='order-itembox'>
      <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
        <swiper-item>
          <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
             <view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" id='{{item.id}}'> 
            第一个页面的数据
           view> 
          scroll-view>
        swiper-item>
        <swiper-item>
          <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" wx:if="{{item.status==0}}">
              第二个页面的数据
            view>
          scroll-view>
        swiper-item>
        <swiper-item>
          <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
            <view class='order-item' wx:for="{{order}}" wx:for-item="item" wx:key="index" wx:if="{{item.status==1}}">
              第三个页面的数据
            view>
          scroll-view>
        swiper-item>
      swiper>
      view>
    view>

2.wxss

.swiper-box {
  width: 100%;
}
.orderlength{width:100%}
.order-itembox {
  width: 100%;
}

.swiper-tab {
  width: 100%;
  display: -webkit-flex;
  display: flex;

  background: #fff;
}

.swiper-tab .swiper-tab-item {
  -webkit-box-flex: 1;
  flex: 1;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
   position:relative;
}

.swiper-tab  .active {
  color: red;

}
.swiper-tab  .active::after{
  display:block;
  content:'';
  width:100%;
  height:6rpx;
  background:red;
  position:absolute;
  bottom:0;
}

3.js

Page({
  onLoad() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          clientHeight: res.windowHeight
        });
      }
    })
  },
  data: {
    winWidth: 0,
    winHeight: 0,
    // tab切换
    currentTab: 0,
    order: [],
    orderlist: {},
  },
  bindChange: function(e) {
    console.log("滑动切换会触发的事件")
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  swichNav: function(e) {
    console.log("点击上方选项卡触发的事件")
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})

OK,到此结束，如有不足之处，评论讨论哦、、、、、