微信小程序之弹幕的代码实现

微信小程序之弹幕的代码实现
微信小程序 弹幕功能简单实例 ,

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>