vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
一、npm 安装
如果你想安装插件(自己写的)
安装
# install dependencies
npm i marquee-components
使用
在main.js引入
import marquee from 'marquee-components'
vue.use(marquee );
在页面使用
export default {
name: 'app',
data () {
return {
msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
}
}
}
val后加文字即可,当超过文本容器长度时,触动横向滚动效果。
二、直接引入组件
marquee组件
{{text}}
{{text}}
export default {
name: 'marquee',
props: ['val'],
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = settimeout(() => {
this.move()
cleartimeout(timer)
}, 1000)
},
mounted () {
for (let item of this.val) {
this.text += ' ' + item
}
},
methods: {
move () {
let maxwidth = document.queryselector('.marquee-wrap').clientwidth
let width = document.queryselector('.getwidth').scrollwidth
if (width <= maxwidth) return
let scroll = document.queryselector('.scroll')
let copy = document.queryselector('.copy')
copy.innertext = this.text
let distance = 0
this.timer = setinterval(() => {
distance -= 1
if (-distance >= width) {
distance = 16
}
scroll.style.transform = 'translatex(' + distance + 'px)'
}, 20)
}
},
beforedestroy () {
clearinterval(this.timer)
}
}
.marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 16px;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 16px;
font-family: "微软雅黑 light";
}
.scroll {
display: flex;
}
.getwidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
其他页面引入marquee组件
import marquee from './marquee'
name: 'index',
components: {
marquee
},
data () {
return {
title: ''
}
},
总结
以上所述是小编给大家介绍的vue替代marquee标签超出宽度文字横向滚动效果,希望对大家有所帮助
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果相关推荐
- 前端vue实现广告条左右上下滚动,一个marquee标签就完事
通过标签marquee实现的效果如下: 代码如下: marquee标签属性使用如下: behavior: 设置文本如何滚动.属性值有3种: scroll - 循环滚动.默认值. slide - 滚动一 ...
- 【Echarts】数值标签在柱状图上的横向纵向样式调整及数值标签超出图表范围向柱体内部调整移动
需求一: 数值标签在柱子上横纵向展示. 效果: 横向 纵向 ... series: [{type: 'bar',itemStyle: {},label: { show: true, position: ...
- vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
- html 自动滚动通知,Marquee标签实现跑马灯、滚动公告、通知效果
1.Marquee基本语法 - 啦啦啦,我会移动耶! 2.文字移动属性 (1)方向 :direction=# #=left, right,up,down 例: 啦啦啦,我从右向左移! 啦啦,我从左向右 ...
- vue watch 第一次不执行_Vue 实现前进刷新,后退不刷新的效果
https://github.com/woai3c/Front-end-articlesgithub.com 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页, ...
- python3 正则 去除 html标签、提取正文内容_Python通过正则表达式去除(过滤)HTML标签,提取文字...
# -*- coding: utf-8-*- import re ##过滤HTML中的标签 #将HTML中标签等信息去掉 #@param htmlstr HTML字符串. def filter_tag ...
- 解决小程序Input框输入文字后触摸并滚动屏幕不松开,input内文字一起滚动问题
在Input内输入文字后,键盘此时还是抬起状态,此时轻触屏幕空白处,不松手滑动屏幕,input内的文字会跟着一起向下滑动. 解决方法:给最外层的View标签添加onTouchStart事件,开始触摸时 ...
- marquee标签_html滚动文字
marquee标签可以让我们在网页中编写的文字动起来,不论是上下滚动还是左右滚动都可以通过marquee标签中的属性来设置.语法:﹤marquee﹥需要被滚动的文字﹤/marquee﹥: 默认下mar ...
- html 自动滚动标签,HTML滚动标签(marquee标签)
以下为学做网站论坛关于"HTML滚动标签(marquee标签)"讲解视频教程. HTML marquee标签介绍 marquee标签又叫滚动标签.它是用来控制一段文本或其它元素滚动 ...
最新文章
- eclipse 操作HDFS时出现Permission denied的三个解决方法
- 做App还是微信公众号,你该如何抉择?
- C++ string清空并释放内存空间的两种方法(shrink_to_fit()、swap())
- 一个列中多行求和_Excel 用选项求和及用快捷键快速求和,同时对多单元格求和...
- Daily Scrum 11.18
- Jquery全选单选功能
- rabbitmq 消息长度_Spring Boot教程(29) – RabbitMQ必备基础
- ORA-01658: 无法为表空间中段创建 INITIAL 区
- java报错空指针异常_springboot全局异常捕获,真香
- Tornado框架的初步使用
- 基于ssh人事考勤管理系统
- 如何让蓝牙模块进入AT模式(避坑)
- 键盘拆开重新安装步骤_键盘拆卸后怎么安装?
- Android模拟器启动报错:gpu found. vendor id 1002 device id 0x
- 网站提示HTTP503Service Unavailable的处理办法
- 《操作系统真象还原》——0.25 指令集、体系结构、微架构、编程语言
- SVN拉取、提交文件
- android 自定义view 动画效果,Android自定义view实现阻尼效果的加载动画
- Shell(bash)脚本入门
- 印象笔记,石墨笔记和Effie哪个更适合学生?
热门文章
- [独家放送]Unity2019更新规划速览,将有官方的可视化编程!
- 下列关于java集合说法错误的是_下列关于Spring的说法错误的是( )。
- OpenShift 4 - DevSecOps Workshop (9) - 向Dev环境部署应用镜像
- OpenShift 4 - 验证 Pod 内部容器 使用 CA 和 ServiceAccount Token访问API服务
- OpenShift 4 之Kafka(2)-配置Kafka Bridge,通过HTTP访问Kafka Topic
- (三)比特币时间序列数据的AI异常检测
- 微信开源推理加速工具 TurboTransformers,性能超越 PyTorch/TensorFlow 与主流优化引擎
- 非结构化数据上下文中的GraphQL
- 网易逆水寒服务器型号,从服务器爆满到无人问津的经典游戏
- php 获取父类名称,[typecho]获取 父级分类 名称?