微信小程序全屏滾動字幕的實現(xiàn)方法詳解

更新時間：2022年08月23日 17:03:24 作者：xun-ming

這篇文章主要介紹了微信小程序全屏滾動字幕的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、實現(xiàn)背景

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

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

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

二、實現(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ù)傳過來，當然也可以加其他參數(shù)，比如說字體顏色等

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

三、滾動速度

（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ù)文字的長度和選擇的滾動速度計算出動畫所需要的事件，這里默認正常速度一個字一秒。

data: {
    mark:'測試滾動字幕',
    speed: 2,
    during:10,
    marqueeWidth:0
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    console.log(options.mark+options.speed)
    var consumeTime = 10
    if(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，可以添加語音播報

到此這篇關于微信小程序全屏滾動字幕的實現(xiàn)方法詳解的文章就介紹到這了,更多相關小程序全屏滾動字幕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

微信小程序功能之全屏滾動效果的實現(xiàn)代碼

詳解JavaScript UTC時間轉(zhuǎn)換方法
這篇文章主要介紹了JavaScript UTC時間轉(zhuǎn)換方法，介紹了本地時間到UTC時間的轉(zhuǎn)換、UTC日期到本地日期的轉(zhuǎn)換，感興趣的小伙伴們可以參考一下
2016-01-01
微信公眾平臺客服接口發(fā)消息的實現(xiàn)代碼(Java接口開發(fā))
這篇文章主要介紹了微信公眾平臺客服接口發(fā)消息的實現(xiàn)代碼(Java接口開發(fā))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
一行代碼實現(xiàn)純數(shù)據(jù)json對象的深度克隆實現(xiàn)思路
今天整理了下資料，分析下為什么一句話可以實現(xiàn)純數(shù)據(jù)json對象的深度克隆,感興趣的朋友可以了解下哦
2013-01-01
JS實現(xiàn)下拉框的動態(tài)添加(附效果)
頁面初加載時：選擇車類型后：選擇車顏色后：JS實現(xiàn)下拉框的動態(tài)添加，網(wǎng)頁代碼如下：動態(tài)添加下拉框車類型：請選擇寶馬、奔馳車顏色
2013-04-04
js+html5通過canvas指定開始和結(jié)束點繪制線條的方法
這篇文章主要介紹了js+html5通過canvas指定開始和結(jié)束點繪制線條的方法,涉及html5屬性的操作技巧,需要的朋友可以參考下
2015-06-06
JavaScript 更嚴格的相等 [譯]
大部分JavaScript程序員都知道:應該使用嚴格相等(===)來代替“普通”的相等操作(==).但是,有時候你的確需要一個比嚴格相等===更嚴格的運算符,比如說:在你想檢查某個值是否是NaN的時候,又或者你想?yún)^(qū)分-0和+0的時候.本文解釋了相關的知識以及ECMAScript.next中的解決辦法:“is”操作符
2012-09-09
JS實現(xiàn)可切換圖片的幻燈切換效果示例
這篇文章主要介紹了JS實現(xiàn)可切換圖片的幻燈切換效果,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-05-05
事件綁定之小測試 onclick && addEventListener
昨晚回去后，和雷子討論如何才能“檢測”到頁面上某個元素都綁定了哪些事件監(jiān)聽函數(shù)，第一感覺就是應該從瀏覽器入手，比如FF，或者Chrome等
2011-07-07
頁面實時更新時間的JS實例代碼
這篇文章主要介紹了頁面實時更新時間的JS實例代碼，有需要的朋友可以參考一下
2013-12-12
JS對日期操作封裝代碼實例
這篇文章主要介紹了JS對日期操作封裝代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-11-11