美文网首页Vue3
better-scroll 遇到的那些坑

better-scroll 遇到的那些坑

作者: 鹤仔z | 来源:发表于2020-03-23 00:22 被阅读0次

前言

恕我直言,用好 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();
      

相关文章

  • batter-scroll的组件化以及基本用法踩坑

    记录一下使用"better-scroll"时遇到的坑 记录一下使用"better-scroll"时遇到的坑使用场景...

  • better-scroll 遇到的那些坑

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

  • 遇到的那些坑

    1、为了优化代码增加了配置文件,用Python自带的模块configparser。中间增加了公共方法所在目录,导致...

  • 2020-03-03 Vue项目中引入better-scroll

    最近框架有用到better-scroll,说实话坑还是有点的遇到其中一个就是一个列表全部都是图片,因为引入bett...

  • vue 移动端使用better-scroll 遇到的坑

    使用插件初始化后 touchstart / touchmove / touchend 都会下面这个错误 解决办法:...

  • xmapp遇到的那些坑

    前言:由于php语言需要Apache,MySQL的支持才能搭建php服务。所以我选择了xmapp作为我的集成环境。...

  • 装修遇到的那些坑

    年前急急忙忙终于把一套旧房子的硬装装完了。实在没有精力做家具,年后再说吧。 这是我第二次装修了,虽然有过一次经验,...

  • flask遇到的那些坑

    app.run(host='公网IP',port=8080)这样不能使用公网ip访问app.run(host='内...

  • filehandle遇到的那些坑

    这里是将downTaskEntity.downloadDetails中的文件进行拼接,打开第一个文件准备写入fil...

  • 我遇到的那些坑

    今天公司要求引导页要放视频动画 播放一个十秒的视频 使用AVAudioPlayer 框架播放 代码编写完成后 直...

网友评论

    本文标题:better-scroll 遇到的那些坑

    本文链接:https://www.haomeiwen.com/subject/aizbyhtx.html