七夕拿什么秀技术

最新推荐文章于 2024-09-16 16:19:08 发布

牛马圈二胖

最新推荐文章于 2024-09-16 16:19:08 发布

阅读量221

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/Jarvan_I/article/details/141025988

版权

情话

❝
迢迢牵牛星，皎皎河汉女。

手持弹幕

❝
手持弹幕小程序作为一种创新的互动方式，在表达爱意方面拥有独特的魅力和效果.

效果

❝
视觉冲击，创意表达，最主要是秀技术啊！！！

技术栈

❝
uniApp + Vue

核心功能

❝
组件封装

// carousel-text
<template>
 <view class="_div global_carousel_text y" v-if="!show">
  <view class="_ul" :style="fontWrapStyle">
   <view class="empty _li"></view>
   <view class="_li" :class="item.fontClass" :style="item.style"  v-for="(item, index) in textConfig" :key="index">
    {{item.font}}</view>
  </view>
 </view>
</template>

<script>
 export default {
  name: 'CarouselText',
  props: {
   text: {
    type: String,
    default: () => ('')
   },
   fontSize: {
    type: String,
    default: () => ('')
   },
   fontColor: {
    type: String,
    default: () => ('')
   },
   step: {
    type: Number,
    default: () => (0)
   },
  },
  data() {
   return {
    show: false,
    textConfig: [],
    fontWrapStyle: '',
    fontClass: '',
    loopCount: 50,
    currentStep: 400,
    timer: null
   }
  },
  watch: {
   text: function() {
    this.textHandler()
    this.setTextStyle()
   },
   step: function() {
    this.currentStep = this.step
    this.loopCount = 0
   }
  },
  mounted() {
   this.textHandler()
   this.setTextStyle()
   let t = this
   t.timer = setInterval(function() {
    t.setTextStyle()
   }, 36)
  },
  methods: {
   textHandler: function() {
    let n = []
    if (this.text) {
     for (let o = 0; o < this.text.length; o++) {
      n.push({
       font: this.text[o],
       style: "",
       fontClass: this.getTypeByText(this.text[o]) + (" " === this.text[o] ? " empty_str" : "")
      })
     }
     if (n.length > 0) {
      this.textConfig = n
      this.loopCount = 0
     
      this.$nextTick(function() {
       this.setTextStyle()
       this.show = !1
       setTimeout(function() {
        this.show = !0
       }, 400)
      })
     }
    }
   },
   setTextStyle() {
     let t = this
     if (++t.loopCount % t.currentStep == 0) {
       t.loopCount = 0
     }
   // console.log(t.textConfig, 1111111)
     t.textConfig.forEach(function(e, n) {
       let o = t.fontColor || t.getRandomColor()
       
       if (t.loopCount % 10 == 0) {
         if (t.fontColor) {
           e.style = "transition: color 0.2s;color:".concat(o, ";text-shadow: 0 0 0.5em rgba(255,255,255,.7);  ") + "font-size:" + (t.fontSize || "")
         } else {
           e.style = "transition: color 0.2s;color:rgba(255,255,255,.7);text-shadow: 0 0 0.5em ".concat(o, ";  ") + "font-size:" + (t.fontSize || "")
         }
       }
       
       t.fontWrapStyle = "top:0;transform: translate(-50%,-".concat(t.loopCount / (t.currentStep / 100), "%)")
     })
   },
   getTypeByText(t) {
       return /[\d\w]/.test(t) ? "no_zh" : "zh";
   },
   getRandomColor() {
    let t = "#" + (16777215 * Math.random() << 0).toString(16)
    return 6 === t.length && (t += 0), t
   }
  }
 }
</script>

<style>
 
</style>