微信小程序全屏滾動(dòng)字幕如何實(shí)現(xiàn)

今天小編給大家分享一下微信小程序全屏滾動(dòng)字幕如何實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

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

1，滾動(dòng)字幕

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

<!--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"  decode>&nbsp;&nbsp;{{mark}}</text>
  </view>
</view>

zimu.wxss

/* pages/zimu/zimu.wxss */
/* xm.wxss是一個(gè)字體樣式文件，可不要 */
/*@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，配置這個(gè)頁(yè)面橫屏展示，landscape，背景色為黑色

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

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

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

滾動(dòng)速度

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

animation: var(--during--) loop linear infinite normal;

<text class="marqueeText1"  decode>&nbsp;&nbsp;{{mark}}</text>

（2）控制滾動(dòng)速度的是一個(gè)radioGroup組件，內(nèi)含三個(gè)radio單選按鈕，通過綁定bindChange事件獲取單選按鈕的值傳到下一個(gè)界面使用

（3）根據(jù)文字的長(zhǎng)度和選擇的滾動(dòng)速度計(jì)算出動(dòng)畫所需要的事件，這里默認(rèn)正常速度一個(gè)字一秒。

data: {
    mark:'測(cè)試滾動(dòng)字幕',
    speed: 2,
    during:10,
    marqueeWidth:0
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  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）給輸入框添加清空按鈕，添加一個(gè)icon跟在文字的后面

  <view  class='clear-clear'>
      <icon type="clear" size="30" catchtap='clearInput'/>
  </view>

  clearInput: function (e) {
    this.setData({
      mark:''
     })
  },

四、后續(xù)優(yōu)化

1，可以添加動(dòng)態(tài)表情圖片

2，可以添加修改文字顏色

3，可以添加語(yǔ)音播報(bào)

以上就是“微信小程序全屏滾動(dòng)字幕如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。