原因:
吸顶组件u-sticky和底部导航栏tabbar在点击切换页面时产生冲突,
sticky组件创建了Observer监听,切换页面,并且页面没有销毁时,导致组件仍然保持监听,所以出现Cannot read properties of null (reading 'bottom')报错。
利用是否开启吸顶功能
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| offset-top | 吸顶时与顶部的距离,单位rpx | String | Number | 0 | - |
| index | 自定义标识,用于区分是哪一个组件 | String | Number | - | - |
| enable | 是否开启吸顶功能 | Boolean | true | false |
| bg-color | 组件背景颜色 | String | #ffffff | - |
| z-index | 吸顶时的z-index值 | String | Number | 970 | - |
| h5-nav-height | 导航栏高度,自定义导航栏时(无导航栏时需设置为0),需要传入此值,单位px | String | Number | 44 | - |
解决方法
<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>
本文讲述了在使用u-sticky吸顶组件与底部导航栏tabbar时遇到的冲突,由于组件未在页面切换时正确销毁监听,导致报错。解决方法是通过控制enable属性开启或关闭吸顶功能,并提供相关代码示例。
7万+

被折叠的 条评论
为什么被折叠?



