黑马程序员技术交流社区

标题: 【上海校区】vuejs里面swiper自定义分页器 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-7-20 15:00
标题: 【上海校区】vuejs里面swiper自定义分页器

准备工作：

• 确保数据已经获取到
• swiper等各类引入工作已经做好
• 你会查api（如果你不会查文档我不知道怎么跟你描述这个问题）
  

正常的swiper在vue中成功渲染 ：

DOM:

• 
  
  <div class="swiper-container">
  
  
• 
  
          <div class="swiper-wrap">
  
  
• 
  
                  <div class="swiper-silde" v-for="item in items">{{item.xxx}}<div>
  
  
• 
  
          </div>
  
  
• 
  
          <div class="pagination"><div>
  
  
• 
  
  <div>
  
  
  

  JS:

• 
  
  var mySwiper = new Swiper('swiper-container', {
  
  
• 
  
          //…其它配置项
  
  
• 
  
          pagination: '.pagination',   // 分页器类名
  
  
• 
  
          paginationElement : 'div',  // 这里是指渲染的元素  跟paginationBulletRender中的div对应
  
  
• 
  
          paginationClickable:true,  // 这里是开启分页器的点击事件
  
  
• 
  
      paginationBulletRender(swiper,index, className){
  
  
• 
  
                  return  '<div class="'+className+'">'+items[index].xxx+'</div>';
  
  
• 
  
          // 这里className表示默认的swiper分页器类名
  
  
• 
  
          }
  
  
• 
  
  })
  
  
  

CSS：

自定义.swiper-pagination-bullets、.swiper-pagination-bullet-active、swiper-pagination-bullets:hover的样式

注意：

这里不能在paginationBulletRender方法里面返回的dom里面使用vue的事件，这里渲染无效，可能我自己操作哪里也有问题，但是没关系，因为swiper的分页器自带点击事件，我只需要把相应的classname遍历到元素中去swiper自带的分页器点击事件就生效了

paginationBulletRender方法内的原理：

为什么可以大胆的这么遍历呢？

因为swiper在vue渲染的时候会按照数据的条数去生成相应条数的分页器，所以自定义的时候也可以按照这个原理去自定义相应个数的分页器

swiper官网说明文档链接直达车： http://3.swiper.com.cn/api/pagination/2014/1217/70.html

---

作者: wuqiong    时间: 2018-7-23 11:43

---

作者: 摩西摩西OvO    时间: 2018-7-23 13:53

---

作者: 不二晨    时间: 2018-7-23 17:24
优秀，奈斯

---

作者: 吴琼老师    时间: 2018-7-26 16:25

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2