亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【學習打卡】第14天 項目實戰:Vue.js仿京東到家電商全棧項目前端開發

课程名称:前端工程师
课程章节: 第四章、商家详情制作
主讲老师:Dell

课程内容:第四章、商家详情制作

1.6样式的优化与代码复用

1.商品的 “+ -” 制作 , 会用到 “子绝父相”

父相: 父元素relative 则会占据位置, 给 子元素做作为 “坐标性参考”, 参照物;
子绝: 子元素absolute则会根据父元素位置进行 绝对的参考;
图片描述

子绝父相:position:relative 和 position:absolute
首先你必须知道的是:top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位,即position:relative;或者position:absolute;,也就是说top、right、bottom、left是为相对定位/绝对定位而生的。
子绝父相就是:子元素为绝对定位(position:absolute;),父元素为相对定位position:relative;。例如A为子元素,那么父元素B必须包含A,也就是说AB一定是嵌套关系(父子关系),不可以是兄弟关系。

2.商家详情页面优化:

a. 颜色重复的进行变量抽离;
b. 对区域文字超出的进行 overflow: hidden, 不让其网游滑动;

图片描述

1-7商家详情页分类及内容联动的实现

tab 块联动页面逻辑;

1. 接口数据

接口文档中,支持传递的参数是:all、seckill、fruit
参数在封装的get方法中传递:get( url, { tab : ‘all’ } )
图片描述

2. 处理逻辑:

可以利用toRefs来解构对象里面的值、数组等内容
图片描述

點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
7
獲贊與收藏
12

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消