vue 公告栏组件

vue 之上滚公告栏组件

持续向上滚动文字，无缝滚动

NoticeTip.vue

公告栏组件

<template><div id="wrapper" ref="wrapper"><div ref="notice_ul1"><div v-for="item in noticeData" :key="item">{{ item }}</div></div><div ref="notice_ul2"></div></div>
</template><script>
export default {name: "NoticeTip",components: {},props: {noticeData: {type: Array,default() {return [];},},//速度speed: {type: Number,default() {return 50;},},},data() {return {timer: null, //定时器};},mounted() {this.roll(this.speed);this.$once("hook:beforeDestroy", () => {clearInterval(this.timer);});},methods: {//滚动roll(t) {this.$refs.notice_ul2.innerHTML = this.$refs.notice_ul1.innerHTML;this.$refs.wrapper.scrollTop = 0;let _this = this;this.timer = setInterval(_this.rollStart, t);this.$refs.wrapper.onmouseover = function () {clearInterval(_this.timer);};this.$refs.wrapper.onmouseout = function () {_this.timer = setInterval(_this.rollStart, t);};},//滚动开始rollStart() {if (this.$refs.wrapper.scrollTop >= this.$refs.notice_ul1.scrollHeight) {this.$refs.wrapper.scrollTop = 0;} else {this.$refs.wrapper.scrollTop++;}},},
};
</script>
<style  lang="scss" scoped>
* {margin: 0;padding: 0;
}#wrapper {overflow: hidden;height: 30px;width: 500px;background: #ccc;color: #006600;margin: 100px auto;text-align: center;
}
</style>

使用公告栏组件

 <NoticeTip :noticeData="noticeData"></NoticeTip>data() {return {noticeData:['恭喜 手机号为176****5610 的用户喜获 100元 现金券','恭喜 手机号为176****5610 的用户喜获 101元 现金券','恭喜 手机号为176****5610 的用户喜获 102元 现金券','恭喜 手机号为176****5610 的用户喜获 103元 现金券','恭喜 手机号为176****5610 的用户喜获 104元 现金券','恭喜 手机号为176****5610 的用户喜获 105元 现金券','恭喜 手机号为176****5610 的用户喜获 106元 现金券','恭喜 手机号为176****5610 的用户喜获 107元 现金券','恭喜 手机号为176****5610 的用户喜获 108元 现金券','恭喜 手机号为176****5610 的用户喜获 109元 现金券',],}
}

vue之从左到右的公告栏组件

转载：链接: link.

Notice.vue

<template><div class="wrap"><div id="box"><div id="marquee">{{text}}</div><div id="copy"></div></div><div id="node">{{text}}</div></div>
</template>
<script>
export default {props: ['lists'], data () {return {text: '' // 数组文字转化后的字符串}},methods: {move () {// 获取文字text 的计算后宽度  （由于overflow的存在，直接获取不到，需要独立的node计算）let width = document.getElementById('node').getBoundingClientRect().widthlet box = document.getElementById('box')let copy = document.getElementById('copy')copy.innerText = this.text // 文字副本填充let distance = 0 // 位移距离// 设置位移setInterval(function () {distance = distance - 1// 如果位移超过文字宽度，则回到起点if (-distance >= width) {distance = 16}box.style.transform = 'translateX(' + distance + 'px)'}, 40)}},// 把父组件传入的arr转化成字符串mounted: function () {for (let i = 0; i < this.lists.length; i++) {this.text += ' ' + this.lists[i]}},// 更新的时候运动updated: function () {this.move()}
}
</script>
<style scoped>/*样式的话可以写*/.wrap {overflow: hidden;background: white;}#box {width: 500%;}#box div {float: left;}#marquee {margin: 0 16px 0 0;}#node {position: absolute;z-index: -99;top: -99px;}
</style>

使用组件

<template><div><Notice :lists="lists"></Notice></div>
</template><script>
import Notice from './Notice'
export default {components: {Notice},data () {return{lists:['温馨提示：根据相关规定，请旅客凭有效身份证上车，无需抵押其他']   //轮播中的文字}}
}
</script><style scoped></style>

vue 公告栏组件相关推荐

Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
Vue父组件网络请求回数据后再给子组件传值demo示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票这里demo使用延迟执行模拟网络请求:父组件给子组件需要使用自定义属性 Prop ,下面是示例代码: &l ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
从零实现Vue的组件库（十）- Select 实现
当选项过多时,使用下拉菜单展示并选择内容. Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显: 单选.多选的区分,以及对应处理. 1. 实例代码 <fat-sel ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...

vue 公告栏组件

目录

vue 之上滚公告栏组件

NoticeTip.vue

使用公告栏组件

vue之从左到右的公告栏组件

Notice.vue

使用组件

vue 公告栏组件相关推荐

最新文章

热门文章

vue 公告栏组件

目录

vue 之上滚 公告栏组件

NoticeTip.vue

使用公告栏组件

vue之从左到右的公告栏组件

Notice.vue

使用组件

vue 公告栏组件相关推荐

最新文章

热门文章

vue 之上滚公告栏组件