小程序使用van-tabs sticky吸顶失效问题

使用注意点：
（1）需要在<scroll-view>``</scroll-view>组件下
（2）需要注意布局问题，定位在页面中，是相对整个页面。

<!--subPackages/personal/myCard/page.wxml-->
<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><!-- 名片 start --><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">VIP3</text></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>13422102512</text></view><view class="email"><image src="../../../images/my/email.png" mode="widthFix"></image><text>1342233@qq.com</text></view></view><view class="send_card"><button class="send_btn">递名片</button></view></view></view></view><!-- 名片 end --><!-- 职位/服务/动态 start --><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>
<!-- 职位/服务/动态 end -->

/* 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;
}

（拉到底，标签没被遮住）

小程序使用van-tabs sticky吸顶失效问题相关推荐

微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
微信小程序实现tab切换和吸顶效果
在项目中合理的采用webapp的组件库能够很好的提高我们的开发效率,我们也应该合理的进行运用. 首先我们是对手机的状态栏的代码进行了自定义. 其次就是采用组件库的van-sticky进行吸顶距离计算 ...
html5导航栏悬浮置顶,（微信小程序）导航栏悬浮吸顶以及置顶的设置
前言最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来前景提要吸顶功能页面设置在静态的首页,作为一个首页展 ...
tab吸顶功能实现，css实现沾性吸顶，sticky实现吸顶，解决sticky吸顶失效
吸顶效果 1.结构部分 <view class="tab_box"><view:class="{ active: curIndex === index ...
uniApp sticky 吸顶兼容小程序 h5
使用uView的 sticky 完成在h5端的吸顶效果页面滚动到一定距离后元素吸顶 h5吸顶距离为44px. 但是在小程序时默认的吸顶距离是0px因为我的小程序头部导航栏的高度不固定所以这里需要 ...
如何在小程序内实现界面快速置顶功能？
通过使用触发器中滚动到指定项实现界面快速置顶. 效果展示前置准备使用循环容器制作好的内容列表置顶图标数据表具体步骤 1.创建列表项滚动触发器 2.创建点击置顶触发器步骤分解 1.创建列 ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
微信小程序设置swiper圆角在ios上失效解决
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug.下面是两种解决方案:第一种:-webkit-backface-visibility ...
小程序开发API之改变置顶栏文字内容 wx.setTopBarText（已停，只有旧版微信有效）
效果展示: wx.setTopBarText(Object object) 动态设置置顶栏文字内容.只有当前小程序被置顶时能生效,如果当前小程序没有被置顶,也能调用成功,但是不会立即生效,只有在用户将 ...

小程序使用van-tabs sticky吸顶失效问题

小程序使用van-tabs sticky吸顶失效问题相关推荐

最新文章

热门文章