初试 vue2.0——8.项目开发_better-scroll 实现移动端滑动1

写在前面的话：

　　额，原因是啥来着？忘咯，后补~

八、better-scroll + vue2.0 实现移动端滑动1

　　1. 首先引入依赖库（better-scroll），并安装：

　　　　再 npm install

　　　　再 npm run dev

　　　　小备注：第一次安装的时候报错：

　　　　然后我就换成 better-scroll 0.1.7版本的装了一次，居然成功了，但是提醒我最新版本：

　　　　所以就又装了一遍 better-scroll 0.1.14版本，哈哈，成功了。但不清楚第一遍是怎么了~算了，继续往下

　　2. 使用方法：

　　　　之前Vue1.0是使用 v-el 指令来绑定元素，在Vue2.0中被 ref 指令替代了，所以在Vue2.0中绑定DOM元素合一写成如下方式：

　　template中这样写~

<div class="menu-wrapper" ref="menu">
    一段内容1
</div>

<div class="foods-wrapper" ref="foodsWrapper">   <!-- 温馨提示：此处不可使用短横线命名的方式，如 此处写 foods-wrapper 是不行的
    一段内容2
</div>

　　温馨提示： template 中 ref=" 某name " 中，某name 不可使用短横线拼接命名的方式，

如foods-wrapper。然后 script 中使用相应驼峰如foodswrapper，运行时会报错的，提示如下：

　　script中这样用：

 1 <script type="text/ecmascript-6">
 2   import BScroll from 'better-scroll'       //1.引入better-scroll
 3   const ERR_OK = 0
 4 
 5   export default{
 6     props: {
 7       seller: {
 8         type: Object
 9       }
10     },
11     data () {
12       return {
13         goods: []
14       }
15     },
16     created () {
17       this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
18 
19       this.$http.get('/api/goods').then((res) => {
20         res = res.body
21         if (res.errno === ERR_OK) {
22           this.goods = res.data
23           this.$nextTick(() => {       // 3 在这个函数中调用以防内容还未加载完就执行，获取不到元素的高度导致无法滑动
24             //console.log(this)   //可以打印看看this的内容
25             this._initScroll()
26           })
27         }
28       })
29     },
30     methods: {
31       _initScroll () {         // 2 函数声明
32         this.menuScroll = new BScroll(this.$refs.menu, {})            //注意此处是 this.$refs.xxx
33         this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
34       }
35     }
36   }
37 </script>

哈哈，试试，可以滚动啦~

初试 vue2.0——8.项目开发_better-scroll 实现移动端滑动1

推荐阅读