本文主要是介绍基于uni-app框架封装的插件：支持app/apk、H5、微信小程序的内容可上下左右滚动，文字滚动，图片滚动，元素滚动;欢迎试用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
优化之前微信小程序原生写的跑马灯。先看效果：
功能简介
- 文字左右跑马灯
- 文字上下滚栏
- 左右滚动区域(自定义内容)
- 上下滚动区域(自定义内容)
- 样式自定义
- 多端使用
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: "#333", //字体颜色back_color: "red", //背景色这篇关于基于uni-app框架封装的插件：支持app/apk、H5、微信小程序的内容可上下左右滚动，文字滚动，图片滚动，元素滚动;欢迎试用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
