轮播没有小白点

来源:7-4 Vue项目首页 - 首页轮播图

慕后端5911336

2019-06-26

<template>

<div class="wrapper">

<swiper :options="swiperOption">

<swiper-slide v-for="item of 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: {

el: '.swiper-pagination'

},

loop: true

},

swiperList: [{

id: '001',

imgUrl: 'https://imgs.qunarzz.com/sight/p0/1805/35/35d8ce88ca9b2488a3.water.jpg_256x160_1218274a.jpg'

}, {

id: '002',

imgUrl: 'https://imgs.qunarzz.com/sight/p0/201305/31/956e01092f573b9cc8d65eac.jpg_256x160_9a387fdb.jpg'

}]

}

}

}

script>

<style lang='stylus' scoped>

.wrapper >>> .swiper-pagination-bullet-active

background #fff

.wrapper

overflow hidden

width 100%

height 0

padding-bottom 31.25%

background #eee

.swiper-img

width 100%

style>



写回答

2回答

你的名字我知道

2019-06-30

你肯定是swiper-pagination前面的.号没加

class的.号

pagination:'.swiper-pagination'


2
0

Dell

2019-06-27

代码贴上来看下

1
2
Dell
回复
慕后端5911336
同学你得看下dom,是有元素没有展示,还是压根就没有元素。我感觉是你的swiper版本和我的不一致造成的,看下我的版本号,用我的这个版本。
2019-06-30
共2条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10726 学习 · 8205 问题

查看课程