Vue跑马灯简单案列

这篇具有很好参考价值的文章主要介绍了Vue跑马灯简单案列。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

套在自己的vue模板里面即可

    <div v-if="this.content" class="marquee-container" ref="marqueeContainer">
    <span :class="{ 'marquee-text': true, 'marquee-move': shouldMove }" ref="scrollingText" v-if="this.showResult">
      {{ content }}
    </span>
    </div>

content是显示的内容,shouldMove是否滚动(如果大于了文本框才滚动,否则禁止不懂),showResult是否显示滚动条

  data() {
    return {
      content: '',
      shouldMove: true,
      showResult: false,
    }
  },
  created() {
    this.getSurvey()
  },
  mounted() {
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkOverflow);
  },
  methods: {
     checkOverflow() {
      const scrollingText = this.$refs.scrollingText;
      const marqueeContainer = this.$refs.marqueeContainer;
      console.log(scrollingText.scrollWidth)
       console.log(marqueeContainer.clientWidth)
      this.shouldMove = scrollingText.scrollWidth > marqueeContainer.clientWidth;

      if (!this.content || this.content.trim() === '') {
        this.shouldMove = false;
      }
    },
    async getSurvey(){
      let { data, errorCode }=await this._get(this.API.queryMarketSurvey(
          this.menuId
      ))
      if(errorCode==0){
        console.log(data)
        this.showResult = data.showResult
        this.content = data.content;
        this.$nextTick(()=>{
          this.checkOverflow();
          window.addEventListener('resize', this.checkOverflow);
        })

      }
    },
.marquee-container {
  background-color: #7a00e6; /* 背景颜色 */
  color:#fff;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  padding-left:12px;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.marquee-text {
  display: inline-block; /* 使文本以块级元素显示 */
  font-family: 'YourFont', sans-serif; /* 替换成你的字体 */
}

.marquee-move {
  animation: marquee 10s linear infinite; /* 使用 linear 以保持匀速移动 */
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

效果
Vue跑马灯简单案列,前端,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-835125.html

到了这里,关于Vue跑马灯简单案列的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 探究前端的跑马灯效果是如何用css实现的

    💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜 📝 个人主页:馆主阿牛🔥 🎉 支持我:点赞👍+收藏⭐️+留言📝 📣 系列专栏:前端实用小demo🍁 💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥 无意见看到了一个网站的一个动画的跑马灯效果

    2024年04月10日
    浏览(41)
  • 单片机(3)跑马灯,按钮控制的跑马灯(2种编程)

     先上电路图(图示的是高电平点亮的跑马灯)  这个是程序截图(keil5):我的建议是是先自己打一遍,边打边试着理解程序的意思。 下面的是没有注释的代码 下一个是另外一种编程思路  

    2024年02月11日
    浏览(38)
  • 跑马灯实验

             1.熟悉龙芯实验开发板、熟悉 VIVADO 的编译环境及操作流程。         2.掌握 FPGA 编程入门知识、利用门级方法实现简单逻辑电路。         3.继续学习 Verilog HDL 语法、掌握跑马灯的设计、熟悉调试过程。          本次实验用 Verilog HDL 语言来描述 6 个不

    2024年02月04日
    浏览(44)
  • 3.跑马灯

    推挽模式输出:因为LED0和LED1阳极都是3.3V,需要将阴极设置为低电平才可以点亮LED; 操作io口时,必须引入源文件和头文件; 关于时钟的文件存放在rcc中; void GPIO_Init(GPIO_TypeDef* GPIOx, GPIO_InitTypeDef* GPIO_InitStruct); 作用:初始化一个或多个io口(同一组)的工作方式和速度, 该函数

    2024年02月10日
    浏览(43)
  • Android --- 跑马灯效果

    跑马灯效果主要使用的控件为TextView,其中涉及的几个标签如下所示: android:ellipsize If set, causes words that are longer than the view is wide to be ellipsized instead of broken in the middle. You will often also want to set scrollHorizontally or singleLine as well so that the text as a whole is also constrained to a single line in

    2023年04月08日
    浏览(77)
  • Android 实现跑马灯效果

    Android中实现跑马灯效果有多种方式,本篇简单介绍下: 1: TextView属性实现 这里需要注意下: 需要限制textview的宽度,不能设置为wrap_content 启动跑马灯效果需要获取焦点requestFocus(). 2: 代码实现 3: 自定义 view实现 这里可以使用动画的效果实现. 4: 实现竖直效果的跑马灯

    2024年01月18日
    浏览(58)
  • CSS按钮-跑马灯边框

    思路很简单,实现方法有很多很多。但是大体思路与实现方法都类似:渐变色 + 动画,主要区别在动画的具体实现

    2024年02月11日
    浏览(47)
  • CSS 之 跑马灯边框

    一、简介 ​ 之前有做过渐变色边框的样式,然后某天刷抖🎵,看到某个老师在讲跑马灯的样式效果,于是就自己尝试实现一下跑马灯样式的边框,虽然这种样式并不常见(基本没卵用),其使用场景我至今没想到,但是它足够花里胡哨,玩的就是花活。CSS才是前端最难精通

    2024年01月17日
    浏览(41)
  • 跑马灯实验(stm32)

    说明:以下内容参考正点原子的相关资料 这里使用的是位带操作来实现操作某个 IO 口的 1 个位 相应的库函数操作代码。 BSRR:端口位设置/清除寄存器 BRR:端口位清除寄存器 可以看到红绿灯交错闪烁

    2024年02月13日
    浏览(44)
  • uni小程序 跑马灯效果

    写在前面 前几天帮一个朋友咋小程序上加一个类似于跑马灯的效果,本自己手写了一个。(代码和截图都在下方) 效果展示 等我截图~~~ 代码展示(布局代码) 主要就是图片css哪里加了一个“ flex-shrink: 0; ”,因为只是本地的一个功能,所以我就图片数据就写死了,需要的自

    2024年02月12日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包