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

?

轉載于:https://www.cnblogs.com/wanan-01/p/10119383.html

總結

以上是生活随笔為你收集整理的vue-cli 使用better-scroll的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。