请问为啥图片显示不了 还有小圆点的问题也显示不了
来源：2-6 Vue项目首页 - 首页轮播图（2）
T9FernandoTorres
2020-06-05 18:00:05
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="item in swiperList" :key="item.id"><img class="swiper-img" src="item.imgUrl"></swiper-slide>
<div class="swiper-pagination " slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data(){
return{
swiperOption:{
pagination:'.swiper-pagination',
loop:true
},
swiperList:[{
id:'0001',
imgUrl:"https://imgs.qunarzz.com/sight/p0/1501/89/babe532d89b23ac070bc09dd092dc9b0.water.jpg_710x360_de6badea.jpg"
},{
id:'0001',
imgUrl:"//imgs.qunarzz.com/sight/p75/201211/03/c5e69645fb3de0e193835fbb.jpg_710x360_79a8ab8c.jpg"
}]
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background white !important
.wrapper
width 100%
height 0
padding-bottom 31.25%
background #cccccc
overflow hidden
.swiper-img
width 100%
</style>
1回答
-
同学你好，解答如下：
1、图片出不来，是因为src应该是动态绑定的：
2、小圆点出不来是图片高度的问题：（swiper-container是插件渲染出来的dom元素）
图片高度超出了wrapper盒子的padding-bottom值。因为圆点是相对于swiper-container盒子进行定位的，而这个盒子高度是由图片高度撑起来的，超出padding-bottom值部分隐藏了，所以看不到小圆点。建议修改圆点相对于wrapper盒子定位：
效果：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
1
相似问题