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

时间：2023-07-01 14:05 阅读数：351 人阅读分类：知识百科

　　我们在看电视或是直播时，会看到一些流动字幕，如此奇妙的操作大家是不是都很喜欢呢?那么有没有什么办法可以自己来实现视频上的流动字幕呢?相信不少人都想要学习了解一下。接下来小编就给大家介绍一下流动字幕的微信小程序的实现小技巧。

　　wxml代码如下：

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

　　文字是从右往左移动，文字出现的位置top是随机，left则是取屏幕的宽度。移动的时候是用定时器进行处理。

　　还有就是字体的颜色是随机出现的。这些功能都是利用js处理的。微信小程序开发入门点这里。

　　因为刚刚接触小程序，所以对一些语句的使用都不是很了解。所以遇到了一些问题：

　　1、在js中获取wxml的控件的信息。

　　js：

　　barrageSwitch: function(e){

　　console.log(e);

　　}

　　wxml：

　　结果：返回了一个objec.在控制台返回的类型好像都是json格式的数据。

　　Object {type: "change", timeStamp: 2766, target: Object, currentTarget: Object, detail: Object}

　　2、在实现弹幕的时候，点击发射按钮，如何获取到输入框的信息。

　　在这，我是输入框失去焦点的时候，将数据复制给js中的data类，再点击发射的时候取data类中的值。

　　3、其中最大的问题是如何让文字跑起来，因为小程序不支持jQuery，让我这个js白痴有点无能为力。

　　在这说说自己让文字移动的思路：

　　首先，在打开弹幕的时候定义一个定时器，关闭的弹幕的时候把定时器给关掉。因为我是用数组来存储文字移动的样式，其他确定下来。我只要改变left的大小就可以让文字移动。所以我用for循环，当定时器运行的时候改变弹幕文字样式 left：xxx px;的大小。

　　我们再看视频时，不时会被视频上的流动字幕所吸引，那么我们可以自己设置实现这一小技能吗?又该怎么实现流动字幕的小程序呢?以上便是小编为大家提供的流动字幕的微信小程序的实现技巧。如果想要了解更多关于微信公众号的内容，请多多关注微微风。