老师，swiper-pagination的圆点渲染不出来是为什么？并且无报错

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

qq_Kamiya_ahmnuI

2019-12-11

写回答

5回答

慕前端2302107

2020-07-06

旧版本语法和最新版本语法不一致，注意区别，从官网复制下来的代码语法和老师的有细微差别注意仔细校对，所以小圆点DOM可以构建出来却渲染不出来。

Salvatorewang

2020-02-27

swiperOption:{

pagination: {

el: '.swiper-pagination'

}

得这样写才行

pagination: '.swiper-pagination'

这样渲染不出来

村口胡大爷

这样也渲不出来

2020-07-11

共1条回复

灿烂__

2019-12-31

新版本也能渲染，我目前是cli4.x的版本，swiper采用for循环的方式添加图片url，在data里定义swiperSlide的url就好

  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">
        <img class="swiperImg" :src="slide.url" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

data (){
    return {
      swiperOption :{
        pagination: {
            el: '.swiper-pagination'
        }
      },
      swiperSlides:[{
        url:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/4400f4a848b1f5920c64b801deba4692.jpg_750x200_c9a739ba.jpg'
      },{
        url:'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/201912/bbfb57e653272295cdb061c16f1d2ec4.jpg_750x200_fe2920b0.jpg'
      }
      ]
    }