基本概念

- ::before即view::before,表示咋该view组件的前面加入内容
- ::after即view::after,表示在该view组件的后面加入内容
 这里双冒号表示是css3的内容,单冒号表示css2的样式  

例子

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: 35rpx;
    top:40rpx;
    position: absolute;
    right:-90rpx;
    color:black
}  

js

onLoad: function (options) {
this.setData({
  price:100
})
}

效果

price

评 论