LimeMarquee 跑马灯

跑马灯组件，支持横向/纵向不间断滚动，自定义内容循环衔接 插件依赖lime-style,lime-shared不喜勿下

安装

导入即可，uniapp x app 需要hb4.52及以上

文档

marquee

代码演示

基础使用

为了实现无缝滚动，数据必须是两份拼接

 <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>

const kungFuManuals = ['九阳真经', '九阴真经', '易筋经', '神照经', '北冥神功', '吸星大法', '独孤九剑', '降龙十八掌'];
const genDataWithRandomManual = ():string[] => {
	return '郭靖 黄蓉 杨过 小龙女 令狐冲 任盈盈 张无忌 赵敏'.split(' ').map((item):string => {
		const randomIndex = Math.floor(Math.random() * kungFuManuals.length);
		return `恭喜${item}获得《${kungFuManuals[randomIndex]}》`;
  });
}
const manual = genDataWithRandomManual()
const data = ref([...manual, ...manual])

水平方向

通过设置direction为horizontal水平滚动

 <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>

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-marquee/compoents/lime-marquee -->
<lime-marquee />

插件标签

• 默认 l-marquee 为 component
• 默认 lime-marquee 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

direction: 'vertical' | 'horizontal';
speed: number;
delay: number;

API

Props

参数	说明	类型	默认值
direction	滚动方向，可选'vertical' 'horizontal'	string	vertical
speed	滚动速率	number	50
delay	延迟滚动时间	number	1000

Slots

名称	说明
defalut	默认插槽

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码