vue项目实现列表实现滚动动画 是对jquery.liMarquee 进行的二次封装，便于更容易使用

下载

链接: 网盘下载地址
提取码: 9oo4

使用

/**
* @Author: 858834013@qq.com
* @Name: item1
* @Date: 2022-12-12
* @Desc:
*/
<template>
  <div class="item1s">
    <div class="itemInfo">
      <liMarquee v-if="show">
        <div class="infos">
          <item class="itemInner" v-for="(item,index) in list" :key="index" :item="item"></item>
        </div>
      </liMarquee>
    </div>
  </div>
</template>

<script>

import {haiLikuInnum} from "@/api/api/user";
import liMarquee from "@/components/liMarquee/liMarquee";

export default {
  name: "item1",
  components: {liMarquee},
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      list: [],
      show: false
    }
  },
  watch: {},
  mounted() {
    this.getdata()
  },
  methods: {
    getdata() {
      var that = this;
      haiLikuInnum().then(res => {
        that.list = res
        that.show = true
      }).catch(err => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item1s {
  width: 560px;
  height: 470px;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}

.itemInfo {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  width: 600px;
  margin-top: 30px;
  overflow: hidden;
  height: 380px;
}

.itemInner {
  margin-right: 10px;
}

.itemInner:nth-child(3n) {
  margin-right: 0;
}
.infos {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  min-height: 440px;
}
</style>