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

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

2018-01-05 12:07:41 489 0

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

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

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

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

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

  推荐阅读:

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

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

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


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

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

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

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

  现在网上的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

2017年微信引导分享动态图精选!

4

最新微信引导关注动图大全!

5

最新公众号阅读原文动态图素材

6

最新微信底部扫码关注模板

7

最新微信公众号求关注图标大全

8

最新微信关注我们动态图素材

9

点击按钮关注公众号,点击按钮关注公众号图片素材

10

最近更新

更多
1小程序对各行业的好处是什么?具体有哪些方面?
2微信小程序对商家价值有哪些?
3微信小程序朋友位置需要每天重设吗?
42018微信买东西被骗怎么办?平台有何政策?
52018微信付款不发货找谁?微信购物要注意什么?
6怎么用微信购物?微信购物受保护吗?
7微信购物只能在京东吗?微信怎么上京东购物?
8微信购物不发货怎么办?
9微信好友在哪儿怎么玩?怎么查看好友在哪?
10微信福袋怎么玩?彼邻福袋是什么?

猜你喜欢

小程序 | 微信跳一跳怎么得高分?
小程序 | 跳一跳别人跳几千下怎么来的?
小程序 | 跳一跳外挂怎么用?
小程序 | 跳一跳奖励盒子怎么拿分?
小程序 | 微信跳一跳加分奖励是什么?
小程序 | 跳一跳黑科技怎么用?
小程序 | 微信游戏刷分教程
小程序 | 微信为什么打开就跳掉?
小程序 | 超级跳跳跳攻略!超级跳跳跳怎么玩?
小程序 | 跳一跳够得着怎么玩?