如何让微信小程序弹窗滚动条设置在最上面

最近发现一个事情搞得很烦，微信小程序的弹窗内容可以滚动的时候，要保证每一次打开都在最上面，研究了一下终于发现了怎么解决

第一步

首先得把你的弹窗里面的内容用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

要是大家有更好的建议欢迎沟通噢~