（生产）better-scroll - 下拉刷新

Options 参数

• startX: 0 开始的X轴位置
• startY: 0 开始的Y轴位置
• scrollY: true 滚动方向为 Y 轴
• scrollX: 'true' 滚动方向为 X 轴
• click: true 是否派发click事件
• directionLockThreshold: 5
• momentum: true 当快速滑动时是否开启滑动惯性
• bounce: true 是否启用回弹动画效果
• selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
• rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
• wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
• snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
• snapLoop: false 是否可以无缝循环轮播
• snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
• snapSpeed: 400, 轮播图切换的动画时间
• swipeTime: 2500 swipe 持续时间
• bounceTime: 700 弹力动画持续的毫秒数
• adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
• swipeBounceTime: 1200 swipe 回弹 时间
• 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属性
• useTransform: true 是否使用CSS3的Transform属性
• probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

Events 事件

• beforeScrollStart - 滚动开始之前触发
• scrollStart - 滚动开始时触发
• scroll - 滚动时触发
• scrollCancel - 取消滚动时触发
• scrollEnd - 滚动结束时触发
• touchend - 手指移开屏幕时触发
• flick - 触发了 fastclick 时的回调函数
• refresh - 当 better-scroll 刷新时触发
• destroy - 销毁 better-scroll 实例时触发

Example:

let scroll = new BScroll(document.getElementById('wrapper'),{

   probeType: 3

})

 

scroll.on('scroll', (pos) => {

  console.log(pos.x + '~' + pos.y)

})

方法列表

• scrollTo(x, y, time, easing)

滚动到某个位置，x,y 代表坐标，time 表示动画时间，easing 表示缓动函数
scroll.scrollTo(0, 500)

• scrollToElement(el, time, offsetX, offsetY, easing)

滚动到某个元素，el（必填）表示 dom 元素，time 表示动画时间，offsetX 和 offsetY 表示坐标偏移量，easing 表示缓动函数

• refresh()

强制 scroll 重新计算，当 better-scroll 中的元素发生变化的时候调用此方法

• getCurrentPage()

当 snap 为 true 时，获取滚动的当前页，返回的对象结构为 {x, y, pageX, pageY}，其中 x,y 代表滚动横向和纵向的位置；pageX，pageY 表示横向和纵向的页面索引

• goToPage(x, y, time, easing)

当 snap 为 true，滚动到对应的页面，x 表示横向页面索引，y 表示纵向页面索引， time 表示动画，easing 表示缓动函数

• enable()

启用 better-scroll，默认开启

• disable()

禁用 better-scroll

• destroy()

销毁 better-scroll，解绑事件

左右滑动的组件 - slider.vue：

• 实现效果：

自动轮播， 左右滑动切换，循环轮播

• 效果图：

• 代码：

slider.vue

<template>
　　<div class="slider" ref="slider">
　　　　<div class="slider-group" ref="sliderGroup">
　　　　　　<slot></slot>
　　　　</div>
　　　　<div class="dots">

　　　　　　<!--上图点的html  -->
　　　　　　<span class="dot" :class="{active: currentPageIndex === index }" v-for="(item, index) in dots"></span>
　　　　</div>
　　</div>
</template>

<script type="text/ecmascript-6">

import {addClass} from 'common/js/dom'
import BScroll from 'better-scroll'

export default {

name: 'slider',
props: {
　　loop: {  //是否循环播放
　　　　type: Boolean,
　　　　default: true
　　},
　　autoPlay: { //是否自动播放
　　　　type: Boolean,
　　　　default: true
　　},
　　interval: { //轮播频率
　　　　type: Number,
　　　　default: 4000
　　}
},

data() {
　　return {
　　　　dots: [], 　　　　     // 用于设置有多小个点
　　　　currentPageIndex: 0 // 当前播放到第几张图片
　　}
},
mounted() {

　　// 加上延迟20毫秒是因为dom初始化完，才可以执行以下操作
　　setTimeout(() => {
　　　　this._setSliderWidth()   //初始化宽度
　　　　this._initDots()            //初始化上图的点
　　　　this._initSlider()          //初始化better-scroll

　　　　if (this.autoPlay) {
　　　　　　this._play()    　　// 自动播放
　　　　}
　　}, 20)

　　//resize 监听设备窗口发生变化，要重新计算高宽

　　window.addEventListener('resize', () => {
　　　　if (!this.slider) {
　　　　　　return
　　　　}
　　　　this._setSliderWidth(true)
　　　　this.slider.refresh()
　　})
},

activated() {
　　if (this.autoPlay) {
　　　　this._play()   // 进入页面，重新执行自动播放，因为跳出页面会清除定时器
　　}
},
deactivated() {
　　clearTimeout(this.timer)  //跳出路由，清理定时器
},
beforeDestroy() {
　　clearTimeout(this.timer)  //清理定时器
},
methods: {

　　// 初始化高宽方法
　　_setSliderWidth(isResize) {

　　　　// <slot></slot>应该会被外面组件通过for循环生成的列表替换，获取这些列表
　　　　this.children = this.$refs.sliderGroup.children

　　　　// 用于保存总宽度
　　　　let width = 0

　　　　//获取组件的宽度
　　　　let sliderWidth = this.$refs.slider.clientWidth
　　　　for (let i = 0; i < this.children.length; i++) {
　　　　　　let child = this.children[i]

　　　　　　// 在这里添加样式，是因为如果在父组件添加样式，会增强父子组件的依赖
　　　　　　addClass(child, 'slider-item')

　　　　　　// 给每一个子组件的宽度，都应该=组件最外层div的宽度，保证每次轮播，都能填满
　　　　　　child.style.width = sliderWidth + 'px'
　　　　　　width += sliderWidth

　　　　}
　　　　if (this.loop && !isResize) {

　　　　　　//循环播放的时，在第一个元素之前，会自动添加最后一个元素的克隆对象，

　　　　　　//在最后一个元素之后，也会自动添加第一个元素的克隆对象，

　　　　　　// 所以比实际上市多出2和元素， 计算宽度要加 2 * sliderWidth
　　　　　　width += 2 * sliderWidth
　　　　}
　　　　this.$refs.sliderGroup.style.width = width + 'px'
　　},
　　_initSlider() {

this.slider = new BScroll(this.$refs.slider, {
　　scrollX: true,
　　scrollY: false,
　　momentum: false,
　　snap: true,
　　snapLoop: this.loop,
　　snapThreshold: 0.3,
　　snapSpeed: 400

　　　　})

this.slider.on('scrollEnd', () => {

　　// 获取当前播放的索引
　　let pageIndex = this.slider.getCurrentPage().pageX
　　if (this.loop) {

　　　　// 如果是循环播放，实际当前播放元素的索引，计算要减去1，原因也是多了2个元素
　　　　pageIndex -= 1
　　}

　　// 改变当前选中的样式
　　this.currentPageIndex = pageIndex

　　if (this.autoPlay) {
　　　　clearTimeout(this.timer)

　　　　// 能自动播放的关键，每次滑动完成都会重新调用 _play 方法
　　　　this._play()
　　}
})

　　},
　　_initDots() {
　　　　this.dots = new Array(this.children.length)
　　},
　　_play() {
　　　　let pageIndex = this.currentPageIndex + 1
　　　　if (this.loop) {
　　　　　　pageIndex += 1
　　　　}
　　　　this.timer = setTimeout(() => {

　　　　　　// 跳转到哪个页面
　　　　　　this.slider.goToPage(pageIndex, 0, 400)
　　　　}, this.interval)
　　}
}

}

</script>

父组件引用插件：

import Slider from 'base/slider/slider'

components: {
　　Slider
}

<!--  v-if="recommends.length"作用是保证有数据才会渲染组件  -->

<div v-if="recommends.length" class="slider-wrapper" ref="sliderWrapper">
　　<slider>
　　　　<div v-for="item in recommends">
　　　　　　<a :href="item.linkUrl">

　　　　　　　　<img class="needsclick" @load="loadImage" :src="item.picUrl">
　　　　　　</a>
　　　　</div>
　　</slider>
</div>

方法loadImage ：由于图片下载时异步的，所以有可能出现列表已经渲染好，但是图片还没有下载完的情况，导致的结果就是组件的宽度不正确，所以当图片加载完成，要重新计算宽度

loadImage() {
　　if (!this.checkloaded) {
　　　　this.checkloaded = true
　　　　this.$refs.scroll.refresh()
　　}
},