微信小程序-手持弹幕_文字内容横屏滚动_小程序弹幕源码
哈喽,大家好,我是SCLQ。
最近在抖音刷到手持弹幕的视频,觉得是一个非常有趣应用,在手持弹幕小程序这个软件当中,你可以设置很长一段话,很适合追星。挑战一下自己,做一个小程序的手持弹幕应用。
微信小程序搜索“超超实用工具”,打开菜单,点击手持弹幕即可免费使用。
先扫码体验吧
效果:
可以自定义字体属性
话不多说,上操作:
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; }
关注我,分享更多实用小工具!