微信小程序开发之 CSS 选择器::after和::before的简单使用
白羽 2018-07-18 来源 :网络 阅读 5365 评论 0

摘要:本文将带你了解微信小程序开发之 CSS 选择器::after和::before的简单使用,希望本文对大家学微信有所帮助。




前言前两天看文档看到选择器那块儿的时候,前面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<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;}jsPage({  onLoad: function() {    this.setData({      price: 100    })  }})效果image其他其实,

after和before可以添加的不仅仅是像上面这种字符串,以下是可以添加的常用的内容String 静态字符串attr 动态内容url/uri 用于引用媒体文件counter 计数器,可以实现序号功能     


本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 17 不喜欢 | 18
看完这篇文章有何感觉?已经有35人表态,49%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程