chunk-vendors.js:16043 Uncaught TypeError: Cannot read properties of null (reading ‘bottom‘)

本文讲述了在使用u-sticky吸顶组件与底部导航栏tabbar时遇到的冲突,由于组件未在页面切换时正确销毁监听,导致报错。解决方法是通过控制enable属性开启或关闭吸顶功能,并提供相关代码示例。
摘要由CSDN通过智能技术生成

原因:

吸顶组件u-sticky和底部导航栏tabbar在点击切换页面时产生冲突,

sticky组件创建了Observer监听,切换页面,并且页面没有销毁时,导致组件仍然保持监听,所以出现Cannot read properties of null (reading 'bottom')报错。

利用是否开启吸顶功能

参数说明类型默认值可选值
offset-top吸顶时与顶部的距离,单位rpxString | Number0-
index自定义标识,用于区分是哪一个组件String | Number--
enable是否开启吸顶功能Booleantruefalse
bg-color组件背景颜色String#ffffff-
z-index吸顶时的z-indexString | Number970-
h5-nav-height导航栏高度,自定义导航栏时(无导航栏时需设置为0),需要传入此值,单位pxString | Number44-

解决方法

<template>
    <view>
        <u-sticky :enable="enable">
        </u-sticky>
    </view>
</template>
<script>
export default {
    data() {
        return {
			enable: true
        }
    }
    // 打开吸顶
    onShow() {
        this.enable= true
    },
    //关闭吸顶
    onHide() {
        this.enable= false
    }
}
</script>

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值