自学vue 之导航图标icons部分笔记

       今天练习的还是慕课网Dell Lee老师的Vue2.5开发去哪儿网App 从零基础入门到实战项目课程的实战篇，导航图标icons部分，自己写的静态，加上老师教学的逻辑部分的实现，效果如下：

    静态实现代码如下：

       首先，在线上创建好icons分支，用git pull 命令将分支拉到本地，使用git checkout icons切换到当前分支

  1.创建icons文件

  2.在home.js中引入icons组件

<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' //引入icons文件
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons  //注册组件
  }
}
</script>

  3.导航icons静态实现代码，其中加上swiper插件

<template>
  <div class="icons">
    <swiper> <!--swiper 插件的使用-->
      <swiper-slide>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-imgcent" src="http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png">
          </div>
          <p class="icon-desc">热门景点</p>
        </div>
        <div class="icon">
          <div class="iconimg">
            <img class="iconimgcent" src="http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png">
          </div>
          <p class="icondesc">武汉必游</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-imgcent" src="http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png">
          </div>
          <p class="icon-desc">游乐场</p>
        </div>
        <div class="icon">
          <div class="iconimg">
            <img class="iconimgcent" src="http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png">
          </div>
          <p class="icondesc">夏日玩水</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-imgcent" src="http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png">
          </div>
          <p class="icon-desc">海洋馆</p>
        </div>
        <div class="icon">
          <div class="iconimg">
            <img class="iconimgcent" src="http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png">
          </div>
          <p class="icondesc">一日游</p>
        </div>
        <div class="icon">
          <div class="icon-img">
            <img class="icon-imgcent" src="http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png">
          </div>
          <p class="icon-desc">动植物园</p>
        </div>
        <div class="icon">
          <div class="iconimg">
            <img class="iconimgcent" src="http://img1.qunarzz.com/piao/fusion/1804/95/8d02011d149bdb02.png">
          </div>
          <p class="icondesc">汽车票</p>
        </div>
      </swiper-slide>
      
      <swiper-slide>
        <div class="icon">
          <div class="iconimg">
            <img class="iconimgcent" src="http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png">
          </div>
          <p class="icondesc">水上游玩</p>
        </div>
        <div class="icon">
          <div class="iconimg">
            <img class="iconimgcent" src="http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png">
          </div>
          <p class="icondesc">全部玩乐</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl' 
 /* scoped是指对style样式对当前文件作用，其它文件无作用，加入>>> 是指样式

穿透 */
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 42%
  .icon
    position: relative
    overflow: hidden
    float: left
    height: 0
    width: 25%
    padding-bottom: 21%
    .icon-img
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      box-sizing: border-box
      padding: .13rem
      .icon-imgcent
        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: $textColor
    /* 自己写的样式，和老师的做一下对比 */
    .iconimg
      width: 100%
      height: 100%
      text-align: center
      position: absolute
      top: 0
      .iconimgcent
        height: 1.16rem
        margin: 0.13rem auto 0
    .icondesc
      position: absolute
      bottom: 0
      width: 2rem
      height: .44rem
      line-height: .44rem
      text-align: center
      color: $textColor  /* 全局样式，需要引入其文件 @import '~styles/varibles.styl' */
</style>

    导航图标icons逻辑实现代码如下：

<template>
  <div class="icons">
    <swiper>
      <swiper-slide v-for="(page, index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-imgcent" :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: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        desc: '热门景点'
      }, {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
        desc: '武汉必游'
      }, {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
        desc: '游乐场'
      }, {
        id: '0004',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
        desc: '夏日玩水'
      }, {
        id: '0005',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
        desc: '海洋馆'
      }, {
        id: '0006',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
        desc: '一日游'
      }, {
        id: '0007',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
        desc: '动植物园'
      }, {
        id: '0008',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/95/8d02011d149bdb02.png',
        desc: '汽车票'
      }, {
        id: '0009',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
        desc: '水上游玩'
      }, {
        id: '0010',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
        desc: '全部游玩'
      }]
    }
  },
  computed: {   //计算属性，根据其他属性计算生成新的结果，自带缓存机制
    pages () {
      const pages = []  //定义数组
      this.iconList.forEach((item, index) => {  //对iconList每一项进行循环
        const page = Math.floor(index / 8)      //每一页展示在哪一页 向下取整
        if (!pages[page]) {   //判断page，可以Chrome商店安装vue-devtools工具，便于vue程序查看，找错等
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/minins.styl'  /* 引入方法文件--文本溢出省略为... */
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 42%
  .icon
    position: relative
    overflow: hidden
    float: left
    height: 0
    width: 25%
    padding-bottom: 21%
    .icon-img
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      box-sizing: border-box
      padding: .13rem
      .icon-imgcent
        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: $textColor
      ellipsis()   /* 调用方法--文本溢出省略为... */
</style>

      注释： 文本溢出省略方法截图如下：

       对了，data数据里的数据比较冗余，可以用ajax请求获取数据，可是宝宝不怎会，如有大神看到这里，望指教一下，感谢啦~

      最后，将代码提交到git线上仓库 使用 git add .   git commit -m "add icons"  git push 三步命令，再 git checkout master 切换到主分支 ，将分支内容合并至主分支 git merge origin/index-icons  ，提交至线上 git push

      每天进步一点还是可以的！虽然计算属性这一块还不是很懂，呵呵...（记性不怎么好，仅以此笔记供日后查阅！）