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


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中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
Js apply方法详解
Feb 16 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php去掉文件前几行的方法
2015/07/29 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
anaconda如何查看并管理python环境
2019/07/05 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
文艺演出策划方案
2014/06/07 职场文书
经济国贸专业求职信
2014/06/18 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
公司内部升职自荐信
2015/03/27 职场文书
尊师重教主题班会
2015/08/14 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技