先演示


上代碼
index.wxml

<view class="background-view"><!-- 需要使用 button 來(lái)授權(quán)登錄 --><view style="left:{{marginLeft}}px; color:{{color}}; font-size:{{fontSize}}px" class="text">{{content}}</view><view class="page-body" style="visibility:{{hidden}}"><form catchsubmit="formSubmit" catchreset="formReset"><view class="page-section page-section-gap"><radio-group name="color"><label style="color:red"><radio value="red"/>紅</label><label style="color:white"><radio value="white"/>白</label></radio-group></view><view class="page-section" style="color:white"><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_input"><view class="weui-cell__bd" style="margin: 30rpx 0" ><input type="text" class="weui-input" name="content" placeholder="內(nèi)容" /><input type="number" class="weui-input" name="fontSize" placeholder="字體大小" /><input type="number" class="weui-input" name="speed" placeholder="顯示速度" /></view></view></view></view><view class="btn-area"><button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button><button style="margin: 30rpx 0" formType="reset">Reset</button></view></form></view><view class="text">本軟件已申請(qǐng)知識(shí)產(chǎn)權(quán)保護(hù)，請(qǐng)選擇正規(guī)購(gòu)買(mǎi)渠道，否則一經(jīng)發(fā)現(xiàn)我們將追究法律責(zé)任。 #版本區(qū)別一覽表：</view> </view>

index.json

{"navigationStyle": "custom" }

index.js

// canvas.js var helloData = {name: 'Weixin',systemInfo:{},windowInfo:{},widthP: 100,heightP: 100,leftFlag: false,speed: 60,marginLeft:-100,color: "#ff6f10", //按鈕顏色disabled: false, //是否可以點(diǎn)擊getCode: "開(kāi)始滾動(dòng)", //顯示文字hidden:'',text:'', }Page({data: helloData,changeName: function(e) {// sent data change to viewthis.setData({name: 'MINA'})},onReady() {wx.getSystemInfo({success: (result) => {console.log(result)this.setData({systemInfo:result,marginLeft:result.windowWidth})},}),wx.setNavigationBarColor({frontColor: '#000000',backgroundColor: '#000000'})// wx.setBackgroundColor({// backgroundColor: '#000000',// })// const query = wx.createSelectorQuery()// query.select('#myCanvas')// .fields({ node: true, size: true })// .exec((res) => {// const canvas = res[0].node// const ctx = canvas.getContext('2d')// const dpr = wx.getSystemInfoSync().pixelRatio// canvas.width = res[0].width * dpr// canvas.height = res[0].height * dpr// ctx.scale(dpr, dpr)// ctx.fillRect(0, 0, 100, 100)// ctx.fillStyle = "red"// ctx.fontSize = 48// ctx.fillText('hello world',100,100)// })// }},sendCode: function(e) {var that = this;var times = 0var i = setInterval(function() {times++if (times >= 99999999) {that.setData({color: "#ff6f10",disabled: false,getCode: "開(kāi)始滾動(dòng)",})clearInterval(i)} else {console.log(times)if(times>80){times=-20}that.setData({getCode: "重新獲取" + times + "s",marginLeft:times*5,disabled: true,})}}, 100) } , formSubmit(e) {console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value);const settingInfo = e.detail.value;if(settingInfo.content===""){wx.showToast({icon:'error',title: '內(nèi)容必填',})return;}if(settingInfo.speed===""){wx.showToast({icon:'error',title: '速度必填',})return; }settingInfo.fontSize=Number(settingInfo.fontSize);if(settingInfo.fontSize===""){wx.showToast({icon:'error',title: '字體大小必填',})return;}if(settingInfo.color===""){wx.showToast({icon:'error',title: '字體顏色必填',})return;}this.setData({color: settingInfo.color,speed: Number(settingInfo.speed),content:settingInfo.content,fontSize:Number(settingInfo.fontSize),hidden:'hidden'})console.log(this.data)var that = this;var times = 0const speed = this.data.speedconst windowWidth = this.data.systemInfo.windowWidthvar marginLeft = windowWidthconst textLength = this.data.content.lengthconst fontSize = this.data.fontSizevar i = setInterval(function() {times++marginLeft-=speedif (times >= 99999999) {that.setData({color: "#ff6f10",disabled: false,getCode: "開(kāi)始滾動(dòng)",})clearInterval(i)} else {console.log('times:',times,'marginLeft',marginLeft)console.log(fontSize*textLength)if(marginLeft<-textLength*fontSize){marginLeft=windowWidth}that.setData({getCode: "重新獲取" + times + "s",marginLeft:marginLeft,})}}, 50) },})

index.wxss

page{height:100% }.background-view{position: relative;background-color: #000000;height: 100%; }.text{position: relative;margin-top: 200px;white-space: nowrap; /*規(guī)定文本不進(jìn)行換行*/ }

總結(jié)

以上是生活随笔為你收集整理的微信小程序滚动字幕的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。