實(shí)現(xiàn)效果

一，實(shí)現(xiàn)背景

無意中在某音上看到用手機(jī)橫屏作為廣告屏的視頻，大部分都是用第三方軟件實(shí)現(xiàn)的；

以及在汽車后擋風(fēng)玻璃放置提醒字樣的視頻，這種基本是要花錢買屏幕，通過手機(jī)控制屏幕內(nèi)容；

遂想實(shí)現(xiàn)這種效果

二，實(shí)現(xiàn)代碼

1，滾動字幕
zimu.wxml，界面布局，很簡單，沒啥特別的，頂部一個返回按鈕，為了不影響整體效果，可以把這個按鈕做成透明的圖片放上去；除了那個按鈕剩下的就是滾動的字幕組件了

<!--pages/zimu/zimu.wxml--> <view class="parent"><view class="topview"><image class="topback" src="/image/clock_back.png" mode="widthFix" bindtap="onBack"/></view><view class="marqueeView1"><text class="marqueeText1" style="--during--:{{during}}s;" decode>&nbsp;&nbsp;{{mark}}</text></view> </view>

zimu.wxss

/* pages/zimu/zimu.wxss */ /* xm.wxss是一個字體樣式文件，可不要 */ /*@import '../../style/xm.wxss';*/page {background: black;width: 100%;height: 100%; }.parent {height: 100%;width: 100%;position: relative;z-index: 1; }.marqueeView1 {position: absolute;z-index: 2;height: 100%;display: flex;align-items: center;justify-content: center;width: 100%;margin: 10rpx auto;overflow: hidden;/* background: #fff; */border-radius: 5px;padding: 5px;box-sizing: border-box; }.marqueeText1 {color: white;font-size: 250rpx;font-family: "DS-Digital";/* font-family: "Courier New", Courier, monospace; */white-space: nowrap;/* infinite無限循環(huán) 10s*/animation: 10s loop linear infinite normal;display: inline-block;vertical-align: top; }@keyframes loop {0% {transform: translateX(350px);-webkit-transform: translateX(350px);}100% {transform: translateX(-100%);-webkit-transform: translateX(-100%);} }@-webkit-keyframes loop {0% {transform: translateX(1000px);-webkit-transform: translateX(1000px);}100% {transform: translateX(-75%);-webkit-transform: translateX(-75%);} }.topview {position: absolute;z-index: 4;margin-top: 10rpx; }.topback {margin-left: 20rpx;padding: 10px;width: 30px;height: 30px;/* background: red; */ }

zimu.json，配置這個頁面橫屏展示，landscape，背景色為黑色

{"usingComponents": {},"pageOrientation": "landscape","navigationBarBackgroundColor": "#000000","navigationStyle": "custom","navigationBarTextStyle": "white" }

zimu.js，主要是onload函數(shù)，接收了上一個界面的傳參，把內(nèi)容和滾動速度參數(shù)傳過來，當(dāng)然也可以加其他參數(shù)，比如說字體顏色等

data: {mark:'測試滾動字幕',marqueeWidth:0},onBack: function(){ wx.navigateBack({delta:1})},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options) {this.setData({mark: options.mark,})},

2，滾動速度

（1）新增一個時間變量，在wxss中引用，這個during來自于wxml中定義

animation: var(--during--) loop linear infinite normal; <text class="marqueeText1" style="--during--:{{during}}s;" decode>&nbsp;&nbsp;{{mark}}</text>

（2）控制滾動速度的是一個radioGroup組件，內(nèi)含三個radio單選按鈕，通過綁定bindChange事件獲取單選按鈕的值傳到下一個界面使用
（3）根據(jù)文字的長度和選擇的滾動速度計(jì)算出動畫所需要的事件，這里默認(rèn)正常速度一個字一秒。

data: {mark:'測試滾動字幕',speed: 2,during:10,marqueeWidth:0},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options) {console.log(options.mark+options.speed)var consumeTime = 10if(options.speed == 1){consumeTime = options.mark.length * 2}else if(options.speed == 2){consumeTime = options.mark.length}else if(options.speed == 3){consumeTime = options.mark.length / 2}this.setData({mark: ' '+options.mark,during: consumeTime})},

（4）給輸入框添加清空按鈕，添加一個icon跟在文字的后面

<view class='clear-clear'><icon type="clear" size="30" catchtap='clearInput'/></view> clearInput: function (e) {this.setData({mark:''})},

三，后續(xù)優(yōu)化

1，可以添加動態(tài)表情圖片
2，可以添加修改文字顏色
3，可以添加語音播報(bào)

四，效果體驗(yàn)

大家可以掃描下方的小程序碼來簡單體驗(yàn)下這個全屏滾動字幕功能，在首頁 -> 實(shí)際支出 按鈕點(diǎn)進(jìn)去即可看到

總結(jié)

以上是生活随笔為你收集整理的【微信小程序】实现手机全屏滚动字幕的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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