tab切换+滚动顶部吸附效果(开发实例)

<!-- scroll导航栏 -->
      <view class='scrollBox2 fix-news' wx:if="{{fixTop<scrollTop}}">
      <scroll-view scroll-x="true" class="weui-navbar">
        <block wx:for="{{list}}" wx-for-index="idnex">
          <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>
        </block>
      </scroll-view>
     </view>
     <view class='scrollBox static-news'>
      <scroll-view scroll-x="true" class="weui-navbar" >
        <block wx:for="{{list}}" wx-for-index="idnex">
          <view class="swiper-tab-list {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item}}</view>
        </block>
      </scroll-view>
     </view>
    
     <!-- scroll导航栏 -->
Page({
  data: {
  
    list:["视频","问答","音频","文章"],
    currentTab:0,
    fixTop: '',//区域离顶部的高度
   
  },
  //事件处理函
  onShow: function () {
    let self = this;
    wx.createSelectorQuery().select('.static-news').boundingClientRect(function (rect) {
      self.setData({
        fixTop: rect.top,
      })
    }).exec()
  }
 
})
.fix-news{
  position: fixed;
  top:0;
  left: 0;
  z-index: 99999;
}

希望对大家有帮助 认真看一下

猜你喜欢

转载自blog.csdn.net/weixin_42460570/article/details/81186947
今日推荐