参考:https://www.jianshu.com/p/5e5e59065e9c

效果:

index.html:

<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>

vue:

          <div class="scrollBox" v-if="scrollArr.length>0">
<div class="swiper-banner swiper_vertical" id="swiper_vertical">
<div class="swiper-wrapper swiper-wrapper-vertical swiper_vertical">
<div class="swiper-slide swiper_vertical" v-for="(item,index) in scrollArr" :key="index">
<p class="text">
<img class="srollHead" :src="item.headimgurl" />
<span class="scrollName small red">{{item.mname}}</span>
<span class="small">刚刚购买</span>
</p>  
</div>
</div>
</div>
</div>
getImgs: function() { //created中调用
let _this = this;
_this.axios.get('请求链接').then(function(res) {
if (res.status === 200 && res.data.result === "0") {
let data = res.data.message.list;
for (let i in data) {
_this.scrollArr.push(data[i]);
}
_this.scrollLength = _this.scrollArr.length; _this.$nextTick(function() {
if (_this.scroll.length > 0) {
if (_this.scrollLength == 1) {
_this.isAutoplay = 0;
_this.isLoop = false;
} else {
_this.isAutoplay = 1;
_this.isLoop = true;
}
var mySwiper = new Swiper("#swiper_vertical", {
           direction: "vertical", //滚动方向
autoplay: _this.isAutoplay,
loop: _this.isLoop,
           speed:2000,
autoplayDisableOnInteraction: false,
preventLinksPropagation: false,
observer: true,
observeParents: true,
})
}
})
}
}).catch(function(err) {
console.log(err);
})
},
.small {
  font-size: .12rem;
} .red {
  color: red;
} .scrollBox {
width: 44%;
height: .4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .8);
color: #fff;
border-radius: 50px;
font-size: .12rem;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.80);
overflow: hidden;
position: relative;
position: absolute;
left: .1rem;
top: .1rem;
text-align: left;
z-index: 1;
} .text {
width: 87%;
margin: auto;
height: .32rem;
display: flex;
align-items: center;
} .srollHead {
width: .3rem;
height: .3rem;
border-radius: 50%;
} .scrollName {
width: 35.8%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 .05rem;
} .slide-enter-active,
.slide-leave-active {
transition: all 1.5s linear;
} .slide-enter {
transform: translateY(42px);
} .slide-leave-to {
transform: translateY(-42px);
} .swiper-wrapper {
font-size: 0;
} .swiper-wrapper-vertical {
transition-timing-function: linear !important;//无缝滚动
} .swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
font-size: 0;
position: relative;
} .swiper_vertical {
width: 100% !important;
display: flex;
}

vue swiper上下无缝轮播的更多相关文章

  1. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  2. 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件

    后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...

  3. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...

  4. 网站banner无缝轮播

    网站banner无缝轮播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  6. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. JQuery制作基础的无缝轮播与左右点击效果

    在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...

  9. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

随机推荐

  1. Hibernate4教程六(2):基本实现原理

    整体流程 1:通过configuration来读cfg.xml文件 2:得到SessionFactory 工厂 3:通过SessionFactory 工厂来创建Session实例 4:通过Sessio ...

  2. go之linux安装

    下载地址:https://golang.org/dl/ ubuntu16.04安装过程 官方安装文档:https://golang.org/doc/install?download=go1.11.4. ...

  3. Linux安装配置Nginx服务器

    如有需要可以加我Q群[308742428]大家一起讨论技术,有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 前言 今天搭建nginx服务器,来访问静态资源文件. Nginx ...

  4. Android应用图标尺寸规范(转)

    转自:http://blog.sina.com.cn/s/blog_4b20ae2e0101h84o.html Android Icon Size and Location for Apps DENS ...

  5. 转帖---把eclipse默认的编译文件夹build改为web-inf/classess文件夹

    1.在web-info下新奸classess文件夹 2.右键项目  3.选择java build path ————————————

  6. Tomcat 配置访问限制:访问白名单和访问黑名单

    最近公司的阿里云服务器上配置的 Tomcat 服务器运行 java的环境,但是通过观察 Tomcat 这几天的日志发现,有很多莫名其妙的 IP 访问主机下莫名其妙的地址,如:/80./testprox ...

  7. Django之Form操作

    一.Form基础 (一)Form的作用 Django的Form主要有以下几大作用: 生成HTML标签 验证用户数据(显示错误信息) Form提交保留上次提交数据 初始化页面显示数据 (二)实例 一般网 ...

  8. kNN算法和决策树

    的整数. 下面看书上给出的实例: from numpy import * import operator def createdataset(): group=array([[1.0,1.1],[1. ...

  9. JavaIO流之File操作

    IO流: File: File(文件/文件夹地址)构造函数: public File(String path); public File(String parentPath, String child ...

  10. 如何修改magento分类页面的产品的显示个数

    经常的有客户问,怎么修改分类页面的产品的个数 这个是magneto后台操作的设置问题 打开后台,在英文状态下: system-->configuration 进入后,点击catalog Prod ...