Skip to content

关于吸顶Sticky错误 Cannot read property 'bottom' of null #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mentoorliubin opened this issue Jul 13, 2020 · 8 comments
Closed
Labels
bug Something isn't working

Comments

@mentoorliubin
Copy link

吸顶Sticky 在H5端会在console中进行错误提示 Cannot read property 'bottom' of null,直接访问官网的实例也会提示相同错误
image

@tttao7

This comment has been minimized.

@tttao7 tttao7 pinned this issue Aug 1, 2020
@tttao7
Copy link
Collaborator

tttao7 commented Sep 11, 2020

为什么会出现这个问题?

sticky组件创建了Observer监听,当切换页面且页面没有销毁(例如:tabbar页面), sticky组件也没有销毁,自然beforeDestroy没有生效,导致组件仍然保持监听,所以出现Cannot read property 'bottom' of null报错。所以我们需要手动断开监听来解决这个报错,如果这个报错影响到了您。

解决办法

<template>
	<view>
		<!--  @property {Boolean} enable 是否开启吸顶功能(默认true)-->
		<u-sticky :enable="enable">
			<view>
				……
			</view>
		</u-sticky>
	</view>
</template>
<script>
export default {
	data() {
		return {
			enable: true
		}
	},
	// 在对应的show和hide页面生命周期中打开或关闭监听
	onShow() {
		this.enable= true
	},
	onHide() {
		this.enable= false
	}
}
</script>

留在后面

至此,此问题就解决了,本问题仅在部分页面会出现,都是因为生命周期和依赖相关的问题,当然也有其他的处理方式,以后再进行补充,若后期能通过sticky组件去解决这件事情,我会再来更新。咕了一个多星期,终于把这个写了,感谢大家对uView的支持。

@tttao7 tttao7 closed this as completed Sep 12, 2020
@520ph
Copy link

520ph commented Apr 8, 2021

现在有了 onPageShow 和 onPageHide,就可以在组件里面解决了吧
image

@nitmali nitmali unpinned this issue May 11, 2021
@zhaoyunchong
Copy link

uview 1.8.4 我这里今天还是重现了, 但是跟上面的情况还有点不同

就是我有一个组件两个页面都引用到的了,如果一个页面只有一个的话 确实就上面的法子就可以解决了 但问题出现在了 两个页面共有同一个组件,这个组件也用到了吸顶。
从一个页面切换到另一个页面 还是会出现这个问题

@zhaoyunchong
Copy link

uview 1.8.4 我这里今天还是重现了, 但是跟上面的情况还有点不同

就是我有一个组件两个页面都引用到的了,如果一个页面只有一个的话 确实就上面的法子就可以解决了 但问题出现在了 两个页面共有同一个组件,这个组件也用到了吸顶。 从一个页面切换到另一个页面 还是会出现这个问题

我现在的处理法子就是 通过父组件传递参数来控制 是否开启 吸顶操作

@toproplus
Copy link

我的解决方案:
监听滚动条的位置,差不多到预期位置时,开启吸顶,否则关闭,默认关闭
如果有多个吸顶,则设置不同的开关和index,监听不同的位置

   onPageScroll(e) {
		// console.log('滚动位置', e)
		if (e.scrollTop > 100) {
			this.stickyEnable = true;
		} else {
			this.stickyEnable = false;
		}
	}

@Missbox
Copy link

Missbox commented Mar 28, 2023

我的解决方案:
在u-sticky组件内,添加一个deactivated 生命周期。
解释deactivated: keep-alive 组件停用时调用。 (当前组件隐藏。)

deactivated(){
this.disconnectObserver('contentObserver');
},

@laamfun
Copy link

laamfun commented May 25, 2023

我的解决方案: 在u-sticky组件内,添加一个deactivated 生命周期。 解释deactivated: keep-alive 组件停用时调用。 (当前组件隐藏。)

deactivated(){ this.disconnectObserver('contentObserver'); },

这样会在切回这个页面的时候失去监听,我的做法
mounted周期改为activated
beforeDestroy周期改为deactivated
问题可以解决

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants