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

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

wxml代码如下：

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

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

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

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

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

js：

barrageSwitch: function(e){

console.log(e);

}

wxml：

switch id="switch_" bindchange="barrageSwitch">switch>

结果：返回了一个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;的大小。

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

鱼爪创媒是一家专业提供公众号交易、公众号迁移、公众号增粉、公众号买卖交易的平台，如果您有这方面的需求，欢迎电话咨询：13018202357。有任何疑问，可以 【立即咨询】 我们平台的客服或者添加微信号 【13018202357】 。此文章来源于网络,如有侵权,请联系删除