目录
激活条颜色
自定义右侧内容
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)}}"文章来源:https://www.toymoban.com/news/detail-426477.html
<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页中按钮固定在页面底部
文章来源地址https://www.toymoban.com/news/detail-426477.html
<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
})
},
到了这里,关于【Vant Weapp】van-tab 标签页的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!