相关文章推荐
健壮的充值卡  ·  MySQL使用distinct单、多字段去重 ...·  2 月前    · 
千杯不醉的跑步鞋  ·  D:\git-global\toyo\src ...·  1 年前    · 
气宇轩昂的椅子  ·  Shell数组:Shell数组定义以及获取数组元素·  1 年前    · 
坚韧的萝卜  ·  java拆分字符串的split方法对比_st ...·  2 年前    · 
道上混的熊猫  ·  目标检测 点云跟踪 ...·  2 年前    · 
Code  ›  小程序取消橡皮筋回弹效果解决方案及坑总结 | 微信开放社区
https://developers.weixin.qq.com/community/develop/article/doc/000c4e2e3446e8243739e441051013
飘逸的莲藕
2 年前

交流专区
服务市场
微信学堂
文档
小程序
  • 常用主页

    小程序

    小游戏

    企业微信

    微信支付

  • 服务市场
    微信学堂
    文档
登录
评论

置顶 小程序取消橡皮筋回弹效果解决方案及坑总结 精选 热门

Yunior 2019-09-23
39826 浏览
11 评论

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

提到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,但哪吒说 我命由我不由天,所以还是我们开发者多分享些解决方案自救来的快。
分享方案如有问题还望不吝指出,没有涉及到的坑也欢迎评论提出,一起学习和解决,后续也会基于此篇不断更新总结。

最后一次编辑于 2021-01-14
点赞 22
收藏
分享

扫描小程序码分享

复制链接

删除文章后,文章内容和评论将一并被删除,且不可恢复。

删除 取消
评论
关闭

请选择投诉理由

  • 广告内容
  • 违法违规
  • 恶意灌水内容
  • 其他

11 个评论

  • 安静的七
    安静的七
    2020-02-18
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    没这么复杂,根元素加上catchtouchmove="return"就可以了(PS:对cover-view无效)。觉得好用的亲们别吝啬点个赞呀~~~

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-02-18
    赞同 19
    回复 17
    • Yunior
      Yunior
      2020-02-21
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      感谢反馈,空了试试

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-02-21
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 97
      97
      2020-03-13
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      牛逼啊哥们   真的是一句搞定  牛逼牛逼

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-03-13
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 蒋志坚
      蒋志坚
      2020-03-25
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      设置了之后不能滚动了

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-03-25
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 陈生
      陈生
      2020-04-28
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      试了,不行,按住上滑不松开又下拉,依然出现

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-04-28
      赞 1
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 一台尹水机
      一台尹水机
      2020-06-04
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      感谢,加上去立马好

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-06-04
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    查看更多(12)
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 风车车
    风车车
    2021-04-27
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    web-view的回弹效果怎么去掉,有人试过吗

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2021-04-27
    赞同 3
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • Rena🐯
    Rena🐯
    2020-04-03
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    你这不行的啊,禁用后第一次反向滑动 没反应的,第二次才有反应

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-04-03
    赞同 2
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • Jimmy Luo
    Jimmy Luo
    2022-05-26
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    给scrollView加个高度就行了

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2022-05-26
    赞同
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 雪峰学华
    雪峰学华
    2021-10-20
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    不错。。学习了

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2021-10-20
    赞同
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 招雄彬正在输入。。
    招雄彬正在输入。。
    2021-08-13
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    哎!第一种不适合我,第二种没效果,第三种需要多滑一下,可恶,官方快修复

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2021-08-13
    赞同
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 大宝Jimmy
    大宝Jimmy
    2021-01-24
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    又两年过去了...

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2021-01-24
    赞同
    回复 6
    • chove。
      chove。
      2022-01-22
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      又过去一年了 难受

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2022-01-22
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 一只猫的花园
      一只猫的花园
      2022-12-09 回复 chove。
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      马上迎来2023年了

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2022-12-09
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 北彼
      北彼
      01-05
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      又一年过去了

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      01-05
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • 鑫
      鑫
      03-22
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      又一年

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      03-22
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    • kamenRider
      kamenRider
      03-29 回复 鑫
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      又一个星期

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      03-29
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    查看更多(1)
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 喂,Sinpo
    喂,Sinpo
    2021-01-22
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    👍

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2021-01-22
    赞同
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 陈生
    陈生
    2020-04-28
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    不知道是不是微信又有什么变动。我下载你的代码下来后试了,第二种方法依然还是有下拉回弹的效果,方法三基本是没什么用的

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-04-28
    赞同
    回复 1
    • 陈生
      陈生
      2020-04-28
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      也可能是我对你的描述有什么误会,楼主有时间可以看看

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-04-28
      赞
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • R·y
    R·y
    2019-12-04
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

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

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2019-12-04
    赞同
    回复 1
    • Yunior
      Yunior
      2019-12-04
 
推荐文章
健壮的充值卡  ·  MySQL使用distinct单、多字段去重 - 字节悦动 - 博客园
2 月前
千杯不醉的跑步鞋  ·  D:\git-global\toyo\src\main\webapp\app\entities\part\delete\part-delete-dialog.component.ts 26:11
1 年前
气宇轩昂的椅子  ·  Shell数组:Shell数组定义以及获取数组元素
1 年前
坚韧的萝卜  ·  java拆分字符串的split方法对比_stringutils.splitbywholeseparatorpreservealltokens-CSDN博客
2 年前
道上混的熊猫  ·  目标检测 点云跟踪 资料收集_点云目标轨迹怎么获得_kuizhao8951的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号