当前位置: 首页 > news >正文

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

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

第一步

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

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

http://www.lryc.cn/news/66507.html

相关文章:

  • c语言-指针
  • Jenkins集成SonarQube实现代码质量检查
  • 2023 谷歌I/O发布会新AI,PALM 2模型要反超GPT-4,一雪前耻!
  • MySQL和Redis如何保证数据一致性?
  • Markdown使用(超详细)
  • yolov5实现扑克牌识别的产品化过程
  • 第07讲:Java High Level Client,读写 ES 利器
  • dockerfile暴力处理配置文件外提
  • 如何快速给出解释——正交矩阵子矩阵的特征值的模必然不大于1
  • c语言-位运算
  • 【Android学习专题】安卓样式学习(学习内容记录)
  • 普罗米修斯统计信息上报结构设计
  • 两个系统之间的传值
  • PostgreSQL(五)JDBC连接串常用参数
  • 如何修改浏览器中导航栏的背景色和字体
  • 如何选择合适的智能氮气柜?
  • 双向链表(数据结构)(C语言)
  • 离线安装Percona
  • 界面控件Telerik UI for WinForms使用指南 - 数据绑定 填充(二)
  • 通过栈/队列/优先级队列/了解容器适配器,仿函数和反向迭代器
  • leetcode 704. 二分查找
  • 蓝牙耳机什么牌子好?500内好用的蓝牙耳机推荐
  • 设计模式 -- 中介者模式
  • 人工智能的未来之路:语音识别的应用与挑战
  • c++ 友元介绍
  • 四维轻云地理空间数据在线管理软件能够在线管理哪些数据?
  • 学习 GitHub 对我们有什么好处?
  • java记录-反射
  • 这次彻底不需要账号了,无需魔法永久白嫖GPT
  • 远程桌面连接是什么?如何开启远程桌面连接详细教程