安装

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

网站导航

网站导航