vue实现消息的无缝滚动效果的示例代码
朋友的项目里要实现一个消息无缝滚动的效果，中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题，我研究了一天终于解决了这个1S的小问题
项目环境vue-cli ，请自行配置好相应的，环境及路由，这里主要介绍实现的方法
第一步在模板中 使用v-for方法循环出消息列表
<template>
<div id="box">
<ul id="con1" ref="con1" :class="{anim:animate==true}">
<li v-for='item in items'>{{item.name}}</li>
</ul>
</div>
</template>
第二步在<script>标签中放置消息数组和具体的method 方法。
<script>
export default {
data() {
return {
animate:false,
items:[ //消息列表对应的数组
{name:"马云"},
{name:"雷军"},
{name:"王勤"}
]
}
},
created(){
setInterval(this.scroll,1000) // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
},
methods: {
scroll(){
let con1 = this.$refs.con1;
con1.style.marginTop='-30px';
this.animate=!this.animate;
var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
setTimeout(function(){
that.items.push(that.items[0]);
that.items.shift();
con1.style.marginTop='0px';
that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
},500)
}
}
}
</script>
<style>
*{
margin: 0 ;
padding: 0;
}
#box{
width: 300px;
height: 32px;
line-height: 30px;
overflow: hidden;
padding-left: 30px;
border: 1px solid black;
transition: all 0.5s;
}
.anim{
transition: all 0.5s;
}
#con1 li{
list-style: none;
line-height: 30px;
height: 30px;
}
</style>
以上就是这篇文章的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue.js实战之通过监听滚动事件实现动态锚点
前言 前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用
-
vue监听滚动事件实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg
-
基于vue的fullpage.js单页滚动插件
基于vue的fullpage.js使用方法,供大家参考,具体内容如下 功能概述 可实现移动端的单页滚动效果,支持横向滚动和纵向滚动 兼容性 目前还未进行大规模兼容性测试.有bug请提问至issues 安装 npm install vue-fullpage --save commonjs import VueFullpage from 'vue-fullpage' Vue.use(VueFullpage) 或 var vueFullpage = require('vue-fullpage') Vu
-
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-
-
使用vue制作FullPage页面滚动效果
前言 已经有好久没有更新博客了,大三下了要准备找实习了,才发现自己很多东西都不会,所以赶紧找了个现在流行的MVVM框架学习一下.我学习的是Vue,所以拿Vue写了一个FullPage的模板,可以供自己和其他人使用. 项目的地址是:https://github.com/hzxszsk/vue-fullpage 项目讲解 为了加深理解,我把我制作这个FullPage页面的思路和流程记录下来,也可以给其他和我一样的初学者一个参考. 分解思路 首先,我根据Vue的组件开发思想,把这个FullPage页面
-
解决Vue页面固定滚动位置的处理办法
最近做项目遇到一个问题,就是Vue滚动不固定,网上找了一些资料,说下 vue 固定滚动位置的处理办法. 问题描述: 通常见于 列表页List -> 详情页Detail 的情况, 从列表的某一项x 进入到详情页, 再返回的时候, 希望列表的位置固定在x, 而不是回到顶部了. vue-router 里面是有一个 scrollBehavior 的, 但是这个玩意只能在 history 模式下面使用, 而我用的 hash 模式. 所以我们要自己实现嘛, 思路简单:List 里面监听滚动, 记录滚动位置
-
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch
-
基于vue的下拉刷新指令和滚动刷新指令
小编最近在实现移动端列表页面显示的时候一直在思考如何实现列表的自动更新数据,对于大多数Native App或者Web App,在列表的底部增加"加载更多"的按钮也是解决这样的问题一种交互的方式,当然,这样的交互其实还好,不过根据用户的操作习惯来看,似乎滚动刷新更多数据和下拉刷新当前数据的操作方式,更符合用户对列表分页数据的读取习惯,因此,在这里小编想简单的说说,这次在小编系统中所使用的下拉刷新和滚动刷新的实现方式! 其实,这种实现数据加载的原理很简单 在滚动刷新的时候,需要在列表滚动到
-
Vue.js上下滚动加载组件的实例代码
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的.就短短的150行代码. 组件代码 // scrollLoader.vue // 滚动加载组件 <style scoped> .container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;} .loading{ width: 100%; height: 40px; position: relative; overflo
-
vue实现消息的无缝滚动效果的示例代码
朋友的项目里要实现一个消息无缝滚动的效果,中途遇到了一点小bug,每组消息滚动完再次循环时会出现停留两倍的时间间隔问题,我研究了一天终于解决了这个1S的小问题 项目环境vue-cli ,请自行配置好相应的,环境及路由,这里主要介绍实现的方法 第一步在模板中 使用v-for方法循环出消息列表 <template> <div id="box"> <ul id="con1" ref="con1" :class="
-
vue实现消息向上无缝滚动效果
本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下 代码: <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()"> <li v-for="item in noticeList"> ... </li> <
-
vue实现公告栏文字上下滚动效果的示例代码
本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text
-
JavaScript无缝滚动效果的实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&
-
JS平滑无缝滚动效果的实现代码
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {
-
Qt实现字幕滚动效果的示例代码
目录 一.项目介绍 二.项目基本配置 三.UI界面设计 四.主程序实现 4.1 widget.h头文件 4.2 widget.cpp源文件 五.效果演示 一.项目介绍 利用QTimer实现字幕滚动功能,可以实现自行更改文本内容.自适应文本大小.自由调整速度等功能. 二.项目基本配置 新建一个Qt案例,项目名称为“TextScroll”,基类选择“QWidget”,取消创建UI界面复选框的选中状态,完成项目创建. 三.UI界面设计 无UI界面 四.主程序实现 4.1 widget.h头文件 声明私
-
Vue下拉框双向联动效果的示例代码
一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项,分别为选项A和选项B,如下所示: <el-col :span=&q
-
基于vue.js无缝滚动效果
一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(
-
vue.js-div滚动条隐藏但有滚动效果的实现方法
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
-
vue实现消息无缝滚动效果
本文实例为大家分享了vue实现消息无缝滚动效果的具体代码,供大家参考,具体内容如下 JS export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军"}, {name:"王勤"} ] } }, created(){ setInterval(this.scroll,1000) }, methods: { scroll(){ this.animate