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

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

功能简介

  1. 文字左右跑马灯
  2. 文字上下滚栏
  3. 左右滚动区域(自定义内容)
  4. 上下滚动区域(自定义内容)
  5. 样式自定义
  6. 多端使用

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", //背景色
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值