實現效果

一，實現背景

無意中在某音上看到用手機橫屏作為廣告屏的視頻，大部分都是用第三方軟件實現的；

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

遂想實現這種效果

二，實現代碼

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無限循環 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函數，接收了上一個界面的傳參，把內容和滾動速度參數傳過來，當然也可以加其他參數，比如說字體顏色等

data: {mark:'測試滾動字幕',marqueeWidth:0},onBack: function(){ wx.navigateBack({delta:1})},/*** 生命周期函數--監聽頁面加載*/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組件，內含三個radio單選按鈕，通過綁定bindChange事件獲取單選按鈕的值傳到下一個界面使用
（3）根據文字的長度和選擇的滾動速度計算出動畫所需要的事件，這里默認正常速度一個字一秒。

data: {mark:'測試滾動字幕',speed: 2,during:10,marqueeWidth:0},/*** 生命周期函數--監聽頁面加載*/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:''})},

三，后續優化

1，可以添加動態表情圖片
2，可以添加修改文字顏色
3，可以添加語音播報

四，效果體驗

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。