vue 实现从下往上无缝滚动

本文分享了一个在项目中解决列表滚动问题的高效解决方案,通过 Vue.js 实现了无缝滚动且适应不同屏幕的列表,避免了滚动不流畅和暂停滚动的问题。适合在动态更新内容的场景下使用。

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

项目中总是遇到一些列表内容,想要让他滚动起来,但是一直没有找到好的案例来实现,插件又有很多的限制,比如会出现滚动不流畅,或者无法滚动一条内容暂停一下再继续,大部分都无法在自适应的项目中实现,最近终于找到了一个案例,符合我的需求所以记录下来方便以后使用!也希望有帮助到大家

<template>

  <div class="heaerBody">

      <div class="seamless-warp">

        <ul

          :class="{ item: true, animationRolls: animatedLock }"

          @mouseout="autoScroll()"

          @mouseover="clearScroll()"

        >

          <li v-for="(item, index) in listData" :key="index">

            <span class="date" v-text="item.date"></span>

            <span class="title" v-text="item.title"></span>

          </li>

        </ul>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      listData: [

        {

          title: "铜霞路中交清水塘投资开发有限公司:货车与小车刮擦,无人受伤",

          date: "2021-06-16  10:22:05",

        },

        {

          title: "无缝滚动第二行无缝滚动第二行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第三行无缝滚动第三行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第四行无缝滚动第四行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第五行无缝滚动第五行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第六行无缝滚动第六行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第七行无缝滚动第七行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第八行无缝滚动第八行",

          date: "2017-12-16",

        },

        {

          title: "无缝滚动第九行无缝滚动第九行",

          date: "2017-12-16",

        },

      ],

      timer: null,

    };

  },

  methods: {

    scroll() {

      this.animatedLock = true;

      setTimeout(() => {

        //  这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多

        this.listData.push(this.listData[0]); // 将数组的第一个元素添加到数组的

        this.listData.shift(); //删除数组的第一个元素

        this.animatedLock = false;

      }, 500);

    },

    autoScroll() {

      this.timer = setInterval(this.scroll, 3000);

    },

    clearScroll() {

      clearInterval(this.timer);

    },

  },

  mounted() {

    setInterval(() => {

      this.sundayFn();

    }, 1000);

    this.autoScroll();

  },

};

</script>



<style scoped>

.seamless-warp {

  width: 100%;

  height: 0.35rem;

  overflow: hidden;

}

.item {

  width: 100%;

}

.seamless-warp ul li {

  height: 0.35rem;

  line-height: 0.35rem;

  color: var(--headerColor);

  white-space: nowrap; /*规定文本不换行**/

  text-overflow: ellipsis; /**显示省略符号来代表被修剪的文本。*/

  overflow: hidden;

}

.seamless-warp ul li:hover {

  text-decoration: underline;

}

.seamless-warp ul li > span:first-child {

  margin-right: 0.05rem;

}





</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值