better-scroll 遇到的那些坑

前言

恕我直言,用好 better-scroll 这个插件,比用好vue还难。此篇为本人的踩坑点,持续更新。

1. 子元素撑开父元素使其不能滚动

  • BUG原因:

    在 better-scroll 中,子元素必须比父元素高(宽)才能让子元素在父元素内实现滚动

  • 解决方法:

    给父元素定位,并设置 height:100%

2. better-scroll 嵌套时,多次触发onCLick事件

  • BUG原因:

    better-scroll 多次创建实例引发的问题,多次绑定 onClick 事件使其重复执行

  • 解决方法:

    此时用 fastclick 模拟 onclick 事件即可解决,顺带还能解决 300ms 延迟:

    1. 安装 fastclick 依赖(示例为react开发场景)

      yarn add react-fastclick

    2. 引入 initReactFastclick

      import initReactFastclick from 'react-fastclick'
      
    3. 执行

      initReactFastclick();
      
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • better-scrollgithub 最近项目使用了better-scroll这个插件,这个插件用起来还是有不少...
    ceido阅读 42,306评论 6 36
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • 1、移动端你遇到过什么兼容问题?1、如果在input设置边框颜色在ios系统里会出现兼容性问题,需要在外面加一个d...
    阿帕奇哟阅读 822评论 0 8
  • 如何清除浮动,有哪几种方法,区别是什么 1、移动端你遇到过什么兼容问题? 1、如果在input设置边框颜色在ios...
    崽崽不哭阅读 796评论 0 1
  • 1、移动端你遇到过什么兼容问题? 1、如果在input设置边框颜色在ios系统里会出现兼容性问题,需要在外面加一个...
    青青菜鸟阅读 4,428评论 0 28