本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > JavaScript >

收藏
分享到

微信小程序全屏滚动字幕的实现方法

JavaScript 来源：互联网 作者：佚名 发布时间：2022-08-23 19:49:54 人浏览
摘要

实现效果 一、实现背景 无意中在某音上看到用手机横屏作为广告屏的视频，大部分都是用第三方软件实现的； 以及在汽车后挡风玻璃放置提醒字样的视频，这种基本是要花钱买屏幕，

实现效果

一、实现背景

无意中在某音上看到用手机横屏作为广告屏的视频，大部分都是用第三方软件实现的；

以及在汽车后挡风玻璃放置提醒字样的视频，这种基本是要花钱买屏幕，通过手机控制屏幕内容；

遂想实现这种效果

二、实现代码

1，滚动字幕

zimu.wxml，界面布局，很简单，没啥特别的，顶部一个返回按钮，为了不影响整体效果，可以把这个按钮做成透明的图片放上去；除了那个按钮剩下的就是滚动的字幕组件了

1

2

3

4

5

6

7

8

9

<!--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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

/* 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，背景色为黑色

1

2

3

4

5

6

7

{

  "usingComponents": {},

  "pageOrientation": "landscape",

  "navigationBarBackgroundColor": "#000000",

  "navigationStyle": "custom",

  "navigationBarTextStyle": "white"

}

zimu.js，主要是onload函数，接收了上一个界面的传参，把内容和滚动速度参数传过来，当然也可以加其他参数，比如说字体颜色等

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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;

1

<text class="marqueeText1" style="--during--:{{during}}s;" decode>&nbsp;&nbsp;{{mark}}</text>

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

data: {

    mark:'测试滚动字幕',

    speed: 2,

    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跟在文字的后面

1

2

3

<view  class='clear-clear'>

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

</view>

1

2

3

4

5

clearInput: function (e) {

  this.setData({

    mark:''

   })

},

四、后续优化

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

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

3，可以添加语音播报
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/diyangxia/article/details/126421029
相关文章
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计