最近发现一个事情搞得很烦,微信小程序的弹窗内容可以滚动的时候,要保证每一次打开都在最上面,研究了一下终于发现了怎么解决
第一步
首先得把你的弹窗里面的内容用scroll-view标签包起来,像这样
<scroll-view style="height:592rpx" scroll-y="{{true}}" scroll-top="{{scroll}}">
</scroll-view>
这里需要注意三点
1 一定要有高度,设置height
2 scroll-y=“{{true}}” 一定要设置
3 设置 scroll-top=“{{scroll}}”
第二步
填充scroll-view
<scroll-view style="height:592rpx" scroll-y="{{true}}" scroll-top="{{scroll}}">
<view class="saleUnit">
<view wx:for="{{5}}" wx:key="index" ></view>
</view>
</scroll-view>
这里需要注意的是 scroll-view 下面的元素高度不要写死,写死了没办法滑动
第三步 js设置scroll
在data中定义
data: {
scroll: 0,
}
在弹窗打开时设置
setTimeout(()=>{
if (this.data.scroll === 0) {
this.setData({
scroll: 0.1,
})
} else {
this.setData({
scroll: 0,
})
}
},300)
这里有两点注意
这里加上setTimeout也是其中的一个bug ,猜测是没有渲染好,加上setTimeout后就生效了
设置0.1也是,直接设置0时,有的情况下没办法滚动到最上面,设置0.1就解决了
happy ending
要是大家有更好的建议欢迎沟通噢~