当前位置:   article > 正文

微信小程序页面在苹果手机上滑动,整个页面会拖动的问题解决办法_ios微信开发者工具上滑页面动态

ios微信开发者工具上滑页面动态

微信小程序页面在苹果手机上滑动,整个页面会拖动的问题解决办法

使用场景:如果显示弹窗的时候,弹窗底下长页面禁止上下滑动!

  1. 第一种方式:

*在微信小程序app.json的window中,添加”disableScroll”:true,但是要注意,如果你是要在app.json中添加disableScroll,会导致所有页面无法上下滑动,这就是个大bug了,解决也很简单,你想在那个页面禁止页面滑动,就在哪个页面的json下,添加disableScroll就可以了,单独设置就行
*然后给长页面设置高度,再添加overflow: auto;

//app.json中添加,window里面添加就可以了
 "window": {
   "disableScroll": true
 },
 
 //单独设置,比如index下,就在index.json设置
 {
   "navigationBarTitleText": "首页",
   "disableScroll":true
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  1. 第二种方式:添加catchtouchmove=’true’

*弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动,但是如果弹窗元素设置了该属性,弹窗内的自己写的overflow:auto就会失效,这时不能用自己写的overflow,要改用scroll-view组件,就可以解决该问题。
*catchtouchmove相当于preventDefault,阻止默认行为即阻止滚动事件

//弹窗遮罩层
<view  catchtouchmove='true'>

	 //弹窗遮罩层里需要滚动的页面
	 <scroll-view  scroll-y="true">
	           
	 </scroll-view>
	 
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

官方文档:
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/650663
推荐阅读
相关标签
  

闽ICP备14008679号