微信小程序实现弹幕的效果

微信小程序实现弹幕的效果
现在网上的demo是多，但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。先来一张效果图：wxml代码如下：<!-- pages/index/index.wxml --&gt...
现在网上的demo是多，但是要找到一个自己需要的却不容易。今天跟大家分享自己写的一个弹幕功能。

先来一张效果图：

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>