做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

CSS偽類(lèi):empty讓我眼前一亮

2020-11-4    前端達(dá)人

最近看過(guò)我文章的都知道:我最近在負(fù)責(zé)一個(gè)微信小程序的項(xiàng)目,在其中遇到了很多有趣的事和一些“奇思妙想”。本文的背景就是某天早上我看著wxml文件中一堆wx:if/elsehidden突然很煩躁,先不說(shuō)wx:if導(dǎo)致的性能問(wèn)題,就是標(biāo)簽上也是冗雜的。


接著上一篇文章【微信小程序自定義組件庫(kù)yPicker組件分析及省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)】,在其中我分析了這么一個(gè)例子 —— 省市區(qū)三級(jí)聯(lián)動(dòng)的自定義實(shí)現(xiàn),在其中有詳細(xì)代碼這里就不多說(shuō),說(shuō)說(shuō)如何調(diào)用:

我當(dāng)時(shí)是這么想的:一方面出于“不在JavaScript里寫(xiě)太多東西”的考慮,另一方面,由于省、市、區(qū)我是分別用三個(gè)變量來(lái)實(shí)現(xiàn)的,所以JavaScript里就關(guān)注這三個(gè)變量,比如之間的空格或其它東西都拿到wxml文件里。就像這樣:

<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view wx:if="{{provinces&&citys&&areas}}" class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="placeholder depart_content befselect" wx:else>請(qǐng)選擇當(dāng)前位置</view> <view class="desc">如有變動(dòng)請(qǐng)修改后再次提交</view> </view> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

(因?yàn)檎{(diào)用涉及到后來(lái)改動(dòng)的只有在點(diǎn)擊彈窗里的“確認(rèn)”按鈕時(shí)在事件中將那三個(gè)變量分別賦給這段代碼中出現(xiàn)的三個(gè)變量 —— 否則會(huì)只要改動(dòng)不管是點(diǎn)取消還是確認(rèn)已經(jīng)發(fā)生改變了,這樣不妥!)

其布局是這樣的:

.departments{ width: 100%; height: 96rpx; display: flex; align-items: center; font-size: 36rpx; font-weight: 347; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .location{ position: relative; border-bottom: 1rpx solid rgba(0,0,0,.009); display: flex; align-items: flex-start; padding-top: 20rpx; } .desc{ position: absolute; right: 19rpx; bottom: 4rpx; color: rgb(63,142,255); font-size: 23rpx; } .departments .depart_title{ width: 20%; } .departments .depart_content{ margin-left: 10%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .departments .placeholder{ width: 69%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

location


在決定了要替換這里的wx:if以后,你首先要想:用什么替換?
wx:if作用是判斷“是否存在”,如果不存在(條件不滿(mǎn)足)就切換到wx:else或是wx:elif的邏輯里!

OK,想到這里,你應(yīng)該能想到一個(gè)css偽類(lèi)::empty !它的作用和我們想要的效果一樣:判斷如果元素(內(nèi)容)為空的話(huà)…
我迅速對(duì)代碼做了改動(dòng):

<view class="departments location" bindtap="fixedshow"> <view class="depart_title">所在位置</view> <view class="placeholder depart_content">{{provinces}} {{citys}} {{areas}}</view> <view class="desc">如有變動(dòng)請(qǐng)修改后再次提交</view> </view> 
  • 1
  • 2
  • 3
  • 4
  • 5

然后在class - depart_content上加了這個(gè)偽類(lèi):

.placeholder:empty::before{ content: "請(qǐng)選擇當(dāng)前位置"; color: rgba(0,0,0,.6); } 
  • 1
  • 2
  • 3
  • 4

wx
一片空白!

經(jīng)過(guò)查閱資料::empty偽類(lèi)表示如果標(biāo)簽內(nèi)容為空,那么內(nèi)容區(qū)域如果帶有空格,也是不會(huì)被匹配到的!

在寫(xiě)標(biāo)簽時(shí)一定要注意這一點(diǎn):標(biāo)簽內(nèi)是否有空格或換行!(換行常常被解析為一個(gè)空格)
遇到非單標(biāo)簽一定注意閉合標(biāo)簽!

最后解決辦法是:在js中將三個(gè)變量用空格相連接,再渲染到頁(yè)面上即可!
wx-position
(其實(shí)這里是一個(gè)自定義的選擇器,而自動(dòng)定位就是往高德地圖發(fā)送了請(qǐng)求獲取到省市區(qū)字段而已,代碼就不寫(xiě)了。。。)


到這里我們會(huì)發(fā)現(xiàn)一個(gè)事:上面我們不僅用了empty偽類(lèi),還用了before偽元素!

其實(shí)這一點(diǎn)很平常 —— 畢竟只有empty是添加不了內(nèi)容的(似乎縱觀(guān)css,只有before和after這樣偽元素可以向頁(yè)面中添加內(nèi)容,不管是文字還是圖片之類(lèi)的)

我認(rèn)為更應(yīng)該關(guān)注到的是兩個(gè)地方:

  1. 偽元素中沒(méi)有用position定位!一般來(lái)說(shuō)對(duì)一個(gè)(存在內(nèi)容的)元素來(lái)說(shuō),為其設(shè)置“前置”(before)/“后置”(after)樣式都需要定位:規(guī)定其顯示的地方。不然大概率偽元素中的文字是顯示不出來(lái)的,通過(guò)本文的empty可以猜測(cè):他被原本存在的內(nèi)容覆蓋住了。
  2. 從第一點(diǎn)可以得出::before 和 :after 偽元素向標(biāo)簽內(nèi)插入內(nèi)容、圖形,并不會(huì)影響empty偽類(lèi)的匹配!

這個(gè)特性實(shí)用的一批。


由上,可見(jiàn)此偽類(lèi)最大的用處就是“字段缺失提示”!這是非常實(shí)用的。而且把這項(xiàng)任務(wù)交給CSS也可以減輕許多“(布局)負(fù)擔(dān)”、體驗(yàn)更好、維護(hù)起來(lái)也更方便!

比如:我在項(xiàng)目?jī)?yōu)化時(shí)就將所有有請(qǐng)求的字段都加上了統(tǒng)一類(lèi)名:

.ym-empty:empty::before{ content: "暫無(wú)數(shù)據(jù),請(qǐng)重試", display: block; text-align: center; color: rgba(0,0,0,.6); /** 其它定位、字體更改操作 */ }


作者:,轉(zhuǎn)載


日歷

鏈接

個(gè)人資料

存檔