uniapp小程序的苹果 ios页面左右或上下滑动问题的解决方法效果demo(整理)

知秋~

已于 2023-09-18 11:04:07 修改

阅读量2.7k

点赞数 1

文章标签： ios uniapp苹果手机禁止滑动禁止滑动苹果手机 ios禁止滑动小程序禁止左右滑动滑动

于 2023-09-02 11:44:50 首次发布

本文介绍了如何通过CSS阻止微信小程序在iOS设备上的左右滑动，以及在xxx.json文件中设置`disableScroll`属性来控制某些页面的滚动行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一般来说，微信小程序的页面是不需要左右滑动的，甚至说是不允许左右滑动的。事实上，安卓手机在默认情况下就是左右不滑动的，但苹果IOS手机默认是左右可滑动的，其解决方法如下：

在具体页面的顶级view元素设置class=".page"，其CSS样式如下：
.page {
  width: 100%;
  overflow-x: hidden;
}
这样就可以解决ios页面左右滑动问题。此外，有些页面内容是不足一手机屏的或刚好一手机屏，即不需要上下滑动来翻页读取内容的页面，也是可以让它不上下滑动。默认，安卓手机是没有问题的，而ios手机是可以的，因此需特别控制，在页面的xxx.json代码如下

{
  "usingComponents": {},
  "navigationStyle": "custom",
  "disableScroll": true
}