温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序全屏滚动字幕如何实现

发布时间:2022-08-24 10:51:11 阅读:493 作者:iii 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

今天小编给大家分享一下微信小程序全屏滚动字幕如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

实现效果

微信小程序全屏滚动字幕如何实现

实现代码

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

zimu.wxss

/* pages/zimu/zimu.wxss */
/* xm.wxss是一个字体样式文件,可不要 */
/*@import '../../style/xm.wxss';*/
page {
  background: black;
  width100%;
  height100%;
}
.parent {
  height100%;
  width100%;
  position: relative;
  z-index1;
}
.marqueeView1 {
  position: absolute;
  z-index2;
  height100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width100%;
  margin10rpx auto;
  overflow: hidden;
  /* background: #fff; */
  border-radius5px;
  padding5px;
  box-sizing: border-box;
}
.marqueeText1 {
  color: white;
  font-size250rpx;
  font-family"DS-Digital";
  /* font-family: "Courier New", Courier, monospace; */
  white-space: nowrap;
  /* infinite无限循环 10s*/
  animation10s loop linear infinite normal;
  display: inline-block;
  vertical-align: top;
}
@keyframes loop {
  0% {
    transformtranslateX(350px);
    -webkit-transformtranslateX(350px);
  }
  100% {
    transformtranslateX(-100%);
    -webkit-transformtranslateX(-100%);
  } 
}
@-webkit-keyframes loop {
  0% {
    transformtranslateX(1000px);
    -webkit-transformtranslateX(1000px);
  }
  100% {
    transformtranslateX(-75%);
    -webkit-transformtranslateX(-75%);
  }
}
.topview {
  position: absolute;
  z-index4;
  margin-top10rpx;
}
.topback {
  margin-left20rpx;
  padding10px;
  width30px;
  height30px;
  /* 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,
    })
  },

滚动速度

微信小程序全屏滚动字幕如何实现

(1)新增一个时间变量,在wxss中引用,这个during来自于wxml中定义

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

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

(2)控制滚动速度的是一个radioGroup组件,内含三个radio单选按钮,通过绑定bindChange事件获取单选按钮的值传到下一个界面使用

(3)根据文字的长度和选择的滚动速度计算出动画所需要的事件,这里默认正常速度一个字一秒。

data: {
    mark:'测试滚动字幕',
    speed2,
    during:10,
    marqueeWidth:0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  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:''
     })
  },

四、后续优化

1,可以添加动态表情图片

2,可以添加修改文字颜色

3,可以添加语音播报

以上就是“微信小程序全屏滚动字幕如何实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×