uniapp scroll-view scroll-top设置无效

根据需求,切换到 scroll-view 滚动区域时 滚动条回到顶部,初步尝试在切换的时候设置 this.scrollTop = 0,发现无效,一番查证:

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。

解决如下:

1. 监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="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. 避免设置一样的值

export default {
    data() {
        return {
            scrollTop: -1
        }
    },
    methods: {
        goTop: function(e) {
           this.scrollTop = 0
        }
    }
}
  • 12
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
### 回答1: 如果uniapp中的scroll-into-view无效,可能是以下几个原因导致的: 1. 没有设置scroll-view的高度或宽度,导致无法滚动。 2. scroll-into-view的值设置不正确,需要确保它是一个有效的元素id。 3. scroll-into-view的元素还没有被渲染出来,需要等待页面渲染完成后再执行滚动操作。 4. scroll-view的属性设置不正确,例如设置scroll-y="false",导致无法垂直滚动。 需要检查以上几个方面,才能确定scroll-into-view无效的具体原因。 ### 回答2: uniapp是一款基于Vue.js的跨平台开发框架,而scroll-into-view是其中的一个用于滚动定位的API。当我们使用scroll-into-view时,发现无法成功定位滚动。 这种情况出现的原因可能有多种,以下是一些可能存在的问题及其解决方案: 1. 父组件没有设置高度 scroll-into-view需要在一个有确定高度的容器内才能生效,因此如果你的组件或页面没有设置高度,scroll-into-view就无法正常工作。可以在父组件的样式中添加height属性,让其有一个确定的高度。 2. 容器内没有可滚动的元素 scroll-into-view需要在可滚动的元素内才能生效,如果你的容器中没有可滚动的元素,那么它就不会定位到任何位置。可以添加overflow属性,让其成为一个可滚动的容器,或者将scroll-into-view应用到一个可滚动的元素上。 3. 参数传递有误 scroll-into-view有三种方式传递参数:传递一个元素的id、传递一个选择器、传递一个组件实例。如果你传递的是一个不存在或错误的元素id或选择器,那么scroll-into-view就无法定位到正确的位置。可以确认传递的参数是否正确。 4. 容器内容未加载完全 当容器中异步加载的内容还未完全加载完成时,scroll-into-view也可能无法定位到正确的位置。可以在容器内容加载完成后再进行滚动定位操作。 总之,scroll-into-view无效的原因有很多种,需要具体分析具体情况。如果以上方法都无法解决问题,可以通过查看uniapp官方文档或者提问技术社区寻求帮助。 ### 回答3: uniapp是一种开发跨平台应用程序的框架,可以同时生成微信小程序、H5页面、APP等不同平台的应用。在开发uniapp应用时,我们经常会遇到组件无效的问题,其中一个常见的问题就是scroll-into-view无效scroll-into-view是一个uniapp的组件属性,用于使页面滚动到指定id或锚点处。在实际开发中,有时我们会发现它并不起作用,导致无法在页面上定位到需要查看的内容。 首先,我们需要明确scroll-into-view只能在uni-scroll-view或uni-tab-view组件中生效,如果在其他组件中使用它是没有效果的。因此,我们需要确保页面中使用该属性的组件符合要求。 其次,我们需要检查需要定位到的id或锚点是否正确。如果id或锚点错误,scroll-into-view就无法生效。我们可以使用Chrome浏览器的“审查元素”功能来检查需要定位到的元素的id或锚点是否正确。 另外,我们需要注意scroll-into-view在不同平台中的表现可能会有所不同,特别是在H5页面中可能存在兼容性问题。为了确保scroll-into-view能够在所有平台中正常工作,我们建议在开发时进行充分的测试。 最后,我们还可以尝试使用其他类似的属性,比如scrollTop或scrollLeft来实现滚动定位。这些属性在不同平台中的兼容性比较好,可以替代scroll-into-view来实现页面的滚动定位。 综上所述,如果我们在开发uniapp应用时遇到scroll-into-view无效的问题,我们需要检查组件、id或锚点、平台兼容性等多个方面,以确定问题发生的原因,并采取相应的措施来解决问题。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值