【Vant Weapp】van-tab 标签页(vant weapp官方文档)

编辑：rootadmin

【Vant Weapp】van-tab 标签页

激活条颜色

自定义右侧内容

tab切换列表回到顶部

使用sticky粘性布局导致遮挡

tab标题角标为0不展示

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

激活条颜色

推荐整理分享【Vant Weapp】van-tab 标签页(vant weapp官方文档)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vant-uploader,vant官网文档,vant-weapp文档,vant官网,vant mobile,vant-weapp文档,vant-uploader,vant-uploader,内容如对您有帮助，希望把文章链接给更多的朋友！

.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 })},

本文链接地址:https://www.jiuchutong.com/zhishi/297614.html 转载请保留说明！

上一篇：vue3指导教程（附带获取屏幕可视区域宽高）(vue3.0教程)

下一篇：Pytorch深度学习实战3-6：详解网络骨架模块nn.Module(附实例)