uniapp在app端页面上下左右滑动问题，禁止上下左右滑动影响canvas和触摸事件

前言

当在app端运行uniapp项目时会有页面回弹效果，即页面拉到最上面或最下面时有一定的拉伸效果让页面更加柔和，但有些场景我们不希望有这种效果，比如页面中有触摸事件并产生图形化效果时，比如有个用来画画的canvas画布时

此时如果存在回弹效果或滑动效果就会影响画图，通过上图中搜索框和canvas画布的拉伸可以看出影响

解决方案

步骤一：关闭页面回弹

全局配置

 在page.json文件的"globalStyle"配置项中添加配置

"globalStyle": {
	// ...其他全局样式配置
	"app-plus": {
		"bounce": "none"
	}
}

局部配置

在page.json文件中需要关闭回弹的页面配置的"style"配置项中添加配置

"style": {
	// ...其他样式配置
	"app-plus": {
		"bounce": "none"
	}
}

步骤二：禁用页面上下滑动

在关闭页面回弹后，页面还是有一定的上下滑动空间（即使布局未超出屏幕），这样还是有时会对触摸事件产生影响，如下图：

 虽然此时不能随意左右拉动，也没有拉伸效果了，但仍然可以上下滑动，通过上图的滚动条可以看出，所以我们需要禁用页面的上下滑动，这里采用的方式是在布局外围包裹一层<scroll-view>组件

在需要禁用滑动效果的页面的布局中添加如下组件到根节点中

<scroll-view style="position: absolute;
bottom: 0px; top: 0px;">
  <!-- ...页面布局内容 -->
</scroll-view>

 添加这个样式是为了适配小程序端和一些特殊情况，如果不手动设置高度<scroll-view>默认不会占满全屏，app端和h5端没有这种情况，如果不适配的结果如下图：

 示例项目的布局代码如下：

<template>
  <view>
    <scroll-view style="position: absolute;
    bottom: 0px; top: 0px;">
      <SearchBox />
      <Canvas />
    </scroll-view>
  </view>
</template>

最终效果

在这两个步骤之后，页面就被牢牢的固定住了，触控事件和canvas画图就像德芙一样丝滑了，最后附上电子签名[doge]