vue-cli 使用better-scroll

 better-scroll  api文档https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

一：安装better-scroll 插件

cnpm install better-scroll --save

二：引入

import Bscroll from 'better-scroll'

三：使用

页面结构要符合这样的，不一定非要div->ul->li但是必须最外层div要包裹一个大包

<div class="wrapper"><ul class="content"><li>...</li><li>...</li>
    ...</ul><!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

示例代码

<template><div class="recommend_box" ref='wrapper'><ul class="my_list"><li v-for="item in arr">第一条数据</li></ul></div>
</template><script>import Bscroll from 'better-scroll'export default{data(){return{arr:["1","2","3","4","5","6","7","8","9","10","1","2","3","4","5","6","7","8","9","10"]}},mounted(){this.$nextTick(() => {this.scroll = new Bscroll(this.$refs.wrapper);});}}
</script><style scoped="scoped" lang="stylus">.recommend_box{overflow: hidden;height:5rem;/*position: absolute;top:7rem;left:0;right:0;bottom: 0;*/}.my_list{padding: 0.2rem;}
</style>

这里具体说说style样式问题：

这里分两种：

style_one:设置一个高度然后设置溢出隐藏

overflow: hidden;
height:5rem;

style_two:设置定位以及溢出隐藏

position: absolute;
top:7rem;
left:0;
right:0;
bottom: 0;

这两种方式都可以实现，但是style_two会出现时好时坏的情况。