Swiper6+版本 在vue中的应用,竖向滚动
本文采用的Swiper6.7.0版本
安装swiper
cnpm install swiper@6.7.0 -S
注意:如果需要设置禁止鼠标拖动,但是每条slide需要点击是这个属性allowTouchMove: false
数据结构:
WarnData: [
{ path: 'WarnTable', title: 'slide1', code: '1', quantity: 20, amount: 100 },
{ path: 'WarnTable', title: 'slide2', code: '1', quantity: 20, amount: 100 },
{ path: 'WarnTable', title: 'slide3', code: '1', quantity: 20, amount: 100 },
{ path: 'WarnTable', title: 'slide3', code: '1', quantity: null, amount: 100 },
{ path: 'WarnTable', title: 'slide5', quantity: null, code: '1', amount: 100 }
]
<template>
<div class="swiper-container">
<div class="swiper-wrapper warn_table_ul">
<div v-for="(item, index) in value" :key="index" :data-code="item.wtype" data-path="DetailTable" :data-title="item.wtypeText" class="flex-center-space warn_table_li swiper-slide">
<div class="flex-center-start">
<img :src="icon">
{{ item.wtypeText }}
</div>
<div class="flex-center-end">
<span>{{ item.quantity ? item.quantity + '/' : '' }}{{ item.amount }}</span>
{{ item.quantity ? '台/' : '' }}万
<i class="el-icon-caret-right" />
</div>
</div>
</div>
</div>
</template>
<script>
// Swiper6+版本 配置参考:https://swiperjs.com/migration-guide
import Swiper, { Autoplay } from 'swiper'
import 'swiper/swiper.min.css'
Swiper.use([Autoplay])
let vm = null
export default {
components: {
},
props: {
value: {
type: Array,
default() {
return []
}
}
},
data() {
return {
icon: require('@/assets/main_images/icon_warn_02.png')
}
},
activated() {
// 看自己的需求,本项目点击slide之后需要跳转到详情,但是这个页面没有关闭,所以需要重新初始化,不然再回到这个页面,slide就不会自动滚动了
this.init()
},
mounted() {
this.init()
},
methods: {
init() {
vm = this
new Swiper('.swiper-container', {
direction: 'vertical', // 垂直切换
loop: true,
allowTouchMove: false,
observer: true, // 修改swiper自己或子元素时,自动初始化swiper
observeParents: true,
autoplay: {
disableOnInteraction: false, // 触碰后不会停止自动切换
delay: 3000,
pauseOnMouseEnter: false // 鼠标置于swiper时暂停自动切换,鼠标离开时恢复自动切换
},
slidesPerView: 'auto', // 能够同时显示的slides数量:'auto'则自动根据slides的高度来设定数量
on: {
click: function(swiper, event) { // 在此处实现相关业务逻辑
const data = {
code: swiper.clickedSlide.attributes['data-code'].value,
path: swiper.clickedSlide.attributes['data-path'].value,
title: swiper.clickedSlide.attributes['data-title'].value
}
vm.goto(data)
}
}
})
},
goto(item) {
const query = {
code: item.code,
title: item.title,
psiType: 'warn'
}
this.$emit('goto', item.path, query)
}
}
}
</script>
<style lang="scss" scoped>
// @import 'swiper.css';
.warn_table_ul {
margin: 0;
width: calc(100% - 10px);
padding: 0 5px;
.warn_table_li {
width: 100%;
height: 3.0625rem;
background: #062B57;
font-size: 1rem;
color: #D7E9EE;
margin-bottom: 1.5rem;
&:hover{
cursor: pointer;
background: #143C6C;
}
&:last-child{
margin-bottom: 0;
}
img{
width: 1.5rem;
height:1.5rem;
margin-left: 0.8125rem;
margin-right: 1.0625rem;
}
.flex-center-start{
font-size: 1.125rem;
}
.flex-center-end{
font-size: 1rem;
color: #D7E9EE;
span{
margin-right: 0.8125rem;
font-size: 1.25rem;
font-family: Source Han Sans SC;
font-weight: 400;
color: #FF3636;
}
.el-icon-caret-right{
color: #3FADCC;
font-size: 1rem;
margin-left: 1.25rem;
margin-right: 0.625rem;
}
}
}
}
</style>