今天练习的还是慕课网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
每天进步一点还是可以的!虽然计算属性这一块还不是很懂,呵呵...(记性不怎么好,仅以此笔记供日后查阅!)