前言

前兩天看文檔看到選擇器那塊兒的時(shí)候，前面4個(gè)基本都能理解：.class，#id，element，element, element，但后面兩個(gè)::after和::before（文檔中說(shuō)，分別表示在view 組件的后面和前面插入內(nèi)容），表示有點(diǎn)沒有理解。于是上網(wǎng)仔細(xì)查了下。以下是筆記

image

基本概念

• ::before 用法：view::before，表示在該view組件的前面加入內(nèi)容
• ::after 用法：view::after，表示在該view組件的后面加入內(nèi)容
• 這里是雙冒號(hào)，不是單冒號(hào)。單冒號(hào)是CSS2的內(nèi)容，雙冒號(hào)是CSS3的內(nèi)容。當(dāng)然微信小程序也是兼容CSS2的寫法的
• 這種在組件的前面和后面加入內(nèi)容，其實(shí)有點(diǎn)類似Android中的給TextView四周加圖片的做法，setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)（原諒我這里有點(diǎn)強(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

其他

其實(shí)，after和before可以添加的不僅僅是像上面這種字符串，以下是可以添加的常用的內(nèi)容

• String 靜態(tài)字符串
• attr 動(dòng)態(tài)內(nèi)容
• url/uri 用于引用媒體文件
• counter 計(jì)數(shù)器，可以實(shí)現(xiàn)序號(hào)功能

具體的請(qǐng)參考這篇文章