vue 消息左右滚动(前后无缝衔接)

这篇具有很好参考价值的文章主要介绍了vue 消息左右滚动(前后无缝衔接)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

演示效果

vue 消息左右滚动(前后无缝衔接),vue.js,javascript,前端

封装的组件

<!--
 * @Author:
 * @Date: 2024-03-21 19:21:58
 * @LastEditTime: 2024-03-21 20:31:50
 * @LastEditors: Please set LastEditors
 * @Description: 消息左右滚动
-->
<template>
  <div
    id="textScroll"
    class="text-scroll"
    @mousemove="inBox"
    @mouseleave="leaveBox"
  >
    <div
      v-for="i in 2"
      :id="'scrollItem' + i"
      :key="'scrollItem' + i"
      class="scroll-item"
      :style="{ display: i === 1 ? 'flex' : 'none' }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      left: 0,
      textScrollDiv: null,
      timer: null,
      scrollItemWidth: 0,
      isScroll: false
    };
  },

  computed: {},
  destroyed() {
    clearInterval(this.timer);
  },
  mounted() {
    const that = this;
    this.$nextTick(() => {
      that.textScrollDiv = document.querySelector('#textScroll');
      that.scrollItemWidth = document.querySelector('#scrollItem1').clientWidth;
      const outerBoxWidth = that.textScrollDiv.clientWidth;
      if (outerBoxWidth < that.scrollItemWidth) {
        this.isScroll = true;
        that.textScrollDiv.style.width = `${that.scrollItemWidth * 2}px`;
        that.timer = setInterval(function() {
          that.moveLeft();
        }, 30);
        document.querySelector('#scrollItem2').style.display = 'flex';
      }
    });
  },
  methods: {
    moveLeft() {
      if (this.textScrollDiv) {
        this.left -= 1;
        if (Math.abs(this.left) > this.scrollItemWidth) {
          this.left = 0;
        }
        this.textScrollDiv.style.transform = `translate(${this.left}px, 0px)`;
      }
    },
    // 鼠标划入区域
    inBox() {
      if (this.isScroll) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 鼠标离开区域
    leaveBox() {
      if (this.isScroll) {
        const that = this;
        this.timer = setInterval(function() {
          that.moveLeft();
        }, 30);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.text-scroll {
  display: flex;
  flex-wrap: nowrap;
  transition: all 0ms ease-in 0s;
  .scroll-item {
    display: flex;
    flex-wrap: nowrap;
  }
}
</style>

外部引用文章来源地址https://www.toymoban.com/news/detail-842641.html

<template>
        <!-- 公告信息板块 -->
    <div v-if="noticeInfo && noticeInfo.length > 0" class="notice-plate">
      <div class="plate-body">
        <div class="plate-icon">
          <i class="sxqyjj-iconfont sxqyjj-xiaoxi1"></i>
        </div>
        <div class="plate-info" @click="handleInfo($event)">
          <textScroll>
            <div
              v-for="(item, i) in noticeInfo"
              :key="'notice' + i"
              class="info-item"
              :data-my-id="item.id"
            >
              {{ item.title }}
              <div v-if="i < noticeInfo.length - 1" class="line-split"></div>
            </div>
          </textScroll>
        </div>
        <div class="plate-more" @click="moreInfo">
          更多
          <i class="sxqyjj-iconfont sxqyjj-chevron-right"></i>
        </div>
      </div>
    </div>
</template>
<script>
import textScroll from '@packages/views/components/text-scroll/index.vue';

export default {
  name: 'Index',
  components: {
    textScroll
  },
  data() {
    return {
      noticeInfo: [],
    };
  },
  created() {
    this.getLastThreeConsultation();
  },
  methods: {
    // 获取重点资讯
    getLastThreeConsultation() {
      this.$api['search/getLastThreeConsultation']()
        .then(res => {
          if (res.code === this.$constant.apiServeCode.SUCCESS_CODE) {
            this.noticeInfo = res.data || [];
          }
          return true;
        })
        .catch(err => {
          console.log(err);
         });
        }
    }
  }
};
</script>
<style lang="less" scoped>
/* stylelint-disable */

.notice-plate {
  width: 1328px;
  margin: 0 auto;
  margin-top: 24px;
  .plate-body {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    margin-left: -64px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px 4px 4px 4px;
    .plate-icon {
      width: 28px;
      height: 28px;
      margin-right: 16px;
      line-height: 28px;
      color: rgba(255, 143, 31, 1);
      text-align: center;
      background: rgb(255, 247, 241);
      border-radius: 4px 4px 4px 4px;
    }
    .plate-info {
      width: calc(100% - 112px);
      height: 28px;
      overflow: hidden;
      line-height: 28px;
      .info-item {
        position: relative;
        margin-right: 32px;
        font-weight: 500;
        white-space: nowrap;
        &:hover {
          color: rgba(0, 128, 255, 1);
          cursor: pointer;
        }
      }
      .line-split {
        position: absolute;
        top: 6px;
        right: -16px;
        width: 2px;
        height: 12px;
        border-right: 1px solid rgba(217, 217, 217, 1);
      }
    }
    .plate-more {
      height: 28px;
      margin-left: 16px;
      font-size: 14px;
      line-height: 28px;
      color: @text-2;
      cursor: pointer;
      i {
        margin-left: 4px;
      }
    }
  }
}
</style>

到了这里,关于vue 消息左右滚动(前后无缝衔接)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 任务14、无缝衔接,MidJourney瓷砖(Tile)参数制作精良贴图

    在这个实验任务中,我们将深入探索《Midjourney Ai绘画》中的Tile技术和其在艺术创作中的具有挑战性的应用。此任务将通过理论学习与实践操作相结合的方式,让参与者更好地理解Tile的核心概念,熟练掌握如何在Midjourney平台上使用Tile参数,并实际运用到AI绘画的创作中。 首

    2024年02月14日
    浏览(43)
  • 在html中使用js实现图片的无缝滚动(四种状态)

    获取整个ul和ul下面的所有li, 把ul里面的li内容添加一份,因为需要完成图片滚动效果所以需要二份完成无缝对接, 定义初始速度。 设置定时器 在定时中进行判断 实现原理:因为ul是跟着父元素div进行定位的,所以ul的offsetleft的值初始值为0。 只需要改变ul的left值就可以完成

    2024年02月09日
    浏览(38)
  • Vue3 实现一个无缝滚动组件(支持鼠标手动滚动)

    前言 在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,无缝滚动使用频率更为频繁,在jquery时代,我们常用的无缝滚动组件为liMarquee,在vue中已经有vue-seamless-scroll组件(通过Vue2实现,不支持鼠标手动滚动),但是在使用过程中,发现滚动后

    2024年02月08日
    浏览(51)
  • python与adb无缝衔接控制手机(手机截屏实例)

    目录 连接 常用操作 截图到PC端 使用pure-python-adb库可以实现python控制手机,支持input输入,支持shell命令,支持pull/push上传下载文件等。 安装库:pip install pure-python-adb 电脑端需要安装adb程序,在命令行窗口启动adb程序,如下: 连接 常用操作 截图到PC端

    2024年02月11日
    浏览(52)
  • vue大屏开发系列—列表无缝滚动之vue-seamless-scroll

    目录 一 安装 二 使用  三 简单使用 四  应用 vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动,单步滚动,以及支持水平方向的手动切换功能 官方文档:  vue-seamless-scroll的简介及使用教程 - M

    2023年04月15日
    浏览(43)
  • vue通知公告左右不间断循环滚动,鼠标放置停止滚动,移开重新滚动

    思路:1.准备两个span标签,设置一个定时器,让两个span标签一起移动,2.当第二个span标签的尾部移动到盒子的尾部,让第一个span标签头部重新回到盒子尾部位置,跟在第二个span标签后面一起移动,3.当第二个span标签的尾部移动到盒子头部,将他的位置设置为0,跟在第一个

    2024年01月19日
    浏览(42)
  • vue3 如何实现 表格内容无缝滚动,我又写了一堆冗余代码

    近期在开发可视化大屏项目,除去各种 echarts 图表和地图展示之外还有多个表格。现在来了一个需求,需要将大屏中的所有表格设置为内容无缝滚动。 本着程序员的七宗罪原则第一时间推脱了一下,但没推脱成功。 简单的在网上查了下适合我们项目的有两种方案,第一种是

    2024年02月09日
    浏览(50)
  • h5网站开发,页面加载wow.js动画时,出现了左右滚动条,怎么解决?

    如下图所示,页面在加载WOW动画时出现了左右滚动条: 使用CSS样式来隐藏滚动条 在CSS文件中添加以下样式:

    2024年02月10日
    浏览(39)
  • Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理

    目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理 一、简单介绍 二、安装和使用 三、效果图 四、vue-seamless-scroll 点击事件实现原理  五、简单实现  六、关键代码 Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。 本

    2024年02月09日
    浏览(38)
  • vue-seamless-scroll无缝滚动组件使用方法详解+解决轮播空白缝隙问题(最后面)

    下载安装 1.npm npm install vue-seamless-scroll --save 2.yarn yarn add vue-seamless-scroll 使用 1、全局注册 import Vue from \\\'vue\\\' import scroll from \\\'vue-seamless-scroll\\\' Vue.use(scroll) //或者 //Vue.use(scroll,{componentName: \\\'scroll-seamless\\\'}) 2、局部注册 import vueSeamless from \\\'vue-seamless-scroll\\\'    export default {       compone

    2024年02月08日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包