创建分支

在码云项目中，创建一个新的分支index-icons。

然后通过git pull和git checkout index-icons进行图标区域功能的开发。

在Home.vue导入Icons组件

Icons.vue

<template><div class="icons"><swiper><!-- pages指的是计算属性 --><swiper-slide v-for="(page, index) of pages" :key="index"><divclass="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必须是函数 ES6 data后面有空格data () {return {iconList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',desc: '景点门票'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',desc: '泡温泉'}, {id: '0004',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',desc: '动植园'}, {id: '0005',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0006',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png',desc: '滑雪季'}, {id: '0007',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png',desc: '泡温泉'}, {id: '0008',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png',desc: '动植园'}, {id: '0009',imgUrl: 'http://img1.qunarzz.com/piao/fusion/1611/a9/ffc620dbda9b9c02.png',desc: '一日游'}]}},// 计算属性computed: {pages () {const pages = []// forEach遍历iconList，计算page页数this.iconList.forEach((item, index) => {const page = Math.floor(index / 8)// 这里的pages是两级数组if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}}
}
</script>
<style lang="stylus" scoped>@import '~styles/varibles.styl'@import '~styles/mixins.styl'.icons >>> .swiper-containerheight: 0padding-bottom: 50%.iconposition: relativefloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darkTextColorellipsis()  //ellipsis这里是限制字体的描述的
</style>

推送

完成功能需求后，推送到对于的分支，在回到主分支，将开发的分支合并的主分支中，再提交代码到仓库。

在本次课程中，学到使用Vue.js devtools插件

参考课程：慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

请一键三连！！！！！

六十七、完成Vue项目首页图标区域布局和逻辑实现相关推荐

一.Vue2.5开发去哪儿网app首页⑤——图标区域轮播逻辑实现
实现图标区域可以轮播 <template><swiper :options="swiperOption"><swiper-slide><d ...
【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建一.项目基本结构二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
vue项目中图标可拖拽功能实现
vue项目中页面实现图标拖拽功能最近在做项目需求时有个小功能:在页面的首页增加一个快速功能按钮,用来满足操作者快速实现某一目的渴望.为了体现代码搬运工的气质与水准,当时心想,这么简单的一个小东西必须 ...
iframe js 加载失败_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
vue 项目加载顺序_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
vue 加载太慢_如何提高Vue项目首页的加载速度
为何当一个VUE项目过大时,打包之后初次访问首页加载速度会异常的缓慢,是什么原因导致以及如何解决这些问题? 首页打开速度慢的原因其实浏览器加载一个页面的过程就是通过http协议从服务器端下载项目所需 ...
Vue项目中指定区域的表格数据导出为Excel文件
vue项目中导出excel时有是会需要指定导出的区域如下图操作部分我们不需要导出只导出表格部分简记录下实现过程赋代码一. 安装三个依赖项 npm install -S file-saver np ...

六十七、完成Vue项目首页图标区域布局和逻辑实现

文章目录

创建分支

在Home.vue导入Icons组件

Icons.vue

推送

六十七、完成Vue项目首页图标区域布局和逻辑实现相关推荐

最新文章

热门文章