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

已于 2022-08-16 15:39:31 修改
阅读量4.4k 收藏 2
点赞数 4
分类专栏： 小程序 文章标签： 小程序 javascript 微信小程序
于 2022-01-10 16:02:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43583887/article/details/122412751
版权

使用注意点：
（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;
}

在这里插入图片描述
（拉到底，标签没被遮住）

00008795
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSDN最全面的微信小程序源码和模板
03-08
从事微信小程序开发也有差不多半年的时间了，本人深知对于从来都没有接触过微信小程序开发的人刚开始是多么的迷茫，无助。其实我刚开始也是这样，然而进过一段时间的开发，学习，我知道了其实网上有很多人进行分享过，可以参照他们的进行开发学习，这样不仅仅可以达到事倍功半的效果。这是我自己在网上收集，和一些自己做的一些小程序，想分享出来帮助大家更好的学习开发，其中包括了一些比较完善的小程序开源框架，还有几套比较完善的微信小程序商城模板，和源码只需自己把接口替换成自己的即可，希望能够帮到大家。
docsify,docsify-tabs 展示插件
09-21
docsify,docsify-tabs
解决小程序wx.openLocation位置偏移的问题
Debug的博客
07-03 1192
【代码】解决小程序wx.openLocation位置偏移的问题。
uni-app 小程序 sticky 固定定位失效
最新发布
weixin_43743378的博客
03-28 655
后续使用sticky定位设置相对位置时，还是应该优先设置top，这样可以避免出现这种莫名的问题。
微信小程序图表插件 echarts-for-weixin
有勇气的牛排博客
07-28 2159
有勇气的牛排 官网 https://lgch.xyz/ http://920z.net/ 微信小程序总结大全 下载地址 https://github.com/ecomfe/echarts-for-weixin/tree/master/pages 使用 index.wxml <view class="container"> <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-c
微信小程序实现音乐播放器（2）
richest_qi的博客
07-21 1万+
是全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。从微信客户端6.7.2版本开始，如果需要小程序切后台后继续播放音频，需要在全局配置文件app.json。属性，如"requiredBackgroundModes"["audio"]实例，可以通过wx.getBackgroundAudioManager()中配置requiredBackgroundModes。............
小程序源码 音乐播放器videoplayer.rar
03-20
免责声明：资料部分来源于合法的互联网渠道收集和整理，部分自己学习积累成果，供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方，资料版权归原作者或出版方所有，本人不对所涉及的版权问题或内容负法律责任。如有侵权，请举报或通知本人删除。
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看...坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
微信小程序 tabs选项卡效果的实现
11-29
微信小程序 tabs选项卡效果 前言： 最近微信应用号是炒的如火如荼，热门满满，但是也可以发现搜索关键词出来，各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮，这几天先把小程序技术文档看了个遍，就...
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
微信小程序自定义组件实现tabs选项卡功能
12-02
本文为大家分享了微信小程序实现tabs选项卡功能的具体代码，供大家参考，具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 ...
echarts-for-weixin.rar
06-20
提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求
we-cropper 一款灵活小巧的canvas图片裁剪器
06-11
Usage 克隆至本地处理 git clone https://github.com/we-plugin/we-cropper.git npm方式引入 npm install we-cropper --save
ec-canvas.zip
02-24
微信小程序echarts
小程序页面动态配置实现方法
11-30
小程序可以根据管理后台配置动态更新展示内容，如实现下面新鲜事栏目图片的来源的可配置，点击跳转url的可配置。 实现方案 1后端创建一个map结构的数据表，表结构如下： 2 管理后台根据不同业务设定不同的key和value，更新数据库 如key：ad1url value：a.png 如果需要更新页面图片，只需更新ad1url对应的value 3 小程序根据对应业务key获取对应的配置项，更新页面显示 技术栈 后端接口服务：SpringBoot Mybatis MySql 管理后台：vue 前端：小程序 代码实现 后端接口 为了保证key的唯一性，key在数据库设置为unique属性，新增和更
微信小程序开发———音乐播放器
qq_50582468的博客
10-27 3万+
目录 一 小程序主体功能介绍 二 常用组件和API介绍 音频API 常用组件 三 整体布局 数据定义 主体页面 运行效果 四 播放器页面 布局部分 样式部分 运行效果 五 播放列表页面 布局部分 样式部分 运行效果 全部功能实现代码index.js 一 小程序主体功能介绍 本小程序主要实现，音乐的播放、暂停，下一曲的切换，以及播放列表和当前播放歌曲的详细信息查看等。 二 常用组件和API介绍 音频API 介绍 创建音频时需要先创建一个对象实例，从而引用该
echarts-for-weixin组件学习使用与踩坑记录
xzsfg6825的博客
05-22 460
1、echarts-for-weixin组件 遇到的坑：直接粘贴使用官方的代码教程，无法实现一次性渲染出图表，需要第二次进入才能渲染出图 错误代码： var id = []; var name = []; test: function () { var that = this; wx.request({ url: 'https://www.xxx.com/xxx/xxx', data: {}, header: { 'content-type
[微信小程序]搜索功能实现,搜索框样式
热门推荐
a_靖的博客
11-28 13万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view cla...
php脚本连接mysql，微信小程序连接数据库。
qq_47799731的博客
04-29 1064
最近我在做一个微信小程序，其中有一个页面，页面里面需要连接我的后台数据库，把用户数据传递到我的MySQL数据库中。最初，我在网上找了很多东西，发现并没有一个特别详细明确的教程，其中大多数都只是把他的代码给出来。该函数需要使用一个微信小程序的一个api接口：wx.request。这里我使用的是宝塔面板帮助我搭建的网站。其中的data是用来传递参数的，后台的PHP脚本会有$_GET变量来获取传递的参数。下面是这个界面的实现的代码senddata.ts。后台脚本写好之后便可以实现和后台数据库的连接。
van-tabs开启sticky无效
07-25
根据提供的引用内容，可以看出在原代码中，van-tabs组件的sticky属性被设置为true，但是在现代码中，offset-top属性被添加到van-tabs组件中。这可能是导致sticky无效的原因。offset-top属性用于设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。因此，可能需要调整offset-top属性的值来确保sticky效果生效。 #### 引用[.reference_title] - *1* [vant tabs sticky模式下的bug](https://blog.csdn.net/sdaulee/article/details/124105480)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [关于vant van-tabs sticky属性不起作用](https://blog.csdn.net/SongSL0812/article/details/109749331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值