vue_“机场大屏滚动效果(2)“

AmBestToday

已于 2024-12-28 18:51:52 修改

阅读量617

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： vue.js css html5

于 2021-10-05 18:45:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45828554/article/details/120616780

WEB前端专栏收录该内容

39 篇文章

订阅专栏

此博客介绍了如何使用Vue框架在机场大屏上创建滚动效果，展示了Home.vue中数据管理和Scroll.vue组件的交互，通过定时器实现航班数据的动态排序与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue机场大屏滚动效果(2)

Home.vue （父组件）：

<template>
  <Scroll 
  :list="list"
  :width="width"
  :height="sheight"
  :textAlign="textAlign"
  />
</template>

<script>
import Scroll from '../components/Scroll.vue'
export default {
  components: {
    Scroll
  },
  data() {
    return {
      list: [],//数据
      width: 300,//宽度
      sheight: 30,//item的高度
      textAlign: 'center'//对齐方式
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    // 改变排序
    changeList() {
      let firtst = this.list.shift()
      this.list.push(firtst)
    },
    getDataList() {
      this.list = [
        {
          key: 1,
          data: [
            {
              id: 'ZC31010',
              address: "广州",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
            {
              id: 'ZC31010',
              address: "长沙",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
          ]
        },
        {
          key: 2,
          data: [
            {
              id: 'ZC31010',
              address: "北京",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
            {
              id: 'ZC31010',
              address: "石家庄",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
          ]
        },
        {
          key: 3,
          data: [
            {
              id: 'ZC31010',
              address: "四川",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
            {
              id: 'ZC31010',
              address: "广州",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
          ]
        },
        {
          key: 4,
          data: [
            {
              id: 'ZC31010',
              address: "南京",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
            {
              id: 'ZC31010',
              address: "西安",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
          ]
        },
        {
          key: 5,
          data: [
            {
              id: 'ZC31010',
              address: "成都",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
            {
              id: 'ZC31010',
              address: "上海",
              startTime: '11: 20',
              endTime: '14: 20',
              status: '已到达'
            },
          ]
        }
      ];

      // 定时器的时间是动画的倍数
      setInterval(() => {
        this.changeList()  
      }, 6000);    
    }
  }
}
</script>

<style>

</style>

Scroll.vue （子组件）：

<template>
  <div id="trajectory">
    <div
      class="box"
      :style="{
        width: width + 'px',
        height: height * 4 + 'px',
        textAlign: textAlign
      }"
    >
      <div
        class="item"
        :style="{ height: height + 'px' }"
        v-for="item in list"
        :key="item.key"
      >
        <div
          :style="{ height: height + 'px', 'line-height': height + 'px' }"
          v-for="(subitem, index) in item.data"
          :key="index"
        >
          <span>{{ subitem.id }}</span>
          <span>{{ subitem.address }}</span>
          <span>{{ subitem.startTime }}</span>
          <span>{{ subitem.endTime }}</span>
          <span>{{ subitem.status }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    width: {
      type: Number,
      default: 250
    },
    height: {
      type: Number,
      default: 30
    },
    textAlign: {
      type: String,
      default: 'center'
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#trajectory {
  position: relative;
}

.box {
  margin: 100px auto;
  overflow: hidden;
}

.box .item {
  /* height: 30px; */
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.box .item > div {
  /* height: 30px;
  line-height: 30px; */
  transform: translateY(-30px);
  animation: translateDown 3s linear infinite;
}

@keyframes translateDown {
  0% {
    transform: translateY(-30px);
  }

  50%,
  100% {
    transform: translateY(0px);
  }
}
</style>