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會出現時好時壞的情況。

?