基于uni-app框架封装的插件：支持app/apk、H5、微信小程序的内容可上下左右滚动，文字滚动，图片滚动，元素滚动;欢迎试用

最新推荐文章于 2025-06-16 11:13:23 发布

置顶

G.Bro

最新推荐文章于 2025-06-16 11:13:23 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： uin-app 微信小程序 vue

本文链接：https://blog.youkuaiyun.com/fasdfdssdf/article/details/106100569

本文介绍了一款基于uni-app框架封装的滚动插件，支持app、apk、H5和微信小程序，包含文字左右滚动、上下滚动及自定义元素滚动功能。提供详细的options参数说明和使用示例，并附有插件下载地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

优化之前微信小程序原生写的跑马灯。先看效果：
在这里插入图片描述

功能简介

文字左右跑马灯
文字上下滚栏
左右滚动区域(自定义内容)
上下滚动区域(自定义内容)
样式自定义
多端使用

options参数说明

参数	说明	类型	默认值	可选值	注意项
broadcastType	滚动类型	String	text	mould/text	无
direction	滚动方向	String	left	top/bottom/left/right	无
viewHeight	滚动区域可视高度	Number	400	–	单位:rpx; direction：left和right且broadcastType为"text"情况下不可用
broadcastStyle	滚动区域样式	Object	{speed: 30,font_size: “28”,text_color: “#333”,back_color: “red”,}	–	mould模式下根据需求只传：{speed：***}即可
broadcastData	文字滚动数据	Array	–	–	text模式下可用
broadcastIconIsDisplay	文字滚动图标是否显示	Boolean	false	true/false	text模式下方向为left/right可用
broadcast_tit	文字滚动标题	String	今日热点	–	text模式下方向为left/right可用
touchEvent	指尖触摸暂停动画	Boolean	false	true/false	–

参数	说明
broadcastStyle.speed	mould模式下speed为每秒走N像素；text模式下speed为每秒走N 个字

使用方式

#文字广播跑马灯类型(left/right)：
js:

    <script>
    	import gbroMarquee from '../../components/GBroMarquee/marquee.vue'
    	export default {
   
   
    		data() {
   
   
    			return {
   
   
    				broadcastData: ['秒秒天天答复是短发分公司噶阿飞嘎斯在', '分分答复是短发分公司噶阿飞嘎斯在', '时时答复是短发分公司噶阿飞嘎斯在', '天天答复是短发分公司噶阿飞嘎斯在',
    					'月月答复是短发分公司噶阿飞嘎斯在', '年年答复是短发分公司噶阿飞嘎斯在'
    				],
    				broadcastStyle: {
   
   
    					speed: 3, //每秒3个字
    					font_size: "32", //字体大小(rpx)
    					text_color