微信小程序之选项卡 窗口顶部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,到此结束,如有不足之处,评论讨论哦、、、、、

发布了75 篇原创文章 · 获赞 36 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览