前言
前兩天看文檔看到選擇器那塊兒的時候,前面4個基本都能理解:.class,#id,element,element, element,但后面兩個::after和::before(文檔中說,分別表示在view 組件的后面和前面插入內(nèi)容),表示有點沒有理解。于是上網(wǎng)仔細(xì)查了下。以下是筆記
image
基本概念
::before 用法:view::before,表示在該view組件的前面加入內(nèi)容
::after 用法:view::after,表示在該view組件的后面加入內(nèi)容
這里是雙冒號,不是單冒號。單冒號是CSS2的內(nèi)容,雙冒號是CSS3的內(nèi)容。當(dāng)然微信小程序也是兼容CSS2的寫法的
這種在組件的前面和后面加入內(nèi)容,其實有點類似Android中的給TextView四周加圖片的做法,setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)(原諒我這里有點強(qiáng)行建立聯(lián)系的奇怪思路)
用法
wxml
-
<view class="container">
-
<view class="price">{{price}}</view>
-
</view>
wxss
-
.container {
-
width: auto;
-
margin: 30rpx;
-
background-color: #fff;
-
text-align: center;
-
}
-
-
.price {
-
position: relative;
-
display: inline-block;
-
font-size: 78rpx;
-
color: red;
-
}
-
-
.price::before {
-
content: "金額:¥";
-
position: absolute;
-
font-size: 40rpx;
-
top: 30rpx;
-
left: -160rpx;
-
color: black;
-
}
-
-
.price::after {
-
content: ".00 元";
-
font-size: 30rpx;
-
top: 40rpx;
-
position: absolute;
-
right: -90rpx;
-
color: black;
-
}
js
-
Page({
-
onLoad: function() {
-
this.setData({
-
price: 100
-
})
-
}
-
})
效果
image
其他
其實,after和before可以添加的不僅僅是像上面這種字符串,以下是可以添加的常用的內(nèi)容
-
String 靜態(tài)字符串
-
attr 動態(tài)內(nèi)容
-
url/uri 用于引用媒體文件
-
counter 計數(shù)器,可以實現(xiàn)序號功能
|