setting.vuetemplateviewclasscontainerviewclassboxtextclasstitle滚动字幕设置/textviewclassitemtext字幕内容/texttextareav-modeltextplaceholder请输入滚动文字/textarea/viewviewclassitemtext背景颜色/textinputv-modelbgColortypetextplaceholder默认黑色//viewviewclassitemtext字体颜色/textinputv-modelcolortypetextplaceholder默认红色//view!-- 加了字体大小设置 --viewclassitemtext字体大小默认48rpx/textinputv-modelfontSizetypetextplaceholder例如48rpx、60rpx//viewbuttonclassbtnclickstart开始运行/button/view/view/templatescriptexportdefault{data(){return{text:欢迎使用滚动字幕播报,bgColor:#000,color:#ff0000,fontSize:60rpx// 默认大小}},methods:{start(){if(!this.text)returnuni.showToast({title:请输入内容})uni.navigateTo({url:/pages/scroll/player?text${this.text}bg${this.bgColor}color${this.color}fontSize${this.fontSize}})}}}/scriptstylescoped.container{padding:30rpx;background:#f5f5f5;min-height:100vh;}.box{background:#fff;padding:30rpx;border-radius:16rpx;}.title{font-size:36rpx;font-weight:bold;margin-bottom:30rpx;display:block;text-align:center;}.item{margin-bottom:30rpx;}.item text{font-size:28rpx;margin-bottom:10rpx;display:block;}input, textarea{border:1px solid #ddd;border-radius:8rpx;padding:20rpx;font-size:28rpx;}.btn{background:#42b983;color:#fff;border-radius:10rpx;padding:20rpx;}/styleplayer.vuetemplateviewclassplayer:style{ background: bgColor }dblclicktogglePause!-- 滚动文字 --viewv-ifshowTextclasstext-wrap:style{ top: ${top}px, color: color,fontSize: fontSize }{{ text }}/view!-- 无边框透明返回按钮 --viewclassback-btnclickgoBack返回/view/view/templatescriptexportdefault{onLoad(options){this.textoptions.text||欢迎this.bgColoroptions.bg||#000this.coloroptions.color||#ff0000this.fontSizeoptions.fontSize||60rpx// 接收字体大小this.startScroll()},onUnload(){clearInterval(this.timer)},data(){return{text:,bgColor:,color:,top:0,showText:true,paused:false,timer:null,speed:1.5}},methods:{startScroll(){constscreenHeightuni.getSystemInfoSync().windowHeightthis.topscreenHeightthis.timersetInterval((){if(this.paused)returnthis.top-this.speedconstend-200if(this.topend){this.showTextfalseclearInterval(this.timer)setTimeout((){this.showTexttruethis.startScroll()},2000)}},10)},togglePause(){this.paused!this.paused},goBack(){uni.navigateBack()}}}/scriptstylescoped.player{width:100vw;height:100vh;position:relative;overflow:hidden;}.text-wrap{position:absolute;left:50%;transform:translateX(-50%)rotate(90deg);white-space:nowrap;font-size:48rpx;font-weight:bold;}.back-btn{position:fixed;right:20rpx;bottom:20rpx;font-size:24rpx;color:rgba(255,255,255,0.3);padding:10rpx;}/style