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

谁借莪１个温暖的怀抱￠ 2022-02-28 02:04 672阅读 0赞

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

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

没什么好说的都是对一些基本的组件的应用直接上代码：  
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,到此结束，如有不足之处，评论讨论哦、、、、、

[20190324085756498.gif]: /images/20220228/6b09cb058dff44a09128facbf3433e0d.png