评论

小程序取消橡皮筋回弹效果解决方案及坑总结(持续更新)

分享取消橡皮筋回弹效果的解决方案和因为这个效果遇到的坑,和大家一起学习交流。

提到ios系统的橡皮筋效果,作为开发者是又爱又恨,有想要这个效果又有不想要的,无奈的是却没有一个简单的开关来设置这个效果是否开启。
最近在开发小程序时也遇到有关于ios橡皮筋回弹的问题,这里分两部分(取消橡皮筋回弹效果和因为这个效果遇到的坑)和大家分享一下。
 

取消IOS橡皮筋回弹效果的解决方案

1) 页面无滚动区域时,可通过页面json配置文件设置disableScroll:true禁止整个页面滚动,从而取消橡皮筋效果。

{
  "disableScroll":true
}

测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo1
 

2) 页面有滚动区域,滚动区域通过view模拟实现,然后在页面json配置文件设置disableScroll:true禁止整个页面滚动,从而取消橡皮筋效果。

json文件配置
{
  "disableScroll":true
}

view元素模拟实现滚动样式
{
  height: calc(100vh - 120rpx); //高度必须是固定的值
  overflow-y: auto;
}

不足之处在于view元素模拟的滚动区域滚动时不够连贯,没有scroll-view那种原生丝滑般的感觉。
测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo2
 

3) 页面有滚动区域,滚动区域使用scroll-view,这时通过disableScroll则无法实现,尝试设置一下scroll-view的scroll-y="{{false}}",上拉或下拉时居然不再触发橡皮筋的回弹啦,当然滚动区域也不能滚动。
小脑袋动一动,解决方法有啦!
通过设置一个变量scrollY动态控制滚动区域的滚动从而阻止回弹。
监听bindscrolltoupper\bindscrolltolower当scroll-view区域滚动到顶部或底部时候设置scrollY:false来关闭页面滚动,从而阻止回弹。
监听bindtouchstart\bindtouchmove 当用户反方向滑动的时候设置scrollY:true,再次开启页面滚动。

wxml滚动区域属性和事件处理,具体实现请点击测试代码链接
<scroll-view scroll-y="{{scrollY}}" class="list" upper-threshold="5" lower-threshold="5"
bindscrolltoupper="bindscrolltoupper" 
bindscrolltolower="bindscrolltolower" 
bindtouchstart="touchstart"
bindtouchmove="touchmove">
<view class="list-item" wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>  

相对view模拟实现滚动区域,scroll-view滚动更丝滑,不过每次滚动到底部或顶部的时候,再反向滑动时由于再次开启scroll-view滚动会有操作卡顿的感觉,暂时没想到好的解决方法,有解决的大佬希望提供一下想法,一起学习下。
测试代码:https://github.com/YuniorZen/minicode-debug/tree/master/minicode01/pages/demo3
 

IOS橡皮筋效果遇到的坑

1) 操作左滑删除组件时上下移动,会触发橡皮筋效果导致页面抖动的问题
这个坑的严重程度看设计师的意愿了,反正我们团队目前是需要解决的,方案类似取消橡皮筋解决方案的第三种
在左滑的时候关闭scroll-view的滚动,取消时再次开启滚动

 

2) 如果页面顶部有置顶的横向滚动区域scroll-view,当页面滚动到底部时继续上拉会导致置顶头部消失,松开回弹后头部又会出现。
坑是社区里的朋友提出来的,我借了个iphone x 一预览,我嚓,还是真是个奇坑!
微信官方回复已复现正在解决中… 不想继续等下去的,暂时解决方法是
监听页面的滚动区域,当滚动到底部时设置顶部横向滚动scroll-view的scroll-x=false来解决。

 

写在最后

以上便是我在小程序开发中有关于ios橡皮筋回弹效果的分享,示例代码已上传github,可自行下载体验。

https://github.com/YuniorZen/minicode-debug/tree/master/minicode01

目前微信官方虽说已经着手解决(已两年)此类bug,但哪吒说 我命由我不由天,所以还是我们开发者多分享些解决方案自救来的快。
分享方案如有问题还望不吝指出,没有涉及到的坑也欢迎评论提出,一起学习和解决,后续也会基于此篇不断更新总结。

最后一次编辑于  2019-09-23  
点赞 6
收藏
评论

2 个评论

  • R·y
    R·y
    2019-12-04

    请问,如果是需要整个页面的滚动,scrollview包裹最外层,然后使用第三种方法的,是不是页面的下拉刷新就不会触发了

    2019-12-04
    赞同
    回复 1
    • Yunior
      Yunior
      2019-12-04
      官方文档提示使用scrollview会导致无法触发下拉刷新,即使不用第三种方法应该也是无法触发的,如果需要触发可以只能再通过监听去手动处理。
      2019-12-04
      回复
  • 鲨叔
    鲨叔
    2019-10-15

    总结得不错!anyway,微信小程序的官方这么傲慢吗?禁止个橡皮筋效果明显是一个很普遍的需求啊,搞了这么多年,都不实现这个?

    2019-10-15
    赞同
    回复 3
    • Yunior
      Yunior
      2019-10-19
      谢谢支持,官方有官方的出发点,慢慢等吧。
      2019-10-19
      回复
    • 晏清
      晏清
      2019-10-27
      小程序几年了都解决不了scrollview在ios的橡皮筋效果
      2019-10-27
      回复
    • Alain
      Alain
      2019-12-19
      他们的微信读书小程序,自己做iOS禁橡皮筋效果,做的蛮好。
      2019-12-19
      回复
登录 后发表内容