Swiper、vue-awesome-swiper中文文档
中文文档 找了好久才找到,适用于vue-awesome-swiper滑动组件swiperOption: {height: 380,speed: 500,//切换速度watchOverflow: true, //当没有足够的slide切换时,例如只有1个slide(非loop),swiper会失效且隐藏导航等。默认不开启这个功能...
·
中文文档 找了好久才找到,适用于vue-awesome-swiper滑动组件
swiperOption: {
height: 380,
speed: 500,//切换速度
watchOverflow: true, //当没有足够的slide切换时,例如只有1个slide(非loop),swiper会失效且隐藏导航等。默认不开启这个功能。
loop: true,//开启循环模式
slidesPerView: 1,
spaceBetween: 30,
preventClicksPropagation: true,//阻止click冒泡。拖动Swiper时阻止click事件。
simulateTouch: false,//鼠标模拟手机触摸。默认为true,Swiper接受鼠标点击、拖动。
pagination: {
el: '.swiper-pagination',
},
on: {
touchEnd: function (event) {
//你的事件
},
}
}
在data中定义swiperOption对象,使用v-bind绑定到
<template>
<!--在此处添加渲染的内容-->
<div class="swiper-box">
<swiper :options="swiperOption" class="swiper">
<!-- slides -->
<swiper-slide class="swiper-slide" v-for="(item,index,key) in result" :key="key">
<div class="item-img">
<img :src="item.imgUrl" alt="" width="100%" height="100%">
<div class="item-title">{{item.title}}</div>
<div class="b"></div>
</div>
<div class="item-text">
<p>{{item.text}}</p>
<button class="item-btn" @click="clickItem($event,index)">查看更多</button>
</div>
</swiper-slide>
</swiper>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</div>
</template>
.swiper-box {
width: 80%;
height: 35rem;
margin: 2rem auto;
position: relative;
}
.swiper-box .swiper {
width: 100%;
height: 100%;
}
.swiper-box .swiper-pagination {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.swiper .swiper-slide {
background-color: #ffffff;
box-shadow: 0.02rem 0.1rem 1.78rem 0.02rem rgba(0, 0, 0, 0.09);
}
.item-img {
width: 100%;
height: 17.5rem;
position: relative;
}
.item-title {
position: absolute;
right: 2rem;
bottom: 0.5rem;
font-size: 1.7rem;
color: #d3a359;
}
.b {
background-color: #d3a359;
width: 2rem;
height: 0.2rem;
position: absolute;
right: 2rem;
bottom: 0;
}
.item-text {
width: 100%;
height: 17.5rem;
position: relative;
}
.item-text p {
width: 80%;
height: 15.5rem;
margin: 0 auto;
padding: 2rem 0 0;
line-height: 2rem;
}
.item-btn {
width: 7.5rem;
height: 2.5rem;
border-radius: 0.3rem;
border: solid 0.1rem #d3a359;
background-color: #ffffff;
position: absolute;
left: 0;
right: 0;
bottom: 4rem;
margin: auto;
font-size: 1.2rem;
color: #d3a359;
}
更多推荐
已为社区贡献7条内容
所有评论(0)