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

Answer 1

慕前端2302107 2020-07-06 16:42:32

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

Answer 2

Salvatorewang 2020-02-27 22:42:55

swiperOption:{

          pagination: {

            el: '.swiper-pagination'

          }

        },

得这样写才行

pagination: '.swiper-pagination'

这样渲染不出来

• 村口胡大爷 #1

  这样也渲不出来

Answer 3

灿烂__ 2019-12-31 10:28:29

新版本也能渲染，我目前是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'
      }
      ]
    }

Answer 4

粉红色的小猪佩奇 2019-12-24 16:21:03

我也遇到了这样的情况，安装旧版本才得以解决

Answer 5

Dell 2019-12-12 01:40:25

十有八九是版本号和我的课程里面的版本号不一致，你查一下package.json里面的版本，和我的版本是否一致。