更新记录
0.0.5(2025-08-31) 下载此版本
- chore: 更新文档
0.0.4(2025-04-25) 下载此版本
- feat: 兼容uniappx 鸿蒙next
0.0.3(2025-04-04) 下载此版本
- feat: 增加
indicator
属性,用于是否显示指示器
平台兼容性
uni-app(4.74)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | 5.0 | √ | √ |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.75)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
√ | √ | 5.0 | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | √ | × |
lime-scroll-x 横向滚动组件
一个功能丰富的横向滚动组件,用于展示横向滚动内容。支持自定义指示器、滑块颜色、宽度、高度等多种配置,可用于商品分类、导航菜单、图片轮播等多种场景。组件提供了丰富的自定义选项,可以满足各种横向滚动展示需求。
插件依赖:
lime-shared
、lime-style
文档链接
📚 组件详细文档请访问以下站点:
安装方法
- 在uni-app插件市场中搜索并导入
lime-scroll-x
- 导入后可能需要重新编译项目
- 在页面中使用
l-scroll-x
组件
代码演示
基础用法
最简单的横向滚动组件用法,将需要横向滚动的内容放在组件内部。
<l-scroll-x>
<view class="grid">
<view class="item" v-for="(item, index) in 10" :key="index">
<image mode="widthFix" class="item-img" src="https://example.com/image.png"></image>
<text class="item-text">商品{{index + 1}}</text>
</view>
</view>
</l-scroll-x>
.grid {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.item-img {
width: 40px;
}
.item-text {
padding: 5px;
font-size: 12px;
white-space: nowrap;
}
自定义指示器样式
设置指示器的宽度、高度、颜色等属性。
<l-scroll-x
track-width="100px"
track-height="6px"
track-color="#f5f5f5"
bar-width="30px"
bar-color="#1989fa"
>
<view class="grid">
<!-- 内容项 -->
</view>
</l-scroll-x>
隐藏指示器
设置不显示底部指示器。
<l-scroll-x :indicator="false">
<view class="grid">
<!-- 内容项 -->
</view>
</l-scroll-x>
快速预览
导入插件后,可以直接使用以下标签查看演示效果:
<!-- 代码位于 uni_modules/lime-scroll-x/components/lime-scroll-x -->
<lime-scroll-x />
插件标签说明
标签名 | 说明 |
---|---|
l-scroll-x |
组件标签 |
lime-scroll-x |
演示标签 |
Vue2使用说明
main.js中添加以下代码:
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
详细配置请参考官方文档:Vue Composition API
API文档
Props 属性说明
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
trackWidth | 指示器轨道宽度 | string | - |
trackHeight | 指示器轨道高度 | string | - |
trackColor | 指示器轨道背景色 | string | - |
barColor | 指示器滑块颜色 | string | - |
barWidth | 指示器滑块宽度 | string | - |
indicator | 是否显示指示器 | boolean | true |
Events 事件
事件名 | 说明 | 回调参数 |
---|---|---|
scroll | 滚动时触发 | event: Event |
Slots 插槽
名称 | 说明 |
---|---|
default | 需要横向滚动的内容 |
主题定制
组件提供了以下CSS变量,可用于自定义样式:
变量名称 | 默认值 | 描述 |
---|---|---|
--l-scrollx-track-width |
24px |
指示器轨道宽度 |
--l-scrollx-track-height |
4px |
指示器轨道高度 |
--l-scrollx-track-color |
$gray-3 |
指示器轨道背景色 |
--l-scrollx-bar-color |
$primary-color |
指示器滑块颜色 |
--l-scrollx-bar-width |
12px |
指示器滑块宽度 |
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者:
支付宝赞助 | 微信赞助 |
---|---|
![]() |
![]() |