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>

有人看的话,细讲~~

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值