流动字幕的微信小程序实现技巧

9158APP 0

流动字幕的微信小程序实现技巧

当我们看电视或者直播的时候,我们会看到一些动人的字幕。这么精彩的手术大家不喜欢吗?那么有没有办法自己实现视频上的动字幕呢?相信很多人都想学习和了解。接下来小编就给大家介绍一下实现带有移动字幕的微信小程序的一些技巧。

wxml代码如下:

wxml代码

wxml代码

这样,基本的样式就实现了。接下来我们需要对弹幕上的文字进行处理。

文本从右向左移动,文本的顶部位置是随机的,左侧位置是屏幕的宽度。移动时,用定时器进行处理。

此外,字体颜色随机出现。这些功能都是使用js来处理的。点击这里开始微信小程序开发。

因为刚刚接触小程序,所以对一些语句的使用不太了解。所以我遇到了一些问题:

1.在js中获取wxml控制信息。

js:

屏障开关:函数(e){

控制台.log(e);

}

wxml:

结果:返回一个对象。控制台返回的类型好像是json格式的数据。

对象{类型:“更改”,时间戳:2766,目标:对象,当前目标:

对象,详细信息:对象}

2、实现弹幕时,点击启动按钮即可获取输入框的信息。

这里,当输入框失去焦点时,我将数据复制到js中的数据类中,然后在点击启动时取数据类中的值。

3.最大的问题是如何让文本运行起来,因为小程序不支持jQuery,这让我这个js白痴有点无奈。

先说一下我的移动文字的想法:

首先定义一个打开弹幕时的定时器,关闭弹幕时关闭定时器。因为我用数组来存储文字移动样式,所以剩下的就确定了。我只需要更改左侧的大小即可使文本移动。所以我用一个for循环来改变定时器运行时的弹幕文字样式。

左:xxx px 的大小;

我们在看视频的时候,时不时就会被视频上流动的字幕所吸引。那么这个小技能我们可以自己设置吗?而动字幕小程序又是如何实现的呢?以上是小编提供的流程。带字幕的微信小程序实现技巧。