vue根据站点A 与 站点B 之间的间距 实现小车（可能为多辆车）的动态移动

先不废话上效果图：

 

具体代码如下：

<template>
  <div>
    <h1>地铁线路实时动态图</h1>
    <div class="subway">
        <div class="lines">
            <div class="line_title" v-for="(item,index) in lines" :key="index">
                <div class="line_item">
                    {{item.lineName}}:
                </div>
            </div>
        </div>

        <div class="stations">
            <div class="station_title" v-for="(item,index) in stations" :key="index">
            <div class="station_item">
                {{item.stationName}}
            </div>
            <div class="line" v-if="index !== stations.length-1"></div>
            </div>
        </div>
        <div class="positions">
            <div class="act-point" v-for="(item,index) in positions" :style="{left: item.left + 'px', bottom: item.bottom + 'px'}" ></div>
        </div>
    </div>
  </div>
</template>

<script>
import { setInterval } from 'timers';
export default {
  data(){
    return {
      lines:[{lineName:'13号线'}],
      stations: [
        {stationName: '西直门'},
        {stationName: '大钟寺'},
        {stationName: '知春路'},
        {stationName: '五道口'},
        {stationName: '上地'},
        {stationName: '西二旗'},
        {stationName: '龙泽'}],
      positions: [
        {left: 1, bottom:20 ,name: '车01'},
        {left: 1, bottom:20 , name: '车02'},
        {left: 1,  bottom:20 ,name: '车03'},
        {left: 1,  bottom:20 ,name: '车04'}]
    }
  },
  methods: {
    calcPosition() {
      let arr = [ 0, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600];
    //   let arr1 = arr.reverse();
      let count = 0;
      setInterval(() => {
        if (count > arr.length -1) return 
        this.positions[0].left = arr[count];
        this.positions[1].left = arr[count + 1];
        this.positions[2].left = arr[count + 2];
        this.positions[3].left = arr[count + 3];
        count++
        console.log(this.positions[0].left)
      }, 3000)


    //   let count1 = 0;
    //   setInterval(() => {
    //     if (count > arr1.length -1) return 
    //     this.positions[0].bottom = -25
    //     this.positions[1].bottom = -25
    //     this.positions[2].bottom = -25
    //     this.positions[3].bottom = -25
    //     this.positions[0].left = arr1[count1];
    //     this.positions[1].left = arr1[count1 + 1];
    //     this.positions[2].left = arr1[count1 + 2];
    //     this.positions[3].left = arr1[count1 + 3];
    //     count++
    //     console.log(this.positions[0].left)
    //   }, 3000)


    }
  },
  mounted(){
    this.calcPosition()
  }
}
</script>

<style type="text/css">
    .subway {
        margin-top: 20px;
        position: relative;
    }
    /* 线路 */
    .subway .lines .line_item{
        margin-bottom:10px;
        font-size:16px;
        color:#000;
        font-weight:bold;
    }
    /* 车站 */
    .subway .station_title {
        display: inline-block;
        width: 100px;
        /* border-bottom: 4px solid #000; */
    }
    .subway .station_item {
        font-size: 12px;
        margin-bottom: 40px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }
    .subway .line {
        position: relative;
        width: 100px;
        border-bottom: 4px solid #000;
        /* border-radius: 4px; */
        margin-top: 15px;
        margin-left:10px;
    }
    .subway .line::after {
        position: absolute;
        left: -2px;
        bottom: -10px;
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #0089ff;
        opacity: 1;
    }
    .subway .station_title:nth-last-child(2) .line::before{
        position: absolute;
        right: -2px;
        bottom: -10px;
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #0089ff;
        opacity: 1;
    }
    .subway .line::after :hover {
        bottom: -8px;
        width: 12px;
        height: 12px;
        opacity: 1;
    }
    /* 小车 */
    .positions .act-point {
        position: absolute;
        bottom: 20px;
        left: -6px;
        width: 50px;
        height: 12px;
        /* border-radius: 50%; */
        background: url('/static/img/tain2.png') no-repeat;
    }
</style>

 

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140