首页 > 小程序 > 微信小程序滚动字幕及弹幕的实现技巧

微信小程序滚动字幕及弹幕的实现技巧

发布:2018-01-05 12:07:41来源:小青年阅读:2706

  今天小编来给大家介绍一个新的微信小程序,那就是微信小程序滚动字幕及弹幕的实现技巧。这项功能相信好多的微信用户都不太知道,也不知道到底这项功能是干嘛的,所以大家就跟着小编不妨一起来看看吧。希望对大家有所帮助。

  微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧相关的内容。

  现在网上的demo是多,但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。微信小程序开发入门点这里。

  先来一张效果:

  wxml代码如下:

  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

  弹幕

  发射

  {{item.barrage_shootText}}

  wxss代码如下:

  /* pages/index/index.wxss */

  .slide-image{

  width: 100%;

  }

  /* 弹幕选择按钮的操作*/

  .barrage-Switch{

  position: absolute;

  bottom: 10px;

  right: 10px;

  z-index: 2;

  }

  /* 弹幕输入框的操作*/

  .barrage-inputText{

  position: absolute;

  display: flex;

  background-color: #BFBFBF;

  width: 100%;

  height: 40px;

  flex-direction: row;

  nav-index: 2;

  justify-content: center;

  align-items: center;

  bottom: 10%;

  }

  .barrage-input{

  background-color: greenyellow;

  width: 60%;

  height: 30px;

  }

  .barrage-shoot{

  margin-left: 10px;

  width: 25%;

  height: 30px;

  }

  .shoot{

  width: 100%;

  color: black;

  }

  /*弹幕飞飞飞*/

  .barrage-fly{

  z-index: 3;

  height: 80%;

  width: 100%;

  position: absolute;

  top: 0;

  }

  .barrage-textFly{

  position: absolute;

  }

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

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

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

微信弹幕

  js的代码如下:

  var barrage_style_arr = [];

  var barrage_style_obj ={};

  var phoneWidth = 0;

  var timers = [];

  var timer ;

  Page({

  data: {

  imgUrls: [

  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

  ],

  indicatorDots: true,

  autoplay: true,

  interval: 3000,

  duration: 500,

  barrageTextColor:"#D3D3D3",

  barrage_inputText:"none",

  barrage_shoottextColor:"black",

  bind_shootValue:"",

  barrage_style:[],

  barragefly_display:"none",

  },

  // 生命周期函数--监听页面加载

  onLoad:function(options){

  var that = this;

  //获取屏幕的宽度

  wx.getSystemInfo({

  success: function(res) {

  that.setData({

  barrage_phoneWidth:res.windowWidth-100,

  })

  }

  })

  phoneWidth = that.data.barrage_phoneWidth;

  console.log(phoneWidth);

  },

  //是否打开弹幕...

  barrageSwitch: function(e){

  console.log(e);

  //先判断没有打开

  if(!e.detail.value){

  //清空弹幕

  barrage_style_arr = [];

  //设置data的值

  this.setData({

  barrageTextColor:"#D3D3D3",

  barrage_inputText:"none",

  barragefly_display:"none",

  barrage_style:barrage_style_arr,

  });

  //清除定时器

  clearInterval(timer);

  }else{

  this.setData({

  barrageTextColor:"#04BE02",

  barrage_inputText:"flex",

  barragefly_display:"block",

  });

  //打开定时器

  timer= setInterval(this.barrageText_move,800)

  }

  },

  //发射按钮

  shoot: function(e){

  //字体颜色随机

  var textColor = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";

  // //设置弹幕字体的水平位置样式

  // var textWidth = -(this.data.bind_shootValue.length*0);

  //设置弹幕字体的垂直位置样式

  var barrageText_height = (Math.random())*266;

  barrage_style_obj = {

  // textWidth:textWidth,

  barrageText_height:barrageText_height,

  barrage_shootText:this.data.bind_shootValue,

  barrage_shoottextColor : textColor,

  barrage_phoneWidth:phoneWidth

  };

  barrage_style_arr.push(barrage_style_obj);

  this.setData({

  barrage_style:barrage_style_arr, //发送弹幕

  bind_shootValue:"" //清空输入框

  })

  //定时器 让弹幕动起来

  // this.timer= setInterval(this.barrageText_move,800);

  },

  //定时器 让弹幕动起来

  barrageText_move: function(){

  var timerNum = barrage_style_arr.length;

  var textMove ;

  for(var i=0;i

  textMove = barrage_style_arr[i].barrage_phoneWidth;

  console.log("barrage_style_arr["+i+"].barrage_phoneWidth----------:"+barrage_style_arr[i].barrage_phoneWidth);

  textMove = textMove -20;

  barrage_style_arr[i].barrage_phoneWidth = textMove;

  //走完的移除掉

  if(textMove<=-100){

  // clearTimeout(this.timer);

  barrage_style_arr.splice(0,1);

  i--;

  //全部弹幕运行完

  if(barrage_style_arr.length==0){

  this.setData({

  barrage_style:barrage_style_arr,

  })

  // clearInterval(this.timer);

  return;

  }

  }

  console.log("第"+i+"个定时器:",textMove);

  this.setData({

  barrage_style:barrage_style_arr,

  })

  }

  },

  //绑定发射输入框,将值传递给data里的bind_shootValue,发射的时候调用

  bind_shoot:function(e){

  this.setData({

  bind_shootValue:e.detail.value

  })

  },

  })

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

  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;的大小。微信小程序开发入门点这里。

   如果觉得有用的话赶紧微信转发给自己的微信好友吧。

  以上的精彩内容就是小编为大家精心搜集的的关于微信小程序滚动字幕及弹幕的实现技巧的相关内容,微信小程序滚动字幕及弹幕的实现技巧是比较简单的。之后小编讲为大家搜集更多的微信小程序的精彩内容。好了,今天的内容就到这里,更多精彩内容敬请关注微微风

  推荐阅读:

  手持弹幕怎么用?有什么好玩的地方?

  微信小程序弹幕如何开发?

  手持弹幕怎么闪光?手持弹幕使用方法大全!


发表评论
微微风
昵称

最新资讯

更多

打开能源贸易价值的金钥匙—区块链技术

1

网红区块链可以给生活带来什么不一样的感觉!

2

新加坡将举办世界区块链峰会!

3

eco生态币是不是骗局呢?

4

eco生态币可信度有多高?

5

ECO生态数字币到底是什么?

6

eos币行情,2018年eos币的行情分析

7

比特币漏洞:在国家网络掌控之中

8

区块链可以帮助公众拥有货币化数据!

9

区块链年薪超30万,这个数字真不高!

10

热门点击

更多
1打开能源贸易价值的金钥匙—区块链技术
2网红区块链可以给生活带来什么不一样的感觉!
3新加坡将举办世界区块链峰会!
4元征利用区块链打造车链!
5全球首个区块链机器人解决协同难题!
6区块链传销一月积累8000万即跑路!如何识别?
7惊传方文山代写区块链白皮书,后证实为虚假消息!
8区块链这个风口进入到手机行业!
9房地产区块链到底是怎么回事?
10入局区块链之前请进行摸底测试!