主题
LimeMarquee 跑马灯组件
一个支持横向/纵向不间断滚动的跑马灯组件,用于展示循环滚动的内容。支持自定义滚动方向、速度和延迟时间等配置,可用于公告、消息轮播、中奖信息展示等多种场景。组件提供了简洁的接口,可以满足各种滚动展示需求。
插件依赖:
lime-shared
、lime-style
文档链接
📚 组件详细文档请访问以下站点:
安装方法
代码演示
基础用法
最简单的跑马灯组件用法,为了实现无缝滚动,数据必须是两份拼接。
html
<l-marquee style="height: 200rpx">
<view
v-for="(item, i) in data"
:key="i"
style="
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 16rpx;">
<view>{{ item }}</view>
<text style="color: #999;">02-15</text>
</view>
</l-marquee>
js
const kungFuManuals = ['九阳真经', '九阴真经', '易筋经', '神照经', '北冥神功', '吸星大法', '独孤九剑', '降龙十八掌'];
const genDataWithRandomManual = () => {
return '郭靖 黄蓉 杨过 小龙女 令狐冲 任盈盈 张无忌 赵敏'.split(' ').map(item => {
const randomIndex = Math.floor(Math.random() * kungFuManuals.length);
return `恭喜${item}获得《${kungFuManuals[randomIndex]}》`;
});
}
const manual = genDataWithRandomManual()
const data = ref([...manual, ...manual])
水平方向滚动
通过设置direction
为horizontal
实现水平方向滚动。
html
<l-marquee direction="horizontal" :speed="520">
<view
v-for="(item, i) in data"
:key="i"
style="flex-direction: row; display: flex; margin-right: 60rpx">
<view style="display: flex;">{{ item }}</view>
<text style="color: #999;">02-15</text>
</view>
</l-marquee>
自定义速度和延迟
可以通过speed
和delay
属性自定义滚动速度和延迟时间。
html
<l-marquee :speed="100" :delay="2000">
<view
v-for="(item, i) in data"
:key="i"
style="margin-bottom: 16rpx;">
<view>{{ item }}</view>
</view>
</l-marquee>
快速预览
导入插件后,可以直接使用以下标签查看演示效果:
html
<!-- 代码位于 uni_modules/lime-marquee/components/lime-marquee -->
<lime-marquee />
插件标签说明
标签名 | 说明 |
---|---|
l-marquee | 组件标签 |
lime-marquee | 演示标签 |
Vue2使用说明
main.js中添加以下代码:
js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
详细配置请参考官方文档:Vue Composition API
API文档
Props 属性说明
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
direction | 滚动方向 | string | vertical |
speed | 滚动速率 | number | 50 |
delay | 延迟滚动时间(毫秒) | number | 1000 |
direction 可选值
值 | 说明 |
---|---|
vertical | 垂直方向滚动 |
horizontal | 水平方向滚动 |
Slots 插槽
名称 | 说明 |
---|---|
default | 跑马灯内容,为了实现无缝滚动,数据必须是两份拼接 |
使用提示
- 为了实现无缝滚动效果,传入的数据需要进行两份拼接,如示例中的
[...manual, ...manual]
- 垂直滚动时,需要为组件设置固定高度,如
style="height: 200rpx"
- 水平滚动时,子元素需要设置合适的间距,如
margin-right: 60rpx
- 组件内部会自动处理滚动逻辑,无需额外的滚动控制代码
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者:
支付宝赞助 | 微信赞助 |
---|---|
![]() | ![]() |