安装
npm install vue-happy-scroll --save-dev
全局注册
import HappyScroll from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
Vue.use(HappyScroll)
使用
组件
<!-- 外层盒子,在这里限制宽和高 -->
<div style="height:200px;width:300px;background-color:#ccc;">
<!-- 这里的标签名称要和main.js文件中定义的组件名称保持一致 -->
<happy-scroll color="rgba(0,0,0,0.5)" size="5">
<!-- 内层盒子——内容区 -->
<div class="con">
<p>内容项</p>
<p>内容项</p>
<p>内容项</p>
</div>
</happy-scroll>
</div>
属性
颜色:color属性
<happy-scroll color="rgba(51,51,51,0.2)">
<!-- 你的内容 -->
</happy-scroll>
<!-- 建议使用rgba,也可以使用英文单词等 -->
<happy-scroll color="red">
</happy-scroll>
粗细:size属性
<happy-scroll size="8">
<!-- 你的内容 -->
</happy-scroll>
监听容器大小变化:resize属性
<happy-scroll resize>
<!-- 你的内容 -->
</happy-scroll>
文档
查看其他属性及参数设置
happy-scroll
swift