vue项目中循环新闻列表

初始样子/完成样子是后侧列表循环

 

<!-- 首页滚动新闻 -->
<template>
  <div class="home-news">
    <div class="news">
      <img
        src="https://cartier-cdn.cartier.cn/Library/2021-08-30/163030622710518.jpg"
        alt=""
      />
          //通过设置ref，获取dom元素
      <ul ref="news" :class="{ animate: flag }">
        <li v-for="item in news" :key="item.id">{{ item.title }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      settime: null,
      flag: false,
      news: [
        {
          id: 1,
          title: "与爱相伴，勇敢前行",
        },
        {
          id: 2,
          title: "多变魅力，野性优雅",
        },
        {
          id: 3,
          title: "新生有为，方圆无界",
        },
        {
          id: 4,
          title: "贴心服务，非凡体验",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    scrollNews() {
      //通过设置ref获取dom元素
      //console.log(this.$refs.news);
      let newsul = this.$refs.news;
      //ul向上移动一个title
      newsul.style.top = "-4rem";
      //设置一个动画 动画开始
      this.flag = !this.flag;
      //设置个定时器，循环滚动
      setTimeout(() => {
        // 向末尾添加第一条数据
        this.news.push(this.news[0]);
        //删除第一条数据
        this.news.shift();
        //退回到top等于0
        newsul.style.top = "0rem";
        //动画结束
        this.flag = !this.flag;
      }, 500);
    },
  },
  mounted() {
    //   为什么设置data？好找，销毁组件的时候
    this.settime = setInterval(this.scrollNews, 3000);
  },
  destroyed() {
    //一定要清除定时器
    clearInterval(this.settime);
  }, //生命周期 - 销毁完成
};
</script>
<style lang='less'>
.news {
  width: 100%;
  height: 40rem;
  margin-top: 2rem;
  overflow: hidden;

  img {
    float: left;
    width: 60%;
    height: 4rem;
  }
  .animate {
    transition: all 1s linear;
  }
  ul {
    position: relative;
    float: left;
    width: 40%;
    overflow: hidden;
    height: 4rem;
    li {
      line-height: 4rem;
      margin-left: 2rem;
    }
  }
}
</style>

有人看的话，细讲~~