一.Vue2.5开发去哪儿网app首页⑤——图标区域轮播逻辑实现

 实现图标区域可以轮播

<template>
  <swiper :options="swiperOption">
    <swiper-slide>
      <div class="icons">
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="景点门票">
        </div>
        <p class="icon-desc">景点门票</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" alt="一日游">
        </div>
        <p class="icon-desc">一日游</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" alt="杭州必游">
        </div>
        <p class="icon-desc">杭州必游</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png" alt="春节出游">
        </div>
        <p class="icon-desc">春节出游</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png" alt="滑雪季">
        </div>
        <p class="icon-desc">滑雪季</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png" alt="西湖">
        </div>
        <p class="icon-desc">西湖</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png" alt="泡温泉">
        </div>
        <p class="icon-desc">泡温泉</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png" alt="西溪湿地">
        </div>
        <p class="icon-desc">西溪湿地</p>
      </div>
    </div>
    </swiper-slide>
    <swiper-slide>
      <div class="icons">
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png" alt="景点门票">
        </div>
        <p class="icon-desc">景点门票</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png" alt="一日游">
        </div>
        <p class="icon-desc">一日游</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png" alt="杭州必游">
        </div>
        <p class="icon-desc">杭州必游</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png" alt="春节出游">
        </div>
        <p class="icon-desc">春节出游</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png" alt="滑雪季">
        </div>
        <p class="icon-desc">滑雪季</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png" alt="西湖">
        </div>
        <p class="icon-desc">西湖</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png" alt="泡温泉">
        </div>
        <p class="icon-desc">泡温泉</p>
      </div>
      <div class="icon">
        <div class="icon-img">
          <img class="icon-img-content" src="http://img1.qunarzz.com/piao/fusion/1803/b8/c5dcdb58deec2402.png" alt="西溪湿地">
        </div>
        <p class="icon-desc">西溪湿地</p>
      </div>
    </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'HomeIcons',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .icons
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 50%
    //background-color: #eee
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      //background-color: red
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0.44rem
        box-sizing: border-box
        padding: 0.01rem
        //background-color: blue
        .icon-img-content
          display: block
          height: 100%
          margin: auto
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: 0.44rem
        text-align: center
        line-height: 0.44rem
        color: $darkTextColor
        //background-color: green
</style>

但是我们的图片和描述一般来源于一组数据，而且每页只能放下8个数据，多了就要分页，所以我们要优化一下代码

 

pages这个函数计算将iconList这个数组拆分成2个数组，返回类似pages=[[item, item, item], [item, item]]的数组

轮播的页数由swiper-slide控制，所以我们在swiper-slide中列表循环pages，所以我们修改代码

这样就实现了根据不同数据可以产生不同页数和页面切换的效果

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(page,index) of pages" :key="index">
      <div class="icons">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl"
                 :alt="item.imgAlt">
          </div>
          <p class="icon-desc">{{item.imgAlt}}</p>
        </div>
      </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'HomeIcons',
  data: function () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination'
      },
      iconList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0004',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0005',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0006',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0007',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0008',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0009',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      },
      {
        id: '0010',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        imgAlt: '景点门票'
      }]}
  },
  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
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .icons
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 50%
    //background-color: #eee
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      //background-color: red
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0.44rem
        box-sizing: border-box
        padding: 0.01rem
        //background-color: blue
        .icon-img-content
          display: block
          height: 100%
          margin: auto
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: 0.44rem
        text-align: center
        line-height: 0.44rem
        color: $darkTextColor

  //background-color: green
</style>

最终效果 

但是，当如“景点门票 “的描述过长时，显示不了其他字，那么当字数过长时，我们可以做一个三个点的提示

只要在icon-desc的css中加入

overflow: hidden
white-space: nowrap
text-overflow: ellipsis

这个样式我们在其他地方也会用到，所以把它封装成一个样式

在styles下新建一个mixins.styl文件，写入一个函数

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

在需要的css中导入这个文件，然后在样式中使用这个函数就可以了