微信小程序中弹窗禁止页面滚动
在小程序弹窗时,外部页面禁止滚动
, 可以在最外部容器设置catchtouchmove
但是如果弹窗内部也需要滚动,需要用scroll-view
包裹,并设置scroll-y
catchtouchmove
需要接收个方法,不然会一直警告
<view class="box">占位</view> <view class="pop" catchtouchmove="touchMove"> <view class="popbg"></view> <view class="popup"> <scroll-view scroll-y> <view class="row" wx:for="{{10}}" wx:key="index">{{index}}</view> </scroll-view> </view> </view>
Page({ touchMove() { return } })
.box { height: 120vh; } .popbg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .popup { position: fixed; top: 20%; left: 50%; transform: translate(-50%, 0); width: 70%; background: #fff; z-index: 1; } scroll-view { height: 500rpx; } .row { width: 100%; height: 200rpx; }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库