小程序使用van-tabs sticky吸顶失效问题
使用注意点：
（1）需要在组件下``
（2）需要注意布局问题，定位在页面中，是相对整个页面。
<scroll-view scroll-y="true" id="scroller" bind:scroll="onScroll" class="contains">
<view class="top_nav" style="height: {{customBar}}px;padding-top: {{menu.top}}px;">
<text class="nav-back cuIcon-back text-white" bindtap="goback">text>
<text class="nav_name">我的名片text>
view>
<view class="card" bindtap="goMyCard">
<image src="../../../images/my/card_bg.png" class="card_bg" mode="widthFix">image>
<view class="card_all">
<view class="card_top">
<view class="card_top_left">
<view class="name">
<text class="text1">猪猪侠text>
<text class="text2">|text>
<text class="text3">产品经理text>
view>
<view class="company">
<text class="company_name">傻乎乎有限公司text>
<view class="vip">
<image src="../../../images/my/diamond2.png" class="vip_image" mode="widthFix">image>
<text class="vip_sector">VIP3text>
view>
view>
view>
<view class="tailor_avator">
<image src="../../../images/my/my_logo.png" class="card_top_right" mode="widthFix">image>
view>
view>
<view class="card_bottom">
<view class="link_way">
<view class="phone">
<image src="../../../images/my/phone.png" mode="widthFix">image>
<text>13422102512text>
view>
<view class="email">
<image src="../../../images/my/email.png" mode="widthFix">image>
<text>[email protected]text>
view>
view>
<view class="send_card">
<button class="send_btn">递名片button>
view>
view>
view>
view>
<view class="down_half">
<van-tabs z-index="4" sticky="{{true}}" offset-top="{{menu.top}}" scroll-top="{{scrollTop}}" animated tab-active-class="scroll_top_item_active_blue " class="van-tabs__line" line-width="0" line-height="0">
<van-tab title="职位">
<van-ticky offset-top="{{ customBar+50}}" scroll-top="{{scrollTop}}" z-index="9" class="card_contain">
<view class="job">
职位1
view>
<view class="job">
职位2
view>
<view class="job">
职位3
view>
<view class="job">
职位4
view>
<view class="job">
职位5
view>
<view class="job">
职位
view>
<view class="job">
职位6
view>
<view class="job">
职位7
view>
<view class="job">
职位8
view>
<view class="job">
职位9
view>
<view class="job">
职位10
view>
<view class="job">
职位11
view>
van-ticky>
van-tab>
<van-tab title="服务">
<van-ticky offset-top="{{ customBar+50}}" scroll-top="{{scrollTop}}" z-index="9" class="card_contain">
van-ticky>
van-tab>
<van-tab title="动态">
<van-ticky offset-top="{{ customBar+50}}" scroll-top="{{scrollTop}}" z-index="9" class="card_contain">
van-ticky>
van-tab>
van-tabs>
view>
<block wx:if="{{flag==true}}">
<view class="bottom-content">
<button class="btn1">编辑<isAuthor bind:flagEvent="goEditResume">isAuthor>button>
<button class="btn2" open-type="share">递名片<isAuthor bind:flagEvent="onShareAppMessage">isAuthor>button>
view>
block>
<block wx:elif="{{hrId||otherId != 0}}">
<view class="bottom-content">
<block wx:if="{{isFollow||isFollow==null}}"> <button class="btn1" bindtap="beFan">关注button>block>
<block wx:else><button class="btn1" disabled bindtap="cancelFan">已关注button>block>
<button class="btn2">直聊<isAuthor bind:flagEvent="chat">isAuthor>button>
view>
block>
scroll-view>
/* subPackages/personal/myCard/page.wxss */
page {
--bgColor: #0057FF;
--blueIcon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAARCAYAAABegLWFAAAAAXNSR0IArs4c6QAAAnBJREFUSEvNlr9rE1EcwD/fu6RtSIxWXNRBiUYrilMFR3HrIiociiLUxal711IH/Q9cHIpgNZ4gThYREQcH0a2Dol1aBLVowQqpJrmvvLtccl7u8gNb8GW49+P7vt/P98d7L8J/3IRTmuEQksi4hwYz4m0Zv6M2o1isNe2Por4tMz5KXZjQYQpkEwF+UuOJ/NoyuCuaZyMlMFAVHM2RoZgIkEFZ4TsvpL7pgAasTiFV72FWDZxNlhI1LCwUD/G/YfOoAcu40tg0QAP2m70tW1Gbpg9VXFkOau2Slqmxy+9Hwcw4FM7zjjnZ+GdAR3diU0aRLnAfcWU1gDuj28hx2t+Q1iw/tovMswzSjmy/tNc0yzpHaFDC8sGSdVisc5/nxkYb5oKeAMZ72DLyn/F4g8tKX5CODmH598E4Sg78AMTBgjnzs3nEPfliONpwpvZsJvEoNdPb9s54GqQ4UBp4/g1YRFkCPuFKteXYZS3isZ8GZeAYMNRai0ats7/AA3kZyv6dxiC90wj7fC8E8b/xFp0P+0INjyrCCMJwa1+ajs4UPaMid6LTnTXm6HYsbgBjkciGgKG8GYfpiX6N7nAtrUKi66Heh1S4FS+T5ANgLuYis8D5poUkuH6PQmfc2zVnTv91KuImKUs/nUb6op5DuQnsjm3udlqTCj6eLbP/NR5TuPI+zcvucGaXowVsplGmoPWSdEtdHC4ua2BmqVDpddp7w4VundUdjHAVZRI4PmBOzfP3FOE2Yzzu989E/3BRGkcPYjEBnGxeFQeAfEtE+YrFEspblFdkWGBe1gZ0qMuLMKimGbX4QIG78mPQrWnyfwCtNsxrm6IDQwAAAABJRU5ErkJggg==);
background: var(--bgColor);
}
.top_nav {
font-size: 41rpx;
color: #ffffff;
font-weight: bold;
margin-left: 28rpx;
}
.nav_name {
margin-left: 19rpx;
}
/* 名片 start */
.card {
position: absolute;
height: 362rpx;
width: 683rpx;
left: 31rpx;
right: 21rpx;
margin-top: 15rpx;
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
z-index: 4;
}
.card_all {
height: 362rpx;
width: 683rpx;
padding: 61rpx 35rpx;
}
.card_bg {
height: 362rpx;
width: 683rpx;
position: absolute;
z-index: -1;
}
.card_top {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
}
.name {
margin-bottom: 23rpx;
}
.name .text1 {
font-size: 36rpx;
color: #ffffff;
font-weight: 800;
}
.text2,
.text3 {
font-size: 26rpx;
color: #ffffff;
font-weight: 500;
}
.text2 {
margin: 0 22rpx;
}
.company {
display: flex;
}
.company_name {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
margin-right: 13rpx;
}
.vip {
position: relative;
top: -5rpx;
width: 80rpx;
height: 27rpx;
padding: 6rpx 0;
}
.vip_image {
position: absolute;
height: 27rpx;
top: 10rpx;
}
.vip_sector {
position: relative;
left: 30rpx;
font-size: 19rpx;
color: #8D5A0B;
font-style: italic;
}
.tailor_avator {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
}
.card_top_right {
width: 120rpx;
height: 120rpx;
}
.card_bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.phone,
.email {
display: flex;
align-items: center;
color: #ffffff;
}
.phone {
padding-bottom: 29rpx;
}
.phone image,
.email image {
width: 31rpx;
}
.send_card {
width: 143rpx;
height: 57rpx;
}
.send_btn {
width: 143rpx;
height: 57rpx;
background: #FFFFFF;
border-radius: 28rpx;
line-height: 53rpx;
font-size: 28rpx;
font-weight: 400;
color: #035EE3;
}
/* 名片 end */
/* 下半部分 start */
.down_half {
position: absolute;
width: 750rpx;
height: 200vh;
background: #F7F7F7;
border-radius: 14rpx;
margin-top: 160rpx;
padding-top: 281rpx;
}
.contains {
position: absolute;
overflow-y: scroll;
top: 0rpx;
z-index: 10;
width: 100%;
height: 100%;
}
.contain {
position: relative;
top: 0;
width: 100%;
height: 100%;
}
.card_contain {
position: relative;
top: 0;
width: 100%;
height: 100%;
}
.job {
padding: 50rpx;
background: #ffffff;
margin: 31rpx;
}
.van-tabs__scroll {
background-color: #F7F7F7 !important;
background-color: var(--tabs-nav-background-color, #F7F7F7);
padding-right: 355rpx;
}
.van-tabs__nav,
.van-tabs__scroll--line {
background-color: #F7F7F7;
}
.scroll_top_item_active_blue::after {
content: '';
display: block;
width: 38rpx;
height: 16rpx;
position: relative;
bottom: 28rpx;
background: var(--blueIcon);
background-size: 38rpx 16rpx;
left: 50%;
transform: translateX(-50%);
}
/* 下半部分 end */
/* 底部固定内容 start*/
.bottom-content {
position: fixed;
bottom: 0;
width: 749rpx;
height: 154rpx;
background: #FFFFFF;
box-shadow: 1rpx 3rpx 16rpx 1rpx rgba(47, 64, 169, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 29rpx;
}
.btn1 {
width: 211rpx;
height: 76rpx;
background: #E5EEFF;
border-radius: 38rpx;
font-size: 29rpx;
line-height: 76rpx;
color: #0057FF;
}
.btn2 {
width: 454rpx;
height: 76rpx;
background: #0057FF;
border-radius: 38rpx;
font-size: 29rpx;
line-height: 76rpx;
color: #ffffff;
}
/* 底部固定内容 end*/
// subPackages/personal/myCard/page.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
customBar: app.globalData.CustomBar,
menu: app.globalData.info,
scrollTop: 0,
},
/**监听滚动定位 */
onScroll(event) {
wx.createSelectorQuery()
.select('#scroller')
.boundingClientRect((res) => {
this.setData({
scrollTop: event.detail.scrollTop,
});
console.log(event.detail.scrollTop);
})
.exec();
},
onList(e) {
console.log(e);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
需求：当使用vant-tabs时，有可能最右边需要一个固定展开图标；
(拉到底，标签被盖住）
一开始是设置最后一个van-tab是无效的不可点击的，但是title不加内容就不起效果，且只适配安卓端，ios滑动到最后会超出列表，导致看到“触底”字眼，对于用户来说看到这个一脸懵逼。
<block wx:if="{{certList.length==(index+1)&&certList.length>1}}">
<van-tab disabled title="触底"></van-tab>
</block>
最后解决方案是重写van-tabs__scroll，van-tabs__wrap样式
.van-tabs__scroll {
padding-right: 100rpx !important;
}
.van-tabs__wrap {
padding-right: 100rpx !important;
}
（拉到底，标签没被遮住）