微信小程序-手持弹幕_小程序弹幕源码

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

最近在抖音刷到手持弹幕的视频，觉得是一个非常有趣应用，在手持弹幕小程序这个软件当中，你可以设置很长一段话，很适合追星。挑战一下自己，做一个小程序的手持弹幕应用。

微信小程序搜索“超超实用工具”，打开菜单，点击手持弹幕即可免费使用。

先扫码体验吧

 效果：

可以自定义字体属性

话不多说，上操作：

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 */

关注我，分享更多编程知识!