小程序的tab切换栏

最新推荐文章于 2023-03-16 10:47:38 发布

丶凡人

最新推荐文章于 2023-03-16 10:47:38 发布

阅读量160

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Devil678/article/details/111247082

版权

<!-- tab切换   绑定后台给的数据  类似item.code这个进行绑定-->
<scroll-view scroll-x class='area_all'>
  <view style="display:flex;" class="swiper_tab_list_box">
    <view  class="swiper_tab_list {{currentTab == item.code ? 'on' : ''}}" data-current="{{item.code}}"  wx:for="{{StarAreaList}}" bindtap='swichNav'>
      {{item.name}}
    </view>
  </view>
</scroll-view>

样式写法：

.area_all {
  width: 100%;
  white-space: nowrap;
  padding-left: 10rpx;
  box-sizing: border-box;
  height: 80rpx;
  // padding-right: 20rpx;
}
.swiper_tab_list_box{
  display: flex;
  padding: 0 20rpx;
  flex:1;
}
.swiper_tab_list {
  color: #3E3E3E;
  border: 2rpx solid #e6003e;
  font-size: 24rpx;
  margin-right: 20rpx;
  padding: 6rpx 20rpx;
  background: #f9f9f9;
  text-align: center;
}

如果要吸顶把上面的东西放到这个里面
<view class="{{isScroll==0 ? 'scroll':'swiper_tab'}}">  <view>

.scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #f9f9f9;
  padding-top: 166rpx;
  padding-bottom: 10rpx;
}
.swiper_tab_list_box{
  display: flex;
  padding: 0 20rpx;
  flex:1;
}

在data中定义
isScroll: 1,//是否吸顶
topBoxHeight: 0,  定义


  onPageScroll: function (e) {
    //0 可以滚动 1 不可滚动
    console.log(e);
    
    if (e.scrollTop >= this.data.topBoxHeight) {
      if (this.data.isScroll != 0) {
        this.setData({
          isScroll: 0,
          sing_all_height: "sing_all_height"
        })
      }
    } else {
      if (this.data.isScroll != 1) {
        this.setData({
          isScroll: 1,
          sing_all_height: ""
        })
      }
    }
    if (this.selectComponent("#contorl")) {
      this.selectComponent("#contorl").setPageHeight(e.scrollTop);
    }
  },