哈嘍，大家好，我是超哥。

最近在抖音刷到手持彈幕的視頻，覺得是一個非常有趣應用，在手持彈幕小程序這個軟件當中，你可以設置很長一段話，很適合追星。挑戰一下自己，做一個小程序的手持彈幕應用。

微信小程序搜索“超超實用工具”，打開菜單，點擊手持彈幕即可免費使用。

先掃碼體驗吧

?效果：

可以自定義字體屬性

話不多說，上操作：

wxml:

<view class="textBox" style="background-color:{{backgroundColor}}"> <view class='text' style="font-size: {{fontSize}}rpx; animation: animateText {{animateTime}}s infinite linear; color:{{fontColor}}"> {{text}} </view></view><view class="inputBox"> <input class="inp" placeholder="請輸入彈幕~" bindinput="inputBlur" cursor-spacing='10'></input> <view bindtap="sendBtn" class="iconfont icon-1huojian iconBtn1"> 發送</view> <view bindtap="showModal" class="iconfont icon-qita3 iconBtn1">屬性</view></view><!--屏幕背景變暗的背景 --><view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view><!-- 屏幕內容 --><view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> <view class="swiper-tab swiperAttr"> <view class="iconfont icon-jurassic_font-sizeadd swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">字號</view> <view class="iconfont icon-yanse1 swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">顏色</view> <view class="iconfont icon-Group- swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">速度</view> <view class="iconfont icon-beijingse swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">背景</view></view><swiper current="{{currentTab}}" duration="300" bindchange="swiperTab"> <!-- 字體大小 --> <swiper-item> <view class="swiperItem1"> <slider show-value value='{{sliderValOfFontSize}}' bindchanging='changeFontSize' selected-color='#006AFE'></slider> </view> </swiper-item> <!-- 選擇顏色 --> <swiper-item> <view class="swiperItem2"> <view class="colorBox" bindtap="setColor"> <view class="colorItems" wx:for='{{colorArr}}' data-index="{{index}}" style="background-color:{{item.color}}" wx:key=''></view> </view> </view> </swiper-item> <!-- 字體速度 --> <swiper-item> <view class="swiperItem1"> <slider show-value bindchanging='changeTextSpeend' selected-color='#006AFE' value='{{sliderValOfAnimateTime}}'></slider> </view> </swiper-item> <!-- 背景顏色 --> <swiper-item> <view class="swiperItem2"> <view class="colorBox" bindtap="setBackGroundColor"> <view class="colorItems" wx:for='{{colorArr}}' data-index="{{index}}" style="background-color:{{item.color}}" wx:key=''></view> </view> </view> </swiper-item></swiper></view>

wxss:

?

page{ margin: 0; padding: 0;}.textBox{ height: 100vh; display: flex; justify-content: center; background-color: black; position: relative;}.text{ transform:rotate(90deg); height: 1rpx; display: flex; align-items: center; white-space: nowrap; /* background-color: salmon; */ position: fixed; top: 280%; color: white; /* margin-top: -1%; */ }@keyframes animateText{ 0%{ margin-top: 0%; } 100%{ margin-top: -700%; }}.inputBox{ position: fixed; bottom: 1%; display: flex; /* background-color: saddlebrown; */ }.inp{ border: 1px #333333 solid; border-radius: 50rpx; margin-left: 30rpx; padding-left: 20rpx; color: white; font-size: 30rpx; width: 390rpx; height: 63rpx;}.iconBtn1{ /* border: 1px white solid; */ width: 130rpx; height: 70rpx; border-radius: 60rpx; display: flex; justify-content: center; align-items: center; font-size: 30rpx; font-weight: bold; background-color: #333333; color: white; margin-left: 10rpx; }.swiperItem1{ padding-top: 15%; padding-left: 5%;}.swiperItem2{ padding-top: 15%;}/* 色塊 */.colorBox{ display: flex; justify-content: space-evenly;}.colorItems{ width: 50rpx; height: 50rpx;}/* 彈起框的樣式 *//*使屏幕變暗 */.commodity_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.8; overflow: hidden; z-index: 1000; color: #fff;}/*對話框 */.commodity_attr_box { height: 430rpx; width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #282828; border-radius: 10rpx 10rpx 0 0;}/* swiper start */.swiper-tab{ width: 100%; border-bottom: 2rpx solid #373737; text-align: center; height: 88rpx; line-height: 88rpx; font-weight: bold; background-color: #282828;}.swiper-tab-item{ display: inline-block; width: 25%; color:#939393; background-color: #282828;}.active{ background-color: #006AFE; color:white; border-bottom: 4rpx solid#373737;}swiper{ color: white; background-color: #282828;}/* swiper end */

關注我，分享更多編程知識!?

總結

以上是生活随笔為你收集整理的微信小程序-手持弹幕_小程序弹幕源码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。