swiper的最简单例子跑不通，所有slide都堆在一起了，这个问题困扰我很久了，查网上发现并没有少写什么啊，求明眼人提示一下，多谢。效果图：代码：
<template>
<div class="lasted-books">
<div class="content">
<div class="lasted-list">
<div class="list-title">
<p class="title-text">最新上架</p>
</div>
<swiper :options="swiperOptionIn" class="swiper-position">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div class="swiper-pagination-white swiper-pagination-position" slot="pagination"></div>
</swiper>
</div>
</div></div></template><script type="text/ecmascript-6">
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import { mapGetters } from 'vuex'
export default { components: {
swiper,
swiperSlide
},
data () { return { swiperOptionIn: { centeredSlides:true, pagination: '.swiper-pagination-white', paginationClickable: true, slidesPerView:'auto', grabCursor : true,
}
}
}, computed: {
...mapGetters({ bookList: 'books'
})
}
}</script><style scoped lang="less" rel="stylesheet/less">
.lasted-books {
margin-top: 50px;
.content {
.lasted-list {
background: #fff;
margin-top: 10px;
box-shadow: 0 0 10px #DDD;
.list-title {
height: 50px;
text-align: center;
line-height: 50px;
}
.swiper-position {
position: relative;
cursor: pointer;
.swiper-slide {
width:100%;
display: flex;
text-align:center;
font-size:28px;
justify-content:center;
align-items:center;
background:#F2F2F2;
}
}
.swiper-pagination-position {
position: absolute;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: center;
}
}
}
}
添加回答
举报
0/150
提交
取消