您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

微信小程序 CSS 选择器::after和::before的简单使用

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-07-05 09:44热度:

前言

前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。于是上网仔细查了下。以下是笔记

image

 

基本概念

::before 用法:view::before,表示在该view组件的前面加入内容 
::after 用法:view::after,表示在该view组件的后面加入内容 
这里是双冒号,不是单冒号。单冒号是CSS2的内容,双冒号是CSS3的内容。当然微信小程序也是兼容CSS2的写法的 
这种在组件的前面和后面加入内容,其实有点类似Android中的给TextView四周加图片的做法,setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)(原谅我这里有点强行建立联系的奇怪思路)

 

用法

wxml

 

  1. <view class="container">
  2. <view class="price">{{price}}</view>
  3. </view>

wxss

 

  1. .container {
  2. width: auto;
  3. margin: 30rpx;
  4. background-color: #fff;
  5. text-align: center;
  6. }
  7.  
  8. .price {
  9. position: relative;
  10. display: inline-block;
  11. font-size: 78rpx;
  12. color: red;
  13. }
  14.  
  15. .price::before {
  16. content: "金额:¥";
  17. position: absolute;
  18. font-size: 40rpx;
  19. top: 30rpx;
  20. left: -160rpx;
  21. color: black;
  22. }
  23.  
  24. .price::after {
  25. content: ".00 元";
  26. font-size: 30rpx;
  27. top: 40rpx;
  28. position: absolute;
  29. right: -90rpx;
  30. color: black;
  31. }

js

 

  1. Page({
  2. onLoad: function() {
  3. this.setData({
  4. price: 100
  5. })
  6. }
  7. })

效果

image

 

其他

其实,after和before可以添加的不仅仅是像上面这种字符串,以下是可以添加的常用的内容

 

  1. String 静态字符串
  2. attr 动态内容
  3. url/uri 用于引用媒体文件
  4. counter 计数器,可以实现序号功能