移动端滚动插件better-scrol

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等

说明文档 https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/events.html#flick

better-scroll安装

npm install better-scroll --save

• 在用到的页面 import BScroll from ‘better-scroll’ 即可

  better-scroll 常见的 html 结构

  <div class="wrapper">
     <ul class="content">
        <li>...</li>
        <li>...</li>
         ...
     </ul>
   </div>

  better-scroll的使用原理 - 父级overflow:hidden

• 浏览器的滚动条大家都会遇到，当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。
• 所以要在父级设置 overflow:hidden属性

  初始化better-scroll

  import BScroll from 'better-scroll'
  let wrapper = document.querySelector('.wrapper')
  //获取当前dom节点就可以进行拖动了
  let scroll = new BScroll(wrapper, {})

• 如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常
• better-scroll 提供给我们一个方法 点击元素可以滚动到指定位置

  //拿到dom节点
  const element = this.$refs[this.letter][0]
  //滚动到当前节点/滚动时间
  this.scroll.scrollToElement(element,300)

  在vue中使用better-scroll的问题

• 使用better-scroll在移动端点击事件会失效
• better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true

  methods:{
     click(event){
         if(!event._constructed) {
           return;
         }
         let domID = this.$refs.domID
         this.scroll.scrollToElement(domID,{
            click: true
          },300)
     }
  }

赏

谢谢你请我吃糖果

支付宝

微信