小程序使用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;
}

在这里插入图片描述
(拉到底,标签没被遮住)

你可能感兴趣的:(小程序,小程序,javascript,微信小程序)