主题
HorizontalScroll 横向滚动容器
提供横向滚动区域和可选的自定义滚动条。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 横向滚动内容 -->
<fui-horizontal-scroll>
<view style="width: 1000rpx">横向滚动区域</view>
</fui-horizontal-scroll>属性
尺寸和间距的单位为 rpx。
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| marginTop | Number / String | 上外边距 | 0 |
| marginBottom | Number / String | 下外边距 | 0 |
| scroll | Boolean | 是否显示自定义滚动条 | true |
| scrollWidth | Number / String | 滚动条轨道宽度 | 96 |
| scrollBarWidth | Number / String | 滚动条滑块宽度 | 32 |
| scrollHeight | Number / String | 滚动条高度 | 8 |
| scrollCap | String | 滚动条端点形状：square 或 round | round |
| scrollBarColor | String | 滚动条滑块颜色 | #465CFF |
| background | String | 滚动条轨道颜色 | #EEEEEE |
| scrollGap | Number / String | 内容与滚动条的间距 | 24 |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| scrolltoupper | 滚动到左边缘时触发 | 无 |
| scrolltolower | 滚动到右边缘时触发 | 无 |
插槽
| 插槽 | 说明 |
|---|---|
| default | 横向滚动内容 |
平台说明
非 nvue 平台可通过 --fui-color-primary 调整默认滑块颜色。