<template>

  <div class="icons"  >

    <swiper>

      <!-- 这里的pages对应计算属性，pages中有两项，所以会生成两个swiper-slide，也就是两页 -->

      <swiper-slide v-for="(page,index) of pages" :key="index">

        <!-- 内层for循环就是针对pages中每一项进行遍历，生成每一页的内容 -->

        <div class="icon" v-for="item of page" :key="item.id">

          <div class="icon-img">

            <img class="icon-img-content" :src=item.imgUrl />

          </div>

          <p class="icon-desc">{{item.desc}}</p>

        </div>

      </swiper-slide>

    </swiper>

  </div>

</template>

<script>

  export default{

    name: 'HomeIcons',

    data(){

      return{

        iconList:[{

          id: '0001',

          imgUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1883762953,2762360598&fm=26&gp=0.jpg',

          desc:'景点门票'

        },{

          id: '0002',

          imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1178274401,3558540730&fm=26&gp=0.jpg',

          desc:'滑雪季'

        },{

          id: '0003',

          imgUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2518003825,2510353030&fm=26&gp=0.jpg',

          desc:'泡温泉'

        },{

          id: '0004',

          imgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=433142889,231367397&fm=26&gp=0.jpg',

          desc:'动植园'

        },{

          id: '0005',

          imgUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1883762953,2762360598&fm=26&gp=0.jpg',

          desc:'景点门票'

        },{

          id: '0006',

          imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1178274401,3558540730&fm=26&gp=0.jpg',

          desc:'滑雪季'

        },{

          id: '0007',

          imgUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2518003825,2510353030&fm=26&gp=0.jpg',

          desc:'泡温泉'

        },{

          id: '0008',

          imgUrl: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=433142889,231367397&fm=26&gp=0.jpg',

          desc:'动植园'

        },{

          id: '0009',

          imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2628633488,2833224211&fm=26&gp=0.jpg',

          desc:'一日游'

        }]

      }

    },

    computed: {

      pages () {   //计算属性，名为pages，需跟v-for中的变量保持一致

        const pages = []  //自定义常量，名为pages,用来保存遍历后的值

        this.iconList.forEach((item,index) => {

          //index是从0开始的，直到8，那么index/8，然后再取整，值为8个0和1个1，所以index的值只有0和1

          const page = Math.floor(index / 8)

          //判断pages[0]，pages[1]是否有值，没有值就是初始化为空，所以就有了空数组

          if (!pages[pages]) {

            pages[pages] = []

          }

          //在pages[0]和pages[1]数组中添加内容

          pages[pages].push(item)

        })

        console.log(pages)

        return pages  //return pages返回的就是计算属性pages()最终的值

      }

    }

  }

</script>

<style scoped>

  //@import '~styles/varibles.styl'

  // @import '~styles/mixins.styl'

  .icons >>> .swiper-container

    height: 0

    padding-bottom: 50%

  .icon

    position: relative

    overflow: hidden

    float: left

    width: 25%

    height: 0

    padding-bottom: 25%

    //background: pink

    .icon-img

      position:absolute

      top: 0

      left: 0

      right: 0

      bottom: .44rem

      box-sizing: border-box

      padding: .1rem

      //background: skyblue

      .icon-img-content

        display: block

        margin: 0 auto

        height: 100%

     .icon-desc

        position:absolute

        left: 0

        right: 0

        bottom: 0

        height: .44rem

        line-height: .44rem

        text-align: center

        color: $darkTextColor

        overflow: hidden

        white-space: nowrap

        text-overflow: ellipsis

        // ellipsis()

</style>

​

<template>

  <div class="wrapper">

    <swiper :options="swiperOption">

      <!-- slides -->

      <swiper-slide v-for="item of swiperList" :key="item.id">

        <img class="swiper-img" :src="item.imgUrl" />

      </swiper-slide>

      <!-- Optional controls -->

      <div class="swiper-pagination" slot="pagination"></div>

    </swiper>

  </div>

</template>

<script>

  export default{

    name: 'HomeSwiper',

    // data:function(){

    //   es5写法,可以简化成如下

    // }

    data (){

      return{

        swiperOption:{

          pagination: '.swiper-pagination',

          loop: true

        },

        swiperList: [{

          id: '0001',

          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'

        },{

          id: '0002',

          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'

        }]

      }

    }

  }

</script>

<style scoped>

  .wrapper >>> .swiper-pagination-bullet-active

    background: #fff

  .wrapper

    width: 100%

    height: 0

    overflow: hidden

    padding-bottom: 31.25%

    background: #eee

    //31.25% viewport的高度,但此种写法可能出现浏览器兼容问题

    //height: 31.25vw

    .swiper-img

      width: 100%

</style>

<template>

  <div>

    <home-header></home-header>

    <home-swiper></home-swiper>

    <home-icons></home-icons>

  </div>

</template>

<script>

  import HomeHeader from './components/Header'

  import HomeSwiper from './components/Swiper'

  import HomeIcons from './components/Icons'

  export default{

    name: 'Home',

    components:{

      HomeHeader,

      HomeSwiper,

      HomeIcons

    }

  }

</script>

<style>

</style>