手持弹幕（全屏文字滚动）

一时失言乱红尘 2022-11-14 13:25 225阅读 0赞

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

// pages/02-23/demo1/newDanMu.js
    Page({
      /**
       * Page initial data
       */
      data: {
        inputText: '',
        text: '请输入弹幕( = _ =  )||',
        sliderValOfFontSize:50,
        fontSize: 300,
        fontColor:'white',
        backgroundColor:'black',
        animateTime:10,
        sliderValOfAnimateTime:50,
        currentTab: 0,
        textMoveAnimate:null,
        colorArr:[
          { color: 'pink' },
          { color: "red" },
          { color: "blue" },
          { color: "yellow" },
          { color: "white" },
          { color: "aqua" },
          { color: "green" },
          { color: "skyblue" },
          { color: "hotpink" },
          { color: "black" }
        ]
      },
      //改变背景颜色
      setBackGroundColor(e){
        console.log(e.target.dataset.index);
        let index = e.target.dataset.index;
        let that = this;
        let selectColor = that.data.colorArr[index].color;
        that.setData({
          backgroundColor: selectColor
        })
      },
      // 选择弹幕的字体颜色
      setColor(e){
        // console.log(e.target.dataset.index);
        let index = e.target.dataset.index;
         
        let that = this;
        let selectColor = that.data.colorArr[index].color;
        that.setData({
          fontColor:selectColor
        })
      },
      //改变弹幕滚动速度
      changeTextSpeend(e){
        console.log(e.detail.value);
        let sliderVal = e.detail.value;
        let that = this;
        //50 默认 10s
        //0 是 15s
        //100 是 5s
        that.setData({
          animateTime: sliderVal * -0.1 + 15,
          sliderValOfAnimateTime: sliderVal
        })
      },
      // 改变字号
      changeFontSize(e){
        //获取滑竿的值
        console.log(e.detail.value);
        let sliderVal = e.detail.value;
        let that = this;
        //运算边界值
        //50 对应 300rpx 的字号
        //0 对应 150rpx
        //100 对应 450rpx
        that.setData({
          fontSize: sliderVal * 3 + 150,
          sliderValOfFontSize: sliderVal
        })
      },
      // input失去焦点时获取输入的文字
      inputBlur(e) {
        let that = this;
        let inputVal = e.detail.value;
        // console.log(inputVal);
        that.setData({
          inputText: inputVal
        })
      },
      sendBtn() {
        let that = this;
        if (that.data.inputText == '') {
          wx: wx.showToast({
            title: '不能为空哦',
            duration: 2000
          })
        }
        else {
          that.setData({
            text: that.data.inputText
          })
        }
      },
      //显示对话框
      showModal: function () {
        // 显示遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: true
        })
        setTimeout(function () {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      },
      //隐藏对话框
      hideModal: function () {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
        })
        setTimeout(function () {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export(),
            showModalStatus: false
          })
        }.bind(this), 200)
      },
      /**
       * Lifecycle function--Called when page load
       */
      onLoad: function (options) {
      },
      //滑动切换
      swiperTab: function (e) {
        var that = this;
        // console.log(e.detail.current);
        that.setData({
          currentTab: e.detail.current
        });
      },
      //点击切换
      clickTab: function (e) {
        var that = this;
        if (this.data.currentTab === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentTab: e.target.dataset.current
          })
        }
      },
      /**
       * Lifecycle function--Called when page is initially rendered
       */
      onReady: function () {
         
      },
      
      /**
       * Lifecycle function--Called when page show
       */
      onShow: function () {
      },
      /**
       * Lifecycle function--Called when page hide
       */
      onHide: function () {
      },
      /**
       * Lifecycle function--Called when page unload
       */
      onUnload: function () {
      },
      /**
       * Page event handler function--Called when user drop down
       */
      onPullDownRefresh: function () {
      },
      /**
       * Called when page reach bottom
       */
      onReachBottom: function () {
      },
      /**
       * Called when user click on the top right corner to share
       */
      onShareAppMessage: function () {
      }
    })

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;
    }
    /* .color1{
      background-color: pink;
    }
    .color2{
      background-color: red;
    }
    .color3{
      background-color: blue;
    }
    .color4{
      background-color: yellow;
    }
    .color5{
      background-color: white;
    }
    .color6{
      background-color: aqua;
    }
    .color7{
      background-color: green;
    }
    .color8{
      background-color: skyblue;
    }
    .color9{
      background-color: hotpink;
    }
    .color10{
      background-color: black;
    } */
    /* 弹起框的样式 */
    /*使屏幕变暗 */
    .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 */

json:

{
      "usingComponents": {},
      "navigationStyle": "custom",
      "navigationBarTextStyle": "white"
    }

转载地址：[https://blog.csdn.net/qq\_36752481/article/details/109244628][https_blog.csdn.net_qq_36752481_article_details_109244628]

[https_blog.csdn.net_qq_36752481_article_details_109244628]: https://blog.csdn.net/qq_36752481/article/details/109244628