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

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

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

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

先扫码体验吧

效果：

可以自定义字体属性

话不多说，上操作：

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

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

微信小程序-手持弹幕_小程序弹幕源码相关推荐

python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
小程序模板报价_小程序模板价格_小程序模板使用多少钱
小程序模板报价_小程序模板价格_小程序模板使用多少钱? 分享一个☞ 微信小程序模板平台,超60个行业的小程序模板免费使用. 在这个平台,小程序模板是免费使用的.收费部分是这个平台提供的小程序功能,档次 ...
仿得物微信小程序（动手就会，含源码）
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群前言最近正在学习微信小程序开发,也是与两个同学一起合作着手仿做得物APP微信小程序.这里主要分享一下我的学习过程及踩过的一 ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
微信小程序：笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码或者也可以说是一个框架吧里面的内容是内置在小程序里面的,所以说是一款框架也可以因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
最新小程序授权+php后端（附demo源码）
参考博客:小程序授权+php后端(附demo源码)_流情的博客-CSDN博客_php小程序正所谓计划永远赶不上变化,鉴于小程序端已经更改了微信授权登录的接口,因此特来补充一下.原先的wx.getUs ...
微擎小程序怎么配置服务器域名,随便撸源码源码微擎小程序通用配置图文教程，教会你怎么配置微擎小程序！...
最近很多网友都在问站长微擎小程序如何配置使用,微擎小程序配置查看更多关于微擎小程序配置的文章主要分几类,之前已经写过人人商城小程序的配置教程了,大家反响非常好,简单就学会了配置人人商城小程序. ...

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

微信小程序-手持弹幕_小程序弹幕源码相关推荐

最新文章

热门文章