vue 使用Better－Scroll

 注意點

1. 外層容器wrapper要設置高度，而且overflow:hidden。

2. wrapper裏面的須要一個div包裹全部內容

3. 樣式成功

4. 

以上就是能夠滾動的狀況，wrapperHeight(616) < scrollHeight(750)，hasVerticalScroll爲true；

 

 1 <template>
 2   <div class="home">
 3     <!--定義外層-->
 4     <div class="wrapper" ref="wrapper">
 5         <!--定義須要滾動的內容區域-->
 6         <ul class="content">
 7             <li v-for="(item,index) in 50" :key="index">hello world hello world</li>
 8         </ul>
 9     </div>
10   </div>
11 </template>
12 
13 <script>
14 import BScroll from 'better-scroll'
15 export default {
16   name: 'Home',
17   mounted () {
18     this.$nextTick(() => {
19       this.scroll = new BScroll(this.$refs.wrapper, {})
20       console.log(this.scroll)
21     })
22   }
23 }
24 </script>
25 
26 <style>
27 .wrapper{
28   position: absolute;
29   left: 0;
30   top: 40px;
31   overflow: hidden;
32   height: 500px;
33 }
34 </style>

 

參考資料

https://blog.csdn.net/qiqi_77_/article/details/79361413

https://blog.csdn.net/qq_36457584/article/details/80856158