【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}}"><van-tab wx:for-items="{{tabs}}" wx:key='id' title='{{item.day}}' name="{{item.id}}">//......

.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><view wx:for="{{50}}" wx:key="item"> {{item}} <view wx:for="{{208}}" wx:key="item"> {{item}} 

data: {active: 1,page: 1,},

 onChange: function (e) {// 初始化let idx = e.detail.indexthis.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}} <van-tabs active="{{ active }}" bind:change="onChange"sticky ><view class="{{scrollTop " /><view wx:for="{{50}}" wx:key="item"> {{item}} 

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 ” />

<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}} <van-tab title="标签 2" info="{{arr2.length > 0 ? arr2.length : Boolean(false)}}">内容 2

data: {active:1,arr:[1,2,3,4,5,6,7],arr2:[]},

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

<van-tabs active="{{ active }}" sticky bind:change="onChange"><view wx:for="{{50}}" wx:key="item"> {{item}} <view class="btn" wx:if="{{active == 1}}">提交 内容 2

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