vue项目学习travel： 7-swiper逻辑的实现

这部分东西比较多。主要分以下几部分

1、swiper包裹，和正常的写法一样。

2、当数据大于8条的时候，需要通过计算属性将数据分割成n个数组。

js代码如下：

computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }

然后呢：

改变上面的v-for：

<swiper>
      <swiper-slide v-for="(page, index) in pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgURL" alt="">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>

这时候就基本完成了，最后如果文字超出，加省略号。为了公用，新建mixin。

ellipsis()
  overflow hidden
  white-space nowrap
  text-overflow ellipsis

使用：

扫描二维码关注公众号，回复： 594295 查看本文章

到此基本结束，，js部分不是很明白。下次补上。