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

  
    

      

        天气情况
        
          
      
      
        
          

            
       服务器托管网       
              近期无恶劣天气
            
            
              
{{ warnMess }}
            
          
        
        
          
{{ globalFn.formatWeatherData(item.fxDate) }}
          
          
{{ item.tempMax }}℃
        
      
    
  



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.sunr服务器托管网ise}`)) &&
      new Date()  {
  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);
      }
    });
  }
});


.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;
}