共计 2128 个字符,预计需要花费 6 分钟才能阅读完成。
我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。
掘金专栏页面
你先进入一个用户的专栏列表,比方:HullQin 的专栏 – 掘金。展现如下图所示:
发现不对劲了吗?放大看!
它的底部有一条分割线,跟整个红色背景卡片的底部紧挨着,强迫症属实不能忍!
这不像是设计师给出的设计稿。这个后果,更像是前端开发者的一种斗争的实现计划(看完下一节,你就晓得起因了)。尽管咱们掘金用户拿不到设计稿,然而无妨假如这里跟设计稿不符,权且称之为一个款式 bug 吧。
导致 bug 的起因
咱们检查一下 dom,这条线是怎么实现的?
哦吼,原来是写在这个 div 的 border-bottom 外面。
看到 data- v 这个标签,咱们无妨大胆假如掘金是用 Vue 框架开发的。
而每个掘金专栏的 html 都长得很像,无妨大胆假如每一个掘金专栏都是一个 Vue 组件。
因为掘金的前端开发者把「一个专栏」封装成了组件,所以每个组件都必须长得一样。而且开发者也没有开发这种逻辑:判断是最初一个专栏,就把 border 款式删掉。就导致呈现了这个后果。
可能是没人留神到,或者 bug 不重大,就间接公布上线了。
为什么我结尾说这是前端开发者的一种斗争的实现计划呢?因为加判断逻辑,还挺麻烦的,而产品可能也没有明确要求你这么做,前端开发者就没加这个逻辑。这样省下了一点点工夫去做别的更重要的需要。
间接解决方案
- 咱们须要给这个「一个专栏」组件减少一个输出参数,告知你是否须要底部的分割线。默认是须要分割线的。如果传入参数不须要分割线,则用
border-bottom: 0
笼罩border-bottom
的款式。 - 这种循环展现同一个组件的状况,通常都是用 v -for 实现的。咱们只须要在写 v -for 时,判断一下是否时最初一个 item,如果是最初一个 item,就把上述参数设置为不须要分割线,即可。
当然,以上只是针对掘金现有的技术实现,提出的最快的解决方案。其实,这种实现不太适合,咱们还杂糅了 js 逻辑到 css 判断里。而这些 css 其实是能够在外部闭环的,不用依赖 JS,如果能解藕 JS 和 css,通常被认为是更优的实现计划。
更优的实现形式
如果让你实现专栏的分割线,你会有哪些实现形式?
css 伪类选择器
针对列表我的项目的子元素,设置款式border-top
。
再通过 :first-child
或:nth-child(1)
选中第一个子元素,给它设置款式border-top: 0
。
这样即可保障:相邻的元素之间有一条分割线,然而整体元素的顶部和底部是没有分割线的,这两个中央能够视需要额定增加分割线(组件放在不同的中央,内部分割线的长度或粗细可能不同,所以通常不会把这个的实现放进组件里)。
用 * + *
这个牛逼的 css 选择器
解释一下:+
在 css 选择器中,示意抉择相邻兄弟结点。参考: Adjacent_sibling_combinator。
比方每个专栏的 class 是 column
,咱们用.column + .column
即可主动排除第一个元素!比上一种形式更简洁!我也更举荐!成果如下:
代码片段
超牛逼的 css 选择器
下面的办法不太敌对。
- 这个款式必须写到
.column + .column
外面,也就是说它不够通用。如果想给其它列表用同样的分割线款式,必须把border-top: red 1px solid;
这一行复制给其它的比方.xxx + .xxx
外面。 - 如果第一个列表我的项目被
display: none
暗藏掉了,那么就出岔了。因为第二个我的项目也会被+
这个 css 选择器选中,导致呈现了顶部的 border。如下:
代码片段
怎么解决呢?咱们应用这种办法:
- 解决第一个问题,咱们联合应用
>
这个抉择子类的 css 选择器。参考: Child_combinator。 - 解决第二个问题,咱们应用
~
这个选择器和:not(hidden)
这个伪类选择器。参考: General_sibling_combinator。
不多解释了,间接上牛逼的代码!!!
.divide>:not([hidden])~:not([hidden]) {border-top: blue 1px solid;}
也就是说,咱们只须要定义一个 class
,无妨叫做divide
,那么divide
的所有子元素之间,都会有一个分割线!并且完满解决了 display: none
带来的问题。
但凡你须要分割线的中央,只须要那些我的项目的父亲元素,定义一个 class="divide"
即可,分割线主动生成!!!Amazing!
代码片段
写在最初
我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。