当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
解决办法有两种(以scroll-view组件为例):
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
1、监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值
export default { data() { return { scrollTop: 0, old: { scrollTop: 0 methods: { scroll: function(e) { this.old.scrollTop = e.detail.scrollTop goTop: function(e) { this.scrollTop = this.old.scrollTop this.$nextTick(function() { this.scrollTop = 0 }
2、监听scroll事件,获取组件内部变化的值,实时更新其绑定值
export default { data() { return { scrollTop: 0, methods: { scroll: function(e) { // 如果使用此方法,请自行增加防抖处理 this.scrollTop = e.detail.scrollTop goTop: function(e) { this.scrollTop = 0 }
第二种解决方式在某些组件可能造成抖动, 推荐第一种解决方式 。
蓦然、回首,那人就在灯火阑珊处 1.SpringBoot【 Thymeleaf、SpringBoot热部署、SpringBoot整合MyBatis、 SpringBoot参数校验】(四)-全面详解(学习总结---从入门到深化) 2.Android程序员薪资还没有20K,只能说明你做的还不够 3.DockerDeskTop系列---【启动DockerDeskTop时报错:Please try shutting WSL down (wsl --shutdown) and...】 4.从源码层面理解Spring的生命周期 5.SpringBoot中集成jasypt-spring-boot实现配置文件数据加密脱敏