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


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 相关文章推荐
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
js闭包的用途详解
2014/11/09 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
Python制作豆瓣图片的爬虫
2017/12/28 Python
python在文本开头插入一行的实例
2018/05/02 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python编写单元测试代码实例
2020/09/10 Python
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
教师求职自荐信
2014/03/09 职场文书
低碳生活倡议书
2014/04/14 职场文书
商场促销活动策划方案
2014/08/18 职场文书
个人年终总结范文
2015/03/09 职场文书
导游词之山西关帝庙
2019/11/01 职场文书