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会出现时好时坏的情况。