关键词：better-scroll滚动插件与vue的结合

实现原理：父元素固定高度，并设置属性overflow:hidden，使得子元素高度超出容器后能被隐藏。better-scroll作用在父元素上。

1.安装依赖

1
npm install--save better-scroll

2.引入插件

1
import BScroll from 'better-scroll';

4.在父元素中定义对象

1
v-el:food

5.使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div class="food" v-show="showFlag" transition="move" v-el:food>//v-el:food定义对象
    <div class="food-content">//内容层自动撑开
         ...
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
export default{
    methods:{
        show(){
            this.showFlag = true;
            this.$nextTick(() => {
                if(!this.scroll){
                    this.scroll = new BScroll(this.$els.food,{
                        click:true//this.$els.food获取对象的接口
                  });
                }
                else{
                    this.scroll.refresh();
                }
            });
        }
  };
</script>

Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象。为了解决上面的问题,运用Vue的nextTick();