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

已于 2022-08-16 15:39:31 修改
阅读量5k 收藏 3
点赞数 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;
}

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

小程序van-tabs组件运用以及小程序vant tab组件解决文字过多显示不全的问题
HuLuWa1997的博客
10-09 8154
代码如下： <view class="con"> <van-tabs swipeable animated tab-class="tab-box" title-active-color="#A6894E" color="#DFBF7D"> <van-tab title="{{item.tabsName}}" wx:for="{{fatherList}}" wx:key="index" wx:for-index="index" class="tab"> &l
小程序+vant之使用tabs底部条位置错误
weixin_41700532的博客
03-22 2674
vants底部条错位
微信小程序使用 ==== 粘性布局
每天都要努力学习哦~~
09-14 1892
单词sticky的中文意思是“粘性的”，表现也符合这个粘性的表现。基本上，可以看出是和的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。例如，可以滚动下面这个框框感受下交互表现：其中导航元素设置了如下CSS：nav {top: 0;于是，正如大家看到，随着页面的滚动，当导航距离上边缘0距离的时候，黏在了上边缘，表现如同。
vant tabs sticky模式下的bug
sdaulee的博客
04-11 3252
vant tabs sticky模式下，本来应该在滑动一段距离后才吸顶，结果页面加载完成就吸顶了。 解决方式:给sticky属性增加一个控制变量，当页面滑动时，变量置为true。 实施： 1、给tabs外层增加一个父级用于滚动监听，css设置： height: calc(100vh - 54px); overflow: hidden scroll; 2、添加监听： methods中增加滚动处理函数 handleScroll() { let top = document.q...
van-tabs设置activeName不生效
weixin_48605889的博客
09-20 291
van-tabs请求接口后设置activeName不生效，记录日常开发遇到的小问题
微信小程序生成二维码
10-22
微信小程序生成二维码，完整的二维码生成案例，可以快速应用，生成所需二维码。
小程序基本命令
aiven1637的博客
10-30 3340
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
webSocket用法
weixin_34144450的博客
08-15 173
在做项目的时候，需要后台向前端推送消息的功能。在这个项目中我使用的是webSocket这个新的浏览器API.webSocket的目标是在一个单独的持久连接上提供全双工，双向通信。Web Sockets 使用了自定义的协议，所以 URL 模式也略有不同。未加密的连接不再是 http://， 而是 ws://;加密的连接也不是 https:/...
微信小程序链接mysql数据库
weixin_35752645的博客
01-12 773
微信小程序可以通过调用后端 API 来链接 MySql 数据库。在小程序端使用 wx.request 或 wx.cloud.callFunction 等 API 发起请求，在后端使用 Node.js 和一个数据库连接库(如mysql2)来操作数据库。 ...
微信小程序抽奖-翻牌
weixin_34130389的博客
08-30 1554
背景 ps：本次开发基于wepy框架 由于最近接到一个需求--抽奖活动； 翻牌打乱活动抽奖活动，大概需求是这样的，九宫格卡牌，先正面展示所有奖品，然后卡牌翻转，打乱排序，点击卡牌，然后抽奖。 这个需求本身其实不难，主要是分为三步； 展示所有卡牌，然后翻转。 打乱所有卡牌 点击其中一张卡牌，抽奖 第一步：卡牌翻转 我们先在dom中渲染9个卡牌。 <view class="card-modu...
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看...坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
vant 标签栏+上拉加载+下拉刷新demo van-tabs+van-pull-refresh+van-list demo
weixin_45753961的博客
06-09 1580
页面结构 van-tabs在最上面 van-pull-refresh在van-tabs下面 van-list在van-pull-refresh里面css关键 给van-pull-refresh设置高度为calc(100% - 44px)， 其中44px是van-tabs的高度， 同时给van-pull-refresh设置 overflow: hidden; overflow-y: scroll; 这样就能滚动起来加载更多以下是正文...
记一次踩雷经历：Vue引入vant /van-tabs组件后不显示/van-tabs和子路由的封装后Failed to resolve directive: keep-scroll-position
明日复明日的博客
05-05 8255
核心错误应该是[Vue warn]: Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based compone...
干货！微信小程序通过NodeJs连接MySQL数据库
前端，算法，MATLAB，统计学爱好者，目前主攻Web全栈+考研内容
04-17 5051
在前后端+数据库架构的思维中，微信小程序的生态地位是充当前端，后端和数据库还需开发者另外准备。微信开放社区提供强悍的云函数、云数据库、CMS内容管理，无疑为开发小程序的功能提供了不少便捷。当我们在开发PC端的系统时，常见的SSM框架或者SpringBoot混合Vue，使用的数据库多为MySQL，这时如果我们想开发一套多端同步的系统，使用云开发会导致数据无法同步到PC端。因此一个解决方案是：微信小程序也使用MySQL作为数据库。
微信小程序开发之连接本地MYSQL数据库
热门推荐
MamatjanPC的博客
05-04 3万+
微信小程序开发时通过搭建本地服务器，连接本地数据库。
微信小程序使用Echarts
weixin_38999134的博客
05-07 546
下载 下载echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin 拷贝文件 ec-canvas目录 放在小程序项目目录中 在页面开启使用echarts { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 引入 import * as ...
微信小程序中使用echarts
ColdCoder的博客
09-16 2万+
体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo： 下载 为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载gitHub项目。 其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。 ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版
微信小程序 van-tabs 赋值active失效
最新发布
09-21
微信小程序中的`van-tabs`组件是一个用于展示选项卡内容的控件，当你尝试动态赋值给`active`属性来切换当前选中的标签页时，可能会遇到失效的问题。这通常是因为`van-tabs`组件有自己的生命周期管理和状态管理机制，直接修改`active`属性可能不会立即生效，特别是如果你是在数据变更后再设置的话。 正确的做法通常是通过`wx.setStorageSync`或者`this.setData`等方法来改变对应的选项卡索引，并配合`bindtabs-change`事件监听器，当选项卡内容需要切换时，更新数据并触发视图的渲染。例如： ```javascript Page({ data: { activeIndex: 0, }, onTap(e) { const newIndex = e.detail.index; this.setData({ activeIndex: newIndex }); wx.setStorageSync('activeTabIndex', newIndex); // 或者 this.setData }, onReady() { let currentActiveIndex = wx.getStorageSync('activeTabIndex') || this.data.activeIndex; this.setData({ activeIndex: currentActiveIndex }); }, bindTabsChange(e) { this.onTap(e); } }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值