大屏用到的工具

1、 第一个工具"swiper"，下面的部分class的名字是固定的(必须这么写)，具体请参考swiper官网。下面实现的是图片内容轮播： swiperjs.com/swiper-api#…

  <div class="swiper" ref="swiperContainer">
      <div class="swiper-wrapper">
        <div v-for="item in carouselList" :key="item.name" class="swiper-slide">
          <div class="title">{{ item.name }}</div>
          <div class="charts">
          </div>
          <div class="content-right-data">
            <div class="right-data-actual">
              <div class="actual-num">{{ handleNull(item.progressTimelyNum) }}<span>个</span></div>
              <div class="actual-title">及时</div>
            </div>
            <div class="right-data-target">
              <div class="target-num">{{ handleNull(item.progressTotalNum) }}<span>个</span></div>
              <div class="target-title">总数</div>
            </div>
          </div>
          <div class="footer"></div>
        </div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
 </div>
    import Swiper from 'swiper'
    import { Autoplay, Scrollbar } from 'swiper/modules'
    import 'swiper/css'
    import 'swiper/css/autoplay'
    import 'swiper/css/scrollbar'
    import 'swiper/css/thumbs'
    onMounted(() => {
      var mySwiper1 = new Swiper(swiperContainer.value, {
        modules: [Autoplay, Scrollbar],
        watchSlidesProgress: true,
        initialSlide: 0,
        loop: true,
        grabCursor: true,
        centeredSlides: false,
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination',
          type: 'progressbar'
        },
        /** 滚动条 */
        scrollbar: {
          enabled: true,
          el: '.swiper-scrollbar',
          draggable: true
        },
        autoplay: {
          delay: 1000,
          pauseOnMouseEnter: true
        }
      })
    })
    //部分数据
    const carouselList = ref([
      {
        name: '森林落叶1',
        progressValue: null,
        progressTimelyNum: null,
        progressTotalNum: 100
      },
      {
        name: '森林落叶2',
        progressValue: null,
        progressTimelyNum: 48,
        progressTotalNum: 100
      }]

2、第二个工具是 vueSeamlessScroll ，下面实现的是列表文字无缝往下滚动：

   <div class="lrCont" @click="liClick2">
      <vue-seamless-scroll :data="listData" :class-option="classOption" class="scrollwarp">
              <ul class="item">
                <li v-for="(item, index) in listData" :key="index" :data-obj="JSON.stringify(item)" >
                  <span class="index-num">{{ index + 1 }}</span>
                  <span class="title">{{ item?.title || '--' }}</span>
                  <span class="num1">{{ item?.num1}}</span>
                  <span class="num2">{{ item?.num2}}</span>
                  <span class="num3">{{ item?.num3 }}</span>
                </li>
              </ul>
       </vue-seamless-scroll>
   </div>
     import vueSeamlessScroll from 'vue-seamless-scroll'
     const liClick2 = (event) => {
      console.log('点击某一行会触发这个事件', event, event.target)
    }
    //配置
    const classOption = ref({
      limitMoveNum: 4,
      singleHeight: 49,
      step: 0.8,
      waitTime: 2000
    })
    //部分数据
    const listData = ref([
      {
        id: 1,
        title: '第一行',
        num1: '55',
        num2: '66',
        num3: '88'
      },
      {
        id: 2,
        title: '第二行',
        num1: '55',
        num2: '66',
        num3: '88'
      },
      {
        id: 3,
        title: '第三行',
        num1: '55',
        num2: '66',
        num3: '88'
      }]       

3、第三个工具 颜色处理工具tinycolor2,一下就是转换颜色空间、操作颜色的方法

//转换颜色空间
const color = tinycolor("red");
// RGB -> HEX
color.toHex(); // #ff0000  
// HEX -> RGB
tinycolor("#ff0000").toRgb(); // { r: 255, g: 0, b: 0 }  
// HSL -> RGB
tinycolor({ h: 0, s: 1, l: 0.5 }).toRgb(); // { r: 255, g: 0, b: 0 }

//操作颜色
const color = tinycolor("red");
// 增加亮度
color.lighten(10); // tinycolor("#ff6666")
// 减少亮度
color.darken(10); // tinycolor("#cc0000")
// 增加饱和度
color.saturate(10); // tinycolor("#ff1a1a")
// 减少饱和度
color.desaturate(10); // tinycolor("#ff3333")
// 增加透明度
color.setAlpha(0.5); // tinycolor("rgba(255,0,0,0.5)")
// 减少透明度
color.setAlpha(0.2); // tinycolor("rgba(255,0,0,0.2)")

4、第四个工具 tweenjs,tweenjs 是使用 JavaScript 中的一个简单的补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值，并允许链接补间动画和行动结合起来，创造出复杂的序列。下面实现的是数字从0到335的动画。

<div>{{ snum }}</div>

import { Easing, Tween, update } from '@tweenjs/tween.js'
let tween;
const snum = ref();

function initTween() {
  tween = new Tween({ tweeningValue: 0 })
    .delay(1000)
    .duration(8000)
    .easing(Easing.Circular.In)
    .to({ tweeningValue: 335 })
    .onUpdate(({ tweeningValue: nowVal }) => {
      console.log('tween-value', nowVal)
      snum.value = Math.floor(nowVal)
    })
}
const animalTween = () => {
  tween.start() //开始动画
  const render = (): void => {
    update()//new出来的Tween的update
    requestAnimationFrame(render)//相当于setTimeout,刷新动画
  }
  render()
}
onMounted(() => {
  initTween();//初始化动画
})
const liClick2 = (event) => {
  animalTween()//触发动画
}