饿了么项目---8、关于iscoll的扩展 better scroll的使用（1)

本笔记重点:
- 如何在项目中引入Vue的扩展‘better scroll’
- 关于better scroll 的API
- 饿了么项目中应用点–让内容在中间区域滚动
- 饿了么项目中应用点–通过一侧点击事件滚动另一侧内容

一、better scroll的使用

首先贴上改扩展插件的github托管地址：
https://github.com/ustbhuangyi/better-scroll
关于其引用与API的使用已经解释的非常详细了

1.1 引入better scroll

1.1.1 在你的项目依赖package.json中添加better scroll的依赖。

"dependencies": {    "vue": "^2.3.3",    "vue-router": "^2.3.1",    "vue-resource": "1.3.4",    "element-ui": "^1.0.0",    "better-scroll": "^0.1.7"  }

cmd打开命令窗口 输入：npm install 或者 使用淘宝镜像cnpm 安装

1.1.2 在项目中使用

项目需要使用到的vue组件中,引入 better-scroll，并将better-scroll对象实例化，你想要使哪一个代码块有此滚动功能，就将其实例化。

实例化传参：
let scroll = new BScroll(DOM对象, option配置传参) ;

参数说明：
DOM对象：你要使其滚动的那个DOM对象，例如document.getElementById(‘wrapper’)；
（在vue 中通过ref属性注册DOM节点信息，通过Vue.refs获取该节点对象，详细使用说明请看我的上一篇文章：http://note.youdao.com/noteshare?id=02149c5e4c2aa8c80859d4e4cbed285c&sub=5A57DAABCC3941A48D0E15B2E23EB131）
option
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在手指 move 的时候也会实时派发 scroll 事件，不会截流。 3除了手指 move 的时候派发scroll事件，在 swipe（手指迅速滑动一小段距离）的情况下，列表会有一个长距离的滚动动画，这个滚动的动画过程中也会实时派发滚动事件

下为案例：

<template> <div class="goods">    <div ref='menuWrapper'>        ...此处省略...    </div>    <div ref='foodsWrapper'>       ...此处省略...    </div>    <cartshop></cartshop></div></template>import BScroll from 'better-scroll';created(){    this.$nextTick(()=>{          this._initScroll();      })},methods:{//初始化better-scroll 的函数    _initScroll() {        //获取better-scroll实例        this.meunScroll = new BScroll(this.$refs.menuWrapper, {            click:true        });        this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {            probeType:3        });    }}