vue-awesome-swiper实现循环滚动列表
安装指定版本cnpm install vue-awesome-swiper@3 --save-dev在页面中引入插件<template><div class="scorllBox"><div class="scrollnameList"><p v-for="(item, index) in scorllBoxListName" :key="index"&g
·
- 安装指定版本
cnpm install vue-awesome-swiper@3 --save-dev
- 在页面中引入插件
<template>
<div class="scorllBox">
<div class="scrollnameList">
<p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p>
</div>
<div @mouseenter="on_top_enter" @mouseleave="on_top_leave">
<swiper class="sm-content seamless-warp"
:options="swiperOption()"
:style="{height:scorllHeight + 'px'}"
v-if="scorllBoxList.length > 0"
ref="mySwiper"
>
<swiper-slide
class="sm-li scroll_item"
v-for="(item, idx) in scorllBoxList"
:key="idx"
>
<span>{{ item.name }}</span>
<span>{{ item.time }}</span>
<span>{{ item.area }}</span>
<span
v-if="item.state === '已处理' || item.state === '进入小区'"
style="color:#33a091"
>{{ item.state }}</span
>
<span v-else style="color:#a27741">{{ item.state }}</span>
</swiper-slide>
</swiper
>
</div>
</div>
</template>
<script>
//循环滚动
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
export default {
components: {
swiper,
swiperSlide
},
props: {
scorllBoxListName: {
default: () => {
return ["类别", "时间", "区域", "状态"];
}
},
scorllHeight: {
default: 180
},
scorllBoxList: {
default: () => {
return [];
}
}
},
//计算属性,获得可以操作的swiper对象
computed: {
mySwiper() {
// mySwiper 是要绑定到标签中的ref属性
return this.$refs.mySwiper.swiper
}
},
data() {
return {
};
},
methods: {
on_top_enter() {
this.mySwiper.autoplay.stop()
this.mySwiper.setTranslate(this.mySwiper.getTranslate());//鼠标移入立刻停止滚动
},
on_top_leave() {
this.mySwiper.autoplay.start()
},
swiperOption () {
return {
notNextTick: true,
direction: 'vertical',
speed: 1500,//滚动速度
autoplay: {
delay: 1,
disableOnInteraction: false,//用户操作swiper之后,是否禁止autoplay
waitForTransition: true,//等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
},
simulateTouch: false,//设置鼠标拖动无效
freeMode: true,//free模式,slide会根据惯性滑动且不会贴合
mousewheel: {
sensitivity: 2,//滚动一次切换几个slide
},
loop: true,//循环
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper
spaceBetween: 0,//slide之间的距离(单位px)
slidesPerView: Number(this.scorllHeight)/30, //slide可见数量,30: 行高
}
},
}
};
</script>
<style lang="less" scoped>
.scorllBox {
border: 1px solid #153f55;
overflow: hidden;
}
.seamless-warp {
width: 100%;
color: #fff;
overflow: hidden;
.scroll_item {
border-bottom: 1px solid #184f70;
display: flex;
justify-content: space-evenly;
text-align: center;
cursor: pointer;
line-height: 30px;
height: 30px;
box-sizing: border-box;
span {
flex: 1;
}
}
}
.scrollnameList {
color: #fff;
background-color: #042735cc;
height: 30px;
display: flex;
justify-content: space-evenly;
border-bottom: 1px solid #184f70;
align-items: center;
text-align: center;
p {
flex: 1;
color: #c3cbd1;
}
}
</style>
实现效果
3.实现无缝滚动
swiper默认样式的移动效果是transition-timing-function:ease-out
,这里需要修改css样式如下:
/deep/.swiper-wrapper{
transition-timing-function:linear !important;
}
实现效果:
参考地址:https://blog.csdn.net/u012570307/article/details/107203851/
更多推荐
已为社区贡献11条内容
所有评论(0)