1、微信小程序----弹幕的实现(无后台)
小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。
效果图:
我的思路是这样的,先用
先贴wxml和wxss代码。
wxml代码如下:
<!-- pages/index/index.wxml --> <swiper indicator-dots="pw_indicatorDots" autoplay="pw_autoplay" interval="pw_interval" duration="pw_duration"> <block wx:for="pw_imgUrls" wx:key="unique"> <swiper-item> <image src="pw_item" class="slide-image"/> </swiper-item> </block> </swiper> <!--弹幕开关--> <view class="barrage-Switch" style="color:pw_barrageTextColor;"> <switch id="switch_" bindchange="barrageSwitch"/> <text>弹幕</text> </view> <!--弹幕输入框--> <view class="barrage-inputText" style="display:pw_barrage_inputText"> <view class="barrage-input"> <input bindblur="bind_shoot" value="pw_bind_shootValue"/> </view> <view class="barrage-shoot"> <button class="shoot" size="mini" bindtap="shoot">发射</button> </view> </view> <!--弹幕上单文字--> <view class="barrage-fly" style="display:pw_barragefly_display"> <block wx:for="pw_barrage_style" wx:key="unique"> <text class="barrage-textFly" style="color:pw_item.barrage_shoottextColor;left:pw_item.barrage_phoneWidthpx;top:pw_item.barrageText_heightpx;">pw_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
因为刚刚接触小程序,所以对一些语句的使用都不是很了解。所以遇到了一些问题:
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;的大小。
위 내용은 WeChat 미니 프로그램 공세의 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기

에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
