IOS端小程序橡皮筋回弹效果解决方案及坑总结（uni-swipe-actiond在IOS端的坑）

Posted 2021-10-17 是小橙鸭丶

当我们使用uni-swipe-action 滑动这个组件进行左侧滑动删除时，我们会发现安卓手机正常 ，但是ios手机由于存在bounce效果，会出现抖动的效果，导致我们左侧滑动点击删除时，会有一个橡皮筋的回弹效果，此时我们就需要解决它

1.页面无滚动区域时，可通过页面json配置文件设置disableScroll:true禁止整个页面滚动，从而取消橡皮筋效果。（注意是无滚动区域--因为如果你需要滚动的话就都被禁止滚动了）

{
  "disableScroll":true
}

2.页面有滚动区域时，你需要在根元素加上catchtouchmove="return"，以及固定加个高度，因为是微信小程序，所以你加个height:100vh（PS：对cover-view无效）

<view style="height:100vh" catchtouchmove="return">

接下来你需要在 <uni-swipe-action>外面包含的列表，加一个scroll-view滑动，如下面这样的结构

<scroll-view scroll-y="true" :style="{'height':scrollsettingHight}">
    <view class="list-item" v-for="(item, index) in list" :key="index">
         <uni-swipe-action>

此时你需要给你的scroll-view允许滑动设置scroll-y="true"，以及设置一个固定的高度这样它才能进行滑动，由于各机型不同所以设置对应的高度时可以使用uni.getSystemInfoSync()去获取整个屏幕的高度，再根据不同的机型增加对应不同的操作也可以，如下

let config = uni.getSystemInfoSync()
this.scrollsettingHight = (config.screenHeight - 95 - 88 + 25)*2 + 'rpx'

拿到对应获取的高度在动态添加高度   :style="{'height':scrollsettingHight}"