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

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

第一步

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

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

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

php自定义弹窗,微信小程序弹窗自定义的代码
这篇文章主要介绍了微信小程序弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下微信小程序弹窗首先wxml代 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
【微信小程序】background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片: base64图片设置步骤如下:1.在转base64工具(自己百度下base64编码转换工具) ...
微信小程序网络请求 - 设置合法域名
微信小程序设置网络请求官方文档为什么要设置合法域名呢 ? 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信.包括普通 HTTPS 请求(wx.request).上传文件(w ...
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可 <textarea class="txt_wor ...
微信小程序scroll-view高设置100%在苹果6p下的兼容性问题
微信小程序scroll-view高设置100%在苹果6p下的兼容性问题 home.wxml <view class='main'><view class='crumbs'>&l ...
微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
微信小程序背景图设置不生效的问题
技术栈: unIAPP + uview 组件库开发微信小程序时候发现设置背景图片不生效 ,查资料得知,背景图需要使用网络地址或者base64格式解决方法如下思路使用定位实现父盒子使用相对定位 ...
微信小程序获取滚动条高度_小程序超过高度加滚动条小程序尺寸规范
DW里如何设置自适应屏幕高度,且内容超出时出现滚动条? 首先:打开DW并创建一个新的HTML页面.第二:为它的页面写一个div,类pingmu.第三,保存这个文件.第四:创建一个新的类样式,并为其Di ...