55 lines
2.0 KiB
Markdown
55 lines
2.0 KiB
Markdown
## 滚动组件 (`wc-scroll`)
|
|
> 一个用来模拟替代原生的滚动条的组件。特点是
|
|
>> 1. 更美观的滚动条样式。
|
|
>> 2. 滚动条宽度不占用容器的宽度。
|
|
|
|
|
|
### 使用
|
|
|
|
只需要简单的当把`wc-scroll`当容器, 再设定宽、高即可(宽、高默认继承父级容器)。
|
|
|
|
<wc-sandbox>
|
|
<wc-lang slot="javascript">
|
|
import '//jscdn.ink/@bd/ui/latest/scroll/index.js'
|
|
</wc-lang>
|
|
<wc-lang slot="html">
|
|
<wc-scroll style="width:200px;height:200px;">
|
|
<pre>
|
|
《短歌行》
|
|
对酒当歌，人生几何！
|
|
譬如朝露，去日苦多。
|
|
慨当以慷，忧思难忘。
|
|
何以解忧？唯有杜康。
|
|
青青子衿，悠悠我心。
|
|
但为君故，沉吟至今。
|
|
呦呦鹿鸣，食野之苹。
|
|
我有嘉宾，鼓瑟吹笙。
|
|
明明如月，何时可掇？
|
|
忧从中来，不可断绝。
|
|
越陌度阡，枉用相存。
|
|
契阔谈䜩，心念旧恩。
|
|
月明星稀，乌鹊南飞。
|
|
绕树三匝，何枝可依？
|
|
山不厌高，海不厌深。
|
|
周公吐哺，天下归心。
|
|
</pre>
|
|
</wc-scroll>
|
|
</wc-lang>
|
|
</wc-sandbox>
|
|
|
|
|
|
### 完整APIs
|
|
|
|
| 属性 | 值类型 | 默认值 | 描述 |
|
|
| :-: | :-: | :-: | - |
|
|
| axis | String | `xy` | 设定可滚动的方向, 默认`x、y轴`都可以产生滚动条, 可以指定只有`x`或`y`轴能产生滚动条 |
|
|
| distance | Number | 1 | 触发到底/到顶的最小滚动阀值。可以设置一个你认为合理的值, 可避免轻微滚动时也会触发事件。 |
|
|
| lazy | Number | 1000 | 为按钮设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 不会多次触发触底/触顶事件 |
|
|
|
|
|
|
### 事件
|
|
| 事件名 | 描述 | 回调参数 | 补充说明 |
|
|
| - | - | - | - |
|
|
| @scroll | 滚动时触发 | 无 | 自行读取 `scrollLeft`和`scrollTop`等值 |
|
|
| @reach-top | 滚动到顶时触发 | 无 | 受`lazy`和`distance`属性的制约 |
|
|
| @reach-bottom | 滚动到底时触发 | 无 | 受`lazy`和`distance`属性的制约 | |