web的标签（【Vant Weapp】van-tab 标签页）

目录

激活条颜色

自定义右侧内容

tab切换列表回到顶部

使用sticky粘性布局导致遮挡

tab标题角标为0不展示

tab页中按钮固定在页面底部

激活条颜色

.van-tabs__line { background-color: #3552E3 !important; }

自定义右侧内容

<van-tabs active="{{ active }}" swipeable bind:click=handleTab ellipsis="{{false}}"> <!-- 右侧筛选 --> <view class="filter" slot="nav-right" bindtap="onOpenChange"> <image class="img" src="@/assets/images/filter.png" mode="aspectFit"></image> </view> <van-tab wx:for-items="{{tabs}}" wx:key=id title={{item.day}} name="{{item.id}}"> //...... </van-tab> </van-tabs> .filter { background: #fff; display: flex; align-items: center; } .img { height: 32rpx; width: 32rpx; padding:26rpx 20rpx; } .van-tabs__line { background-color: #4c66da !important; } data:{ tabs: [ { day: 购入, id: 1 }, { day: 销售, id: 2 }, ], activeTab: 1, } handleTab(e) { this.setData({ activeTab: e.detail.name }) this.getList() }, onOpenChange() { // 筛选操作 },

tab切换列表回到顶部

tab页中内容上下滚动后    
    
    
， 再切换tab页签时滚动位置总是同步一致  
    
    
    
。

 期待效果：

解决方法：切换tab后   


     


     


     ，利用wx.pageScrollTo跑到顶部

     


     


     


。 

<van-tabs active="{{ active }}" bind:change="onChange" sticky> <van-tab title="标签 1"><view wx:for="{{50}}" wx:key="item"> {{item}} </view></van-tab> <van-tab title="标签 2"><view wx:for="{{208}}" wx:key="item"> {{item}} </view></van-tab> <van-tab title="标签 3"></van-tab> </van-tabs> data: { active: 1, page: 1, }, onChange: function (e) { // 初始化 let idx = e.detail.index this.setData({ active: idx, page: 1 }) // 回到顶部 wx.pageScrollTo({ duration: 0, scrollTop: 0, }) // 获取数据 this.getList(page); },

使用sticky粘性布局导致遮挡

往上滑动



 




 




 



，标题要浮动上去 




 




 




 。若是滚动到最顶部   

   

   

，没法复原    

     

     

    ，致使遮挡  

   

   

   
。

期待效果：

解决方案：使用 createSelectorQuery 方法获取到dom元素的距离顶部的 top 值




  




  




  


，如果top 值小于等于0  


  


  


，就说明已经固定到顶部了     
     
     
   ，这个时候就可以在列表页添加一个距离顶部的边距

     

     

     

。

<view wx:for="{{arr}}" wx:key="item"> {{item}} </view> <van-tabs id="activetab" active="{{ active }}" bind:change="onChange" sticky > <van-tab title="标签 1"> <view class="{{scrollTop ? scrollTop : }}"> <view wx:for="{{50}}" wx:key="item"> {{item}} </view> </view> </van-tab> <van-tab title="标签 2"></van-tab> </van-tabs> data: { arr:[a,b,c,a,b,c,a,b,c,a,b,c], scrollTop:false }, //监听页面滚动 onPageScroll(event) { let that = this; const query = that.createSelectorQuery(); query.select(#activetab).boundingClientRect(); query.selectViewport().scrollOffset(); query.exec(function(res){ console.log(res[0]) that.setData({ scrollTop: res[0].top <= 0 }) }) }

tab标题角标为0不展示

info="{{arr.length > 0 ? arr.length : Boolean(false)}}"

<van-tabs active="{{ active }}" bind:change="onChange"> <van-tab title="标签 1" info="{{arr.length > 0 ? arr.length : Boolean(false)}}"> <view wx:for="{{arr}}" wx:key="item"> {{item}} </view> </van-tab> <van-tab title="标签 2" info="{{arr2.length > 0 ? arr2.length : Boolean(false)}}">内容 2</van-tab> </van-tabs> data: { active:1, arr:[1,2,3,4,5,6,7], arr2:[] },

tab页中按钮固定在页面底部

<van-tabs active="{{ active }}" sticky bind:change="onChange"> <van-tab title="标签 1" name="1"> <view wx:for="{{50}}" wx:key="item"> {{item}} </view> <!-- 按钮 --> <view class="btn" wx:if="{{active == 1}}">提交</view> </van-tab> <van-tab title="标签 2" name="2">内容 2</van-tab> </van-tabs> .btn { position:fixed; bottom: 0; left:0; height: 80rpx; line-height: 80rpx; width: 100vw; text-align:center; background: red; } data: { active: 1, } onChange(event) { this.setData({ active: event.detail.name }) },