微信小程序官方提供了一个可以设置滚动条位置的方法scroll-top
在实际运用过程中,发现设置了scroll-top无效,滚动条位置并没有发生变化,是因为微信小程序的官方框架处于性能考虑,初始化设置scroll-top不会重新渲染页面,需要将scroll-top的是放在一个事件内执行才可以生效。
这里演示一个切换选项重置滚动条事件的案例:文章来源:https://www.toymoban.com/news/detail-509286.html
<scroll-view class="listDetail"
scroll-y="true"
bindscrolltolower="scrollLower"
scroll-top="{{scrollTop}}"
>
<view class="allDetail"></view>
</scroll-view>
data: {
// data内不需要设置scrollTop
},
// 将scrollTop放在一个事件内执行,切换页面重置滚动条
navTabClick() {
this.setData({
scrollTop: 0
})
},
注意:
这种在data内直接设置scrollTop初始化是无法生效的文章来源地址https://www.toymoban.com/news/detail-509286.html
<scroll-view class="listDetail"
scroll-y="true"
bindscrolltolower="scrollLower"
scroll-top="{{scrollTop}}"
>
<view class="allDetail"></view>
</scroll-view>
data: {
scrollTop : 0
}
到了这里,关于微信小程序scroll-view组件设置 scroll-top无效问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!