微信小程序 弹幕功能简单实例


Posted in Javascript onFebruary 14, 2017

1、微信小程序----弹幕的实现(无后台)

小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。

效果图:

微信小程序 弹幕功能简单实例

 我的思路是这样的,先用<switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层。

先贴wxml和wxss代码。

 wxml代码如下:

<!-- pages/index/index.wxml -->
<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block>
</swiper>

<!--弹幕开关-->
<view class="barrage-Switch" style="color:{{barrageTextColor}};">
  <switch id="switch_" bindchange="barrageSwitch"/>
  <text>弹幕</text>
</view>

<!--弹幕输入框-->
 <view class="barrage-inputText" style="display:{{barrage_inputText}}">
   <view class="barrage-input">
    <input bindblur="bind_shoot" value="{{bind_shootValue}}"/>
   </view>
   <view class="barrage-shoot">
     <button class="shoot" size="mini" bindtap="shoot">发射</button>
   </view>
 </view>

<!--弹幕上单文字-->
<view class="barrage-fly" style="display:{{barragefly_display}}">
 <block wx:for="{{barrage_style}}" wx:key="unique">
  <text class="barrage-textFly" style="color:{{item.barrage_shoottextColor}};left:{{item.barrage_phoneWidth}}px;top:{{item.barrageText_height}}px;">{{item.barrage_shootText}}</text>
 </block>
</view>

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<timerNum;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:

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

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

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
js实现表格字段排序
Feb 19 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 #Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 #Javascript
用file标签实现多图文件上传预览
Feb 14 #Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 #Javascript
javascript中BOM基础知识总结
Feb 14 #Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 #Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 #Javascript
You might like
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
Yii2中datetime类的使用
2016/12/17 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
python队列queue模块详解
2018/04/27 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python3 logging日志封装实例
2020/04/08 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
文秘人员工作职责
2014/01/31 职场文书
购房协议书
2014/04/11 职场文书
多媒体教室标语
2014/06/26 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
二年级学生期末评语
2014/12/26 职场文书
简爱电影观后感
2015/06/10 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers