使用better-scroll

一.使用

1.npm install better-scroll --save

2.goods_wrapper和foods_wrapper是容器，ul是内容

第一层 div:
    高度固定比如是手机屏幕的高度，overflow-y:hidden;
第二层 div:
    高度不固定，只设置宽度 100%。
第三层 : 
    数据部分，肯能有很多很多

3.js

初始化这个组件，在methods里面写一个方法，然后在钩子函数里面调用这个方法，在页面要调用的地方写ref=" "(命名用驼峰命名，用-会报错)

出现style说明调用成功

二.注意事项

1.  ref不要用a-b连名符号写

    如果html里面写ref = "goods-Wrapper"

    用this.$refs.goodsWrapper  或者  this.$refs.goods-Wrapper  或  this.$refs.goodswrapper  获取dom元素控制台会报    错 [BScroll warn]: Can not resolve the wrapper DOM.

    Error in nextTick: "TypeError: Cannot read property 'children' of undefined"

直接用ref="goodsWrapper" （用驼峰命名）

this.$refs.goodsWrapper   或者是this.$refs['goodsWrapper']获取

2. 页面有style仍无法滚动

在控制台打印出初始化的better-scroll,看hasVerticalScroll ，scrollerHeight ，wrapperHeight  果这三个的值

，如果hasVerticalScroll:false,scrollHeight 的值小于等于wrapperHeight的值，那说明content的高度没有超过父容器的高度，是无法出现滚动的。

我出现scrollHeight的值等于wrapperHeight的值 的原因是 页面  代码写的有问题，我直接贴出来

v-for 循环不能写在ul  里面，要写在li 里面 （唉，真是粗心，找这个问题找了好久，~~~~(>_<)~~~~）

再就是最外层的容器要设置为overflow：hidden 而不是scroll

完毕

豆奶不喝豆奶