VUE~~文字动起来（天气）

图标库：

npm install qweather-icons

@import "qweather-icons/font/qweather-icons.css";

<template>
  <a-spin :spinning="data.loading">
    <div
      style="
        height: 132px;
        padding: 10px 16px 16px 16px;
        background: #fff;
        border: 1px solid rgba(217, 217, 217, 0.4);
        border-radius: 6px;
      "
    >
      <div>
        <span style="font-size: 16px; font-weight: 500">天气情况</span>
        <a href="#" style="float: right">
          <img
            src="/cardapi/route/1008/resource/img/right.png"
            style="width: 14px"
        /></a>
      </div>
      <a-row style="padding-top: 8px">
        <a-col :span="24" style="margin-bottom: 4px">
          <div
            ref="parentBox"
            class="her-label"
            :style="{
              background: warnMess ? '#ff3b3047' : '#E0F2F2',
              color: warnMess ? '#FF3B30' : '#2bada7',
            }"
          >
            <template v-if="!warnMess">
              <img
                src="/cardapi/route/1008/resource/img/safe.png"
                style="width: 16px; position: relative; top: 3px"
              />
              近期无恶劣天气
            </template>
            <template v-else>
              <div ref="aniText" class="top_font aniText">{{ warnMess }}</div>
            </template>
          </div>
        </a-col>
        <a-col
          :span="index == 0 ? 4 : 5"
          v-for="(item, index) in data.values"
          :key="item.fxDate"
          style="text-align: center; line-height: 20px"
        >
          <div>{{ globalFn.formatWeatherData(item.fxDate) }}</div>
          <i
            :class="[
              `qi-${getBoolean(item, 'time') ? item.iconDay : item.iconNight}`,
              'weatherIcon',
            ]"
          ></i>
          <div>{{ item.tempMax }}℃</div>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, nextTick } from "vue";
let data = reactive({
  loading: true,
  values: {},
});
function getBoolean(item, type) {
  if (type == "date") {
    return proxy.globalFn.transitionTimeFn() == new Date(item.fxDate);
  } else {
    return (
      new Date() > new Date(new Date(`${item.fxDate} ${item.sunrise}`)) &&
      new Date() < new Date(new Date(`${item.fxDate} ${item.sunset}`))
    );
  }
}
const { proxy } = getCurrentInstance();
proxy.getApi.getCardData("1008", {}).then((result) => {
  let res = result.data.daily;
  console.log("dd--result--1008", result);
  data.values = res.slice(0, 5);
  data.loading = false;
});
const warnMess = ref();
const aniText = ref(null);
const parentBox = ref(null);
proxy.getApi.getCardData("1009").then((result) => {
  console.log("dd--res--1009", result);
  let res = result.data;
  warnMess.value = res.warning?.[0]?.["text"];
  if (res.warning.length) {
    nextTick(() => {
      const { width } = aniText.value.getBoundingClientRect();
      const { width: parentWidth } = parentBox.value.getBoundingClientRect();
      let indexStep = 0;
      function step(timestamp) {
        //操作
        if (indexStep > width) {
          indexStep = 0;
        }
        aniText.value.style.transform = `translateX(-${(indexStep += 0.1)}px)`;
        requestAnimationFrame(step);
      }
      if (width > parentWidth) {
        requestAnimationFrame(step);
      }
    });
  }
});
</script>
<style>
.weatherIcon {
  color: #0473ff;
}
.top_font {
  display: inline-block;
  white-space: nowrap;
}
.aniText {
  transform: translateX(0px);
}
.her-label {
  padding-left: 10px;
  border-radius: 2px;
  overflow: hidden;
}
</style>