慕课网仿去哪儿项目笔记--(五)-详情页面的开发
一,详情页动态路由及banner布局
第一步:利用tag属性把router-link变成对应的标签
第二步,利用to来指定路由跳转的url:
第三步:新建这个页面的组件Detail,然后配置路由
这里利用:id创建的是动态路由,意思是url必须包含detail/,而后面可以带一个参数,参数会放到id这样的一个变量里面。
第四步,创建banner组件(页面顶部显示图片的组件),然后导入detail
第五步,完成banner部分的基本布局
利用position和flex完成.
在这个过程中,遇到了一个问题,因为采用的是position布局,而后面又添加了渐变的蒙版,这就导致点击返回按钮时,先点击到蒙版上,导致返回按键失效。
我就把这个元素放置到最上面,解决了这个问题:
二,公用图片画廊组件
这个页面经常用到。所以也搞成独立的组件。
第一步:完成页面的基本布局,利用的是flex的副轴中间排布
第二步:利用swiper完成轮播的效果:
第三步:实现点击画廊组件时,隐藏画廊组件
这里需要使用到子组件向父组件传值的方式
三,实现header分支的渐隐渐显效果
实现的效果如下:
第一步,创建header组件,然后导入Banner组件中使用。
第二步:创建页面元素,给两种返回方式用v-show来控制切换
第三步:监听scroll事件,控制两者的切换和实现渐隐渐显效果
四,关于全局事件的解绑
之前唉,我们在header组件使用的是全局的方法,这样会导致其他的组件页面中也会执行:
而以前,我们事件的调用是绑定在页面元素上的,就不会存在这样的问题。
为了解决这个问题,就需要知道。activeted这个生命周期函数。它是引入了keep-alive标签之后产生的。每当router-view页面发生切换打开时,就会发生。
而对应的,为了解绑它调用的全局事件。可以使用deactived生命周期函数。它是在页面关闭时发生。
于是代码修改为:
五,使用递归组件实现详情列表页面
六,使用axios获取数据
慕课网仿去哪儿项目笔记--(五)-详情页面的开发相关推荐
- UNIAPP实战项目笔记45 订单页面布局完成和数据渲染
UNIAPP实战项目笔记45 订单页面布局完成和数据渲染 实际案例图片 订单页面 具体内容图片自己替换哈,随便找了个图片的做示例 具体位置见目录结构 通过 模拟数据list 来实现数据渲染 完善布局页 ...
- UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址 实际案例图片 修改收货地址和修改默认地址页面布局和功能 具体内容图片自己替换哈,随便找了个图片的做示例 用到了vuex的状态机,具体 ...
- 慕课网 前端JS面试技巧 笔记
前言 关于面试 前端水平的三个层次 基层工程师-基础知识 高级工程师-项目经验 架构师- 解决方案 几个面试题 题目很多,做具有代表的题目,举一反三 js 中使用 typeof 能得到哪些类型 (== ...
- 慕课网--网上商城mmall项目---部署手记
1.先在服务器部署好java,maven,nodejs环境. 2.然后安装nginx,tomcat,vsftp,git(一般默认会有)等软件 , 其中vsftp安装过程参照我上一篇文章. 3.在慕课网 ...
- iOS 仿淘宝,上拉进入详情页面
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...
- 企业WEB项目实现商品详情页面展示功能
概述 在开发电商项目时,我们需要实现一个最基本的功能:点击商品的图片,打开商品详情页面.其中,商品页面分为三大部分: a) 商品基本信息 b) 延迟加载商品详情.延迟一秒加载使用ajax c) 商品的 ...
- react 网易云音乐实战项目笔记
0.项目规范 一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向 访问 /路径 => ...
- 慕课网初识python_初识Python笔记
初识Python 基本数据类型 基本数据类型: 整数 十六进制用0x前缀和0-9,a-f表示 浮点数 整数运算永远是精确的,而浮点数运算则可能会有四舍五入的误差 字符串 以''或"" ...
- cocos2dx打飞机项目笔记五:CCSpriteBatchNode 的使用
在上一节里,在头文件看到 定义了一个 CCSpriteBatchNode* batchNode;,在addEnemy方法里看到 batchNode->addChild(enemy); 新建的敌机 ...
- (仿头条APP项目)5.列表页面设计实现
文章目录 列表页面设计 效果图 具体实现 添加Glide依赖 添加主页面和两个列表布局 用GsonFormat快速创建NewListData实体类存放新闻列表数据 MyApi添加一个获取新闻列表的方法 ...
最新文章
- Caffe中对MNIST执行train操作执行流程解析
- (C++)用指针实现两数交换函数swap()的两种方法
- Truncate a string
- Unity3D协程(转)
- Linux内存初始化(C语言部分)
- 音视频技术开发周刊 78期
- 从401航班事故调查看项目总结
- hdu 1171 dp(多重背包)
- OSS内文件如何设置为无时间限制的下载链接
- 【java】swing窗口中JPanel和JFrame的应用
- Python3 字节码详解
- 如何保护前端JS代码?前端js代码混淆加密
- 天行健,君子自强不息
- 实战ASP.NET访问共享文件夹
- Markdown - 如何给文本加下划线
- Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1。 当n比较大时,Fn也非常大,现在我们想知道,Fn除以10007的余数是多少(蓝桥基础实战)
- vue中对token的有效期的理解
- 回溯法求地图填色实验(剪枝)
- 院校情报福州大学计算机考研分析,福州大学情报学考研
- taskkill掉带空格的windowtitle
热门文章
- Hugging Face Course-Introduction学习小记 (part2)
- mysql字符集设置lampp_xampp下mariaDB数据库设置默认字符集utf8(Windows)
- 浅谈MySQL存储引擎
- 第 7 章 Neutron - 079 - 在 ML2 中 enable local network
- 7-25 总结 Junit 测试 和断言 /ArrayList 和LinkedList 的区别/HashCode用来存放数据.
- Service Broadcast简单音乐播放功能
- [转]如何用SQL命令修改字段名称
- String类源码阅读
- ELK收集tomcat访问日志并存取mysql数据库案例
- 传统IDC部署网站(八)