better-scroll的用法,及其中的一个属性event._constructed详解

better-scroll的用法,及其中的一个属性event._constructed详解better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能

better-scroll是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能。

实现原理:父容器固定高度,并设置overflow:hidden,子元素超出父元素高度后将被隐藏,超出部分可滚动且没有滚动条。

立即使用:

<body>
  <div id="wrapper">
    <ul>
       <li>...</li>
       <li>...</li>
       ...
    </ul>
  </div>
<script type="text/javascript" src="better-scroll.js"></script>
<script type="text/javascript">
  new BScroll(document.getElementById(wrapper));
</script>
</body>

 

结合vue使用:

通过npm引入

1. 安装better-scroll

npm install better-scroll

2. 页面中引入better-scroll

import BScroll from ‘better-scroll

3. 如果不支持import,可使用

var BScroll require(‘better-scroll)

页面结构:

<div id="wrapper" ref="wrapper">
    <ul class="container">
       <li>...</li>
       <li>...</li>
       ...
    </ul>
</div>

 在methods中写一个方法:

 _initScroll() {
    this.boxScroll= new BScroll(this.$refs.wrapper, {
       click: true
    })
},

 注意:

  better-scroll会将点击事件去掉,如果滚动部分需要有点击事件,需要在参数里加上click:true。

  同时,在PC上或某些手机端,由于未成功将touchend事件move掉,点击事件会执行两次。

  better-scroll派发的event事件和原生js的event有属性上的区别,其中有一个属性为event._constructed。better-scroll派发的事件中event._constructed为true,原生点击事件中没有这个属性。

selectList(index,event){
    if(!event._constructed){
  
  //如果不存在这个属性,则为原生点击事件,不执行下面的函数
        return
    }
}

 

由于vue中数据更新是异步的,在dom解构没有加载完成,BScroll无法获取目标容器的高度,会出现无法滚动的现象。

vue中有一个方法可以解决这个问题:$nextTick()

技术分享

根据官方API的解释可知,一些需要在页面数据变化完成后才执行的函数需要写在$nextTick中 。

this.$nextTick(() => {
    this._initScroll()
})

 

 

 附better-scroll参数:

  • startX: 0 开始的X轴位置
  • startY: 0 开始的Y轴位置
  • scrollX: true 滚动方向为X轴
  • scrollY: true 滚动方向为Y轴
  • click: true 是否启用click事件
  • directionLockThreshold: 5
  • momentum: true 是否开启动量动画,关闭可以提升效率
  • bounce: true 是否启用弹力动画效果,关掉可以加速
  • selectedIndex: 0
  • rotate: 25
  • wheel: false 是否监听鼠标滚轮事件
  • snap: false 自动分割容器,用于制作走马灯效果等
  • snapLoop: false
  • snapThreshold: 0.1
  • swipeTime: 2500
  • bounceTime: 700 弹力动画持续的毫秒数
  • adjustTime: 400
  • swipeBounceTime: 1200
  • deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01
  • momentumLimitTime: 300
  • momentumLimitDistance: 15
  • resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔
  • preventDefault: true 是否阻止默认事件
  • preventDefaultException: { tagName: – /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
  • HWCompositing: true 是否启用硬件加速
  • useTransition: true 是否使用CSS3的Transition属性,否则使用requestAnimationFram代替
  • useTransform: true 是否使用CSS3的Transform属性
  • probeType: 1. 滚动的时候会派发scroll事件,会截流。2. 滚动的时候实时派发 – scroll事件,不会截流。 3. 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件

 

参考网站:

https://www.npmjs.com/package/better-scroll     better-scroll文档

https://github.com/ustbhuangyi/better-scroll     github

今天的文章better-scroll的用法,及其中的一个属性event._constructed详解分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/62230.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注