vue 标题上下滚屏 无缝轮播
参考网址:https://www.jianshu.com/p/b6813193ca0d
<template>
<div class="wrap" :style="{height:height + 'px'}">
<div
class="box"
:style="{top: '-' + height + 'px', height: (height * actualMap.length) + 'px'}"
>
<div
class="item"
v-for="(item,index) in actualMap"
:key="index"
@click="showPreview(item)"
:style="{'height':height + 'px','line-height':height + 'px'}"
>
<div
class="inner_content"
:style="{'line-height':height/2 + 'px'}"
>{{item.rollTitle == "" ? item.title : item.rollTitle}}</div>
<div
class="amount_title"
:style="{'line-height':height/2 + 'px'}"
>{{item.pubTm|formatDate2}} · 浏览次数 {{item.viewCount}}</div>
</div>
</div>
</div>
</template> <script>
export default {
name: "selfCarousel", // 自定义标题栏走马灯
props: {
height: {
default: 40,
type: Number
},
contentArr: {
default: [],
type: Array
}
},
data() {
return {
box: null,
timer: undefined,
moveTimer: undefined,
index: 1
};
},
computed: {
actualMap: function() {
let Tmp = this.contentArr
? JSON.parse(JSON.stringify(this.contentArr))
: [];
if (this.contentArr.length > 0) {
Tmp.unshift(this.contentArr[this.contentArr.length - 1]);
Tmp.push(this.contentArr[0]);
}
return Tmp;
}
},
mounted() {
this.box = document.getElementsByClassName("box")[0];
this.inintTimer();
let _this = this;
$(".wrap").hover(
function(e) {
clearInterval(_this.timer);
_this.timer = undefined;
},
function() {
_this.inintTimer();
}
);
},
methods: {
showPreview(row) {
this.$emit("showPreview", row);
},
moveWidthIndex() {
var l = this.index * -this.height - this.box.offsetTop;
var count = 0;
clearInterval(this.moveTimer);
let self = this;
this.moveTimer = setInterval(function() {
count++;
self.box.style.top =
self.box.offsetTop + l / (self.contentArr.length * 2) + "px";
if (count >= self.contentArr.length * 2) {
clearInterval(self.moveTimer);
self.box.style.top = self.index * - self.height + "px";
}
}, 20);
},
nextStep() {
this.index++;
if (this.index == this.actualMap.length) {
this.index = 2;
this.box.style.top = "-" + this.height + "px";
}
this.moveWidthIndex();
},
inintTimer() {
let self = this;
this.timer = setInterval(function() {
self.nextStep();
}, 2000);
}
}
};
</script> <style lang="less" scoped>
.wrap {
width: 100%;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
position: absolute;
}
.item {
width: 100%;
}
.inner_content {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
color: #333333;
}
.amount_title {
font-size: 14px;
color: #999999;
}
</style>
vue 标题上下滚屏 无缝轮播的更多相关文章
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- 网站banner无缝轮播
网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- bootstrapcss3触屏滑块轮播图
插件描述:bootslider响应bootstrapcss3触屏滑块轮播图 小海已经好久没分享技术性文章了,这个基于bootstrap的触屏版轮播图绝对满足大家的胃口,并且支持移动端触摸滑动.功能上, ...
- js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...
- jQuery插件slides实现无缝轮播图特效
初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
- jQuery图片无缝轮播
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- JPEG与JPEG2000
JPEG与JPEG2000 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 背景介绍 JPEG 全名为 Joint Photographic Experts ...
- 前端接收 post 请求返回的文件
坐标过多无法用Get请求,只能用post下载. 但发现ajax发送的post请求没有触发下载,返回的流媒体会存在于接口返回的response中. 查询发现AJAX并不会唤起浏览器的下载窗口,AJAX设 ...
- NET Core 3.0中的WPF
在.NET Core 3.0中的WPF中使用IOC图文教程 我们都知道.NET Core 3.0已经发布了第六个预览版,我们也知道.NET Core 3.0现在已经支持创建WPF项目了,刚好今天在 ...
- [转载]Oracle触发器详解
转载自http://blog.csdn.net/indexman/article/details/8023740/ 触发器是许多关系数据库系统都提供的一项技术.在oracle系统里,触发器类似过程和函 ...
- element-ui image放大 v2.x版本 点击无反应
1.官网文档:由于官网上没有写对应组件的版本信息,默认是最新版本.所以在老版本里,可能还没有这个功能. 2.github源码日志:提交时间是2019.07.25,确认后发现老版本的确没有此功能. 3. ...
- C#传递参数调用exe程序
今天公司让我把Winform程序里的一块单独成一个exe文件,从原程序中打开新的exe程序,这就涉及到参数的传递,故来记录下传递参数到exe程序的方式 第一种方式 首先在程序A中添加引用using S ...
- NoSQL数据库一Redis基本使用
基本操作 参考教程:https://www.yiibai.com/redis/Redis 是 Key-Value 内存数据库,操作是通过各种指令进行的,比如 SET 指令可以设置键值对,而 GET 指 ...
- 并不对劲的THUWC2020
day -inf 因为一些(不是寒假时长锐减的)小原因,今年(2020)THUWC在去年(2019)就举办了! 这导致某个小弱智只能临阵磨枪了QAQ- day 1 早: 没有看到吕爷,签到.试机. 签 ...
- hdu 4857 反向拓扑问题
尤其要注意拓扑的分层问题 不难理解 就是不怎么好想到 拓扑的思路这里就不累述了 #include <iostream> #include <cstdio> #include & ...
- [Vue]axios 发出请求的config
这些是用于发出请求的可用配置选项. 只有url是必需的. 如果未指定方法,请求将默认为GET. { // `url`是将用于请求的服务器URL url: '/user', // `method`是发出 ...