【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中如何實(shí)現(xiàn)彈幕效果

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序中如何實(shí)現(xiàn)彈幕效果

在下給大家分享一下微信小程序中如何實(shí)現(xiàn)彈幕效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！1、微信小程序彈幕的實(shí)現(xiàn)(無(wú)后臺(tái))小程序剛剛出來(lái)，現(xiàn)在網(wǎng)上的demo是多，但是要找到一個(gè)自己需要的卻不容易。今天跟大家分享自己寫的一個(gè)彈幕功能。效果圖：我的思路是這樣的，先用<switch>標(biāo)簽確定是否打開(kāi)彈幕，若打開(kāi)彈幕則出現(xiàn)彈幕文本框和發(fā)射按鈕，還有彈幕遮罩層。先貼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>

<!--彈幕開(kāi)關(guān)-->

<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">發(fā)射</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;

}這樣基本的樣式就都實(shí)現(xiàn)了。接下來(lái)要對(duì)彈幕上的字進(jìn)行處理。文字是從右往左移動(dòng)，文字出現(xiàn)的位置top是隨機(jī)，left則是取屏幕的寬度。移動(dòng)的時(shí)候是用定時(shí)器進(jìn)行處理。還有就是字體的顏色是隨機(jī)出現(xiàn)的。這些功能都是利用js處理的。js的代碼如下：var

barrage_style_arr

=

[];

var

barrage_style_obj

={};

var

phoneWidth

=

0;

var

timers

=

[];

var

timer

;

Page({

data:

{

imgUrls:

[

'/images/20150928/tooopen_sy_143912755726.jpg',

'/images/20160818/tooopen_sy_175866434296.jpg',

'/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",

},

//

生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載

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);

},

//是否打開(kāi)彈幕...

barrageSwitch:

function(e){

console.log(e);

//先判斷沒(méi)有打開(kāi)

if(!e.detail.value){

//清空彈幕

barrage_style_arr

=

[];

//設(shè)置data的值

this.setData({

barrageTextColor:"#D3D3D3",

barrage_inputText:"none",

barragefly_display:"none",

barrage_style:barrage_style_arr,

});

//清除定時(shí)器

clearInterval(timer);

}else{

this.setData({

barrageTextColor:"#04BE02",

barrage_inputText:"flex",

barragefly_display:"block",

});

//打開(kāi)定時(shí)器

timer=

setInterval(this.barrageText_move,800)

}

},

//發(fā)射按鈕

shoot:

function(e){

//字體顏色隨機(jī)

var

textColor

=

"rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";

//

//設(shè)置彈幕字體的水平位置樣式

//

var

textWidth

=

-(this.data.bind_shootValue.length*0);

//設(shè)置彈幕字體的垂直位置樣式

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,

//發(fā)送彈幕

bind_shootValue:""

//清空輸入框

})

//定時(shí)器

讓彈幕動(dòng)起來(lái)

//

this.timer=

setInterval(this.barrageText_move,800);

},

//定時(shí)器

讓彈幕動(dòng)起來(lái)

barrageText_move:

function(){

var

timerNum

=

barrage_style_arr.length;

var

textMove

;

for(var

i=0;i<timerNum;i++){

textMove

=

barrage_style_arr因?yàn)閯倓偨佑|小程序，所以對(duì)一些語(yǔ)句的使用都不是很了解。所以遇到了一些問(wèn)題：1、在js中獲取wxml的控件的信息。js：

barrageSwitch:

function(e){

console.log(e);

}wxml：<switch

id="switch_"

bindchange="barrageSwitch"/>結(jié)果：返回了一個(gè)objec.在控制臺(tái)返回的類型好像都是json格式的數(shù)據(jù)。

Object

{type:

"change",

timeStamp:

2766,

target:

Object,

currentTarget:

Object,

detail:

Object}2、在實(shí)現(xiàn)彈幕的時(shí)候