更新记录
1.0.1(2024-07-05) 下载此版本
修改在不显示滑动条的时候去计算滑动距离导致报错问题。
1.0.0(2024-07-01) 下载此版本
初始版本
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
wm-scroll-x 无名-横向滑动组件
介绍
在插件市场上面没找到好用的横向滑动组件,所以参考了几个然后自己写了一个。
使用组合式 Api 写的,兼容 vue2,vue3。
组件本身不进行元素展示,只负责横向滑动。所要展示的内容通过默认插槽传递。
只测试过微信小程序,其他平台未经测试。
组件属性参数
属性名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
barWidth |
Number | 120rpx |
滑动条的宽度。 |
barColor |
String | #007AFF |
滑动条的颜色。 |
barBackground |
String | #ccc |
滑动条的背景颜色。 |
barShow |
Boolean | true |
控制滑动条是否显示。默认为 true ,即显示滑动条。 |
dataSource |
Array | [] |
数据源数组。 |
column |
Number | 5 | 首屏布局的列数,默认为 5 列。 |
row |
Number | 2 | 布局的行数,默认为 2 行。 |
gardWidth |
Number | 0 | 元素的宽度,单位为 rpx,默认为 0(根据列数自动计算宽度)。 |
direction |
String | 'row' |
排列方向,可选值为 'row' (水平排列,默认值)或 'column' (垂直排列)。 |
使用
<wm-scroll-x
:dataSource="dataList"
:barWidth="120"
:gardWidth="0"
:row="2"
:column="5"
:direction="'row'"
:barShow="true"
>
<view v-for="(item, index) in dataList" :key="index" class="img-item">
<image :src="item.pic" mode="scaleToFill" class="img"></image>
<view class="text">{{ item.category_name }}</view>
</view>
</wm-scroll-x>
完整例子在 demo.vue 文件