微信小程序巧用wx:if来控制伪元素::after::before的显示

最新推荐文章于 2025-03-09 19:36:50 发布
原创 最新推荐文章于 2025-03-09 19:36:50 发布 · 2.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在使用Flex布局的容器中，如何通过wx::if控制class='date'标签的显示与隐藏，以避免null内容导致的多余显示问题。通过条件渲染优化布局，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 上图中每个block是一个flex布局的容器，容器里可以放三个内容，当内容为null时由于还是有class=“date”的标签存在，就会有多余的显示，于是想到用wx::if来控制这个class='date'的标签，来隐藏对应的::after的显示。（当然，如果直接不存内容也就不会有上面的问题）

解决后效果:

 

微信小程序 CSS 选择器::after和::before的简单使用
03-29
前言 前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记 (此图片来源于网络，如有侵权，请联系删除! ) image   基本概念 ::before 用法：view::before，表示在该view组件的前面加入内容  ::after 用法：view::after，表示在该view组件的后面加入内容  这里是双冒号，不是单冒号。单冒号是CSS2的内容，双冒号是CSS3
微信小程序 CSS 选择器::after和::before的简单使用(看看)
热门推荐
weixin_40333655的博客
05-27 1万+
前言 前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记 基本概念 ::before 用法：view::before，表示在该view组件的前面加入内容 ::after...
微信小程序伪元素显示问题解决iPhone
qq_19716091的博客
04-28 881
针对这个问题只需要给不显示下划线的元素也设置一个伪元素就可以解决了,代码示例在最后。iPhone上偶现奇怪问题,点击新的元素之后旧的元素直接消失,除非重新点击。只需要将css修改之后就可以解决这个问题。有问题的wxss样式。
去除小程序weui组件的伪元素
weixin_43457519的博客
03-29 360
去除小程序weui组件的伪元素
微信小程序界面设计小程序中的WXSS(css)选择器课程-::first-line 伪元素
杭州.黄老师
04-09 1057
小程序中的WXSS(css)选择器课程-::first-line 伪元素 定义和用法 :first-line 选择器用于选取指定选择器的首行。 注释：以下属性可与 :first-line 使用：  字体属性  颜色属性  背景属性  word-spacing  letter-spacing  text-decoration  vertical-align  text-transfo...
微信小程序性能调优专家：深入掌握WXML与WXSS
![微信小程序性能调优专家：深入掌握WXML与WXSS]...此外，文章还探讨了性能监控与分析工具的应用，并预测了微信小程序性能优化的未来趋势，包括框架演进、新兴技术的融合及
微信小程序测试与部署：确保旅游应用稳定上线的全面指南
本文首先概述了微信小程序的测试与部署流程，并对微信小程序的理论基础进行了详细解析，包括其架构、开发规范以及性能优化理论。随后，本文深入探讨了微信小程序的测试策略，涵盖了单元测试、集成测试以及性能测试的...
微信小程序微信小程序纯css实现刻度尺.zip
01-11
7. **数据绑定**：如果刻度尺还需要显示动态数据，如测量结果，就需要结合小程序的`data`和`wx:if`等特性，实现数据与视图的双向绑定。 通过这个压缩包，开发者可以学习到如何在微信小程序环境中，利用纯CSS实现一...
微信小程序渲染性能分析：权威解读与深度实践
微信小程序作为一种新型的应用形式，其性能优化对于用户体验至关重要。本文首先概述了微信小程序的渲染机制，并介绍了性能优化的基础理论。在分析了渲染性能的关键指标及性能分析工具的基础上，本文着重探讨了页面...
微信小程序单选框自定义赋值
10-15
在本例中，wx:if="{{showModalStatus}}"被用在了对话框的显示控制上，这意味着只有当showModalStatus变量为真时，对话框及其内部内容才会被渲染到DOM中。 2、理解三元运算符的使用 三元运算符是一种简洁的条件...
微信小程序 tab面板切换 伴随点击修改样式 tab下划线伪元素写法
MittyLee的博客
10-14 1319
<view class="tab"> <view class="tab-item {{tabIndex == 1?'active':''}}" bindtap="clickTab" data-index="1">本月未来店</view> <view class="tab-item {{tabIndex == 2?'active':''}}" bindtap="clickTab" data-index="2">本月已.
微信小程序界面设计小程序中的WXSS(css)选择器课程-::after伪元素
杭州.黄老师
04-09 2188
小程序中的WXSS(css)选择器课程-::after伪元素 定义和用法 :after 选择器在被选元素的内容后面插入内容。 请使用 content 属性来指定要插入的内容。 浏览器支持 所有主流浏览器都支持 :after 选择器。 注释：对于 IE8 及更早版本中的 :after，必须声明 &amp;lt;!DOCTYPE&amp;gt;。 实例 在每个 元素的内容之后插入新内容： &amp;lt;!DOCTYPE...
微信小程序——wxss高级篇讲解（before，after )(.class image)(@import)(＜view class=‘view1 view2‘ / ＞)、wxss中使用变量
wy313622821的博客
11-03 9517
大家有没有遇到这样的一种现象，在看复杂的wxss，会有很多看不懂的地方，比如： 第一种：before ，after .container_1 { width: auto; margin: 30rpx; text-align: center; } .view_1 { position: relative; display: inline-block; font-size: 70rpx; color: red; } /* 在view_1控件之前 */ .view_1::before
用伪元素打造酷炫分隔条：从小程序代码看设计魔法 ✨
小丁的博客
03-09 779
从这段代码，我们看到一个小小的伪元素，就能让页面从平淡走向生动。设计从来不是堆砌复杂效果，而是用简单的手法制造惊喜。💖 下次写代码时，别忘了给你的页面加点“魔法条”，让用户眼前一亮吧！你有没有用过类似的伪元素技巧？快在评论里分享你的创意，咱们一起涨姿势！👇希望这篇博客既有趣又有料！
微信小程序开发基础( 采用伪代码)
weixin_51771816的博客
09-21 1389
这个就相当于html的span的标签。这个就相当于html的div标签。
微信小程序
qq_44428688的博客
12-05 509
SDK：软件开发工具包 software development kit 微信APP自动携带sdk 灰度发布:少量发布 测试没有问题之后 全量发布：所有用户都能用####jsonJSO格式最大的优点是易于人的阅读和编写，通常不需要特殊的工具， 就能够读懂和修改，是一种轻量级的数据交换格式 json文件都是被包裹在一个大括号中，通过key-value的方式来表达数据 看起来与javascript的对象表达方式十分相似，但是有所不同json的key必须包裹在一个双引号之中，在实践中，编写json的时候 忘了给
微信小程序开发——点击按下时变色，松开后恢复（hover-class，或【：after】使用）
番薯大佬的专栏
02-13 8197
界面交互中，按下时改变颜色主是设置组件的hover-class属性的style样式值。 1、点击按下前，按下松开后样式 2、点击按下后样式 代码示例设置 wxml文件 <view class="cellstype" hover-class="cellhoverstyle" bindtap="itemclick" data-item="{{item}}"> wxss文件 .cellhoverstyle { color: red; } ...
before css 旋转_小程序 css :before里transform无效
weixin_39795268的博客
12-20 366
问题描述在小程序中，给view 添加:before伪类样式，transform无效问题出现的环境背景及自己尝试过哪些方法已经参考链接描述将display改为inline-block，但还是无效相关代码.more-icon {height: 1.06rem;width: 1.06rem;transform: rotate(45deg);border: 0.1rem solid #979797;bor...
微信小程序开发的页面组件
haust_允谦的博客
06-06 955
微信小程序开发的页面组件 标签 功能 标签 功能 视图容器 图标文件 文本域 复选框 按钮 单选框 图片 输入框 表单 进度条 input组件type属性值： 可选值 说明 text 文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘 选择器 示例 说明 .class .container 选择所有class = "container"的组件 #id
微信小程序支持CSS 伪元素吗？
最新发布
03-10
<think>好的，我现在需要回答用户关于微信小程序中CSS伪元素支持情况的问题。首先，我需要回顾用户提供的引用内容，看看里面有没有相关的信息。 用户提到了几个引用，其中引用[1]明确说到微信小程序不支持::before和::after伪元素。引用[2]中有一个代码示例，里面用了.add::before和.add::after，但可能这是在早期版本中的情况，或者用户可能遇到了兼容性问题？需要确认微信小程序的官方文档是否有更新。 另外，引用[5]提到在iPhone上伪元素显示有问题，但通过给不显示的元素也设置伪元素可以解决。这说明虽然可能存在兼容性问题，但伪元素在某些情况下还是可以使用的。 可能的情况是，微信小程序的部分版本或某些环境下支持伪元素，但存在限制。比如，基础库版本不同可能支持程度不同。我需要查阅最新的官方文档确认当前的支持情况。 根据微信小程序官方文档，基础库2.4.0开始支持::before和::after伪元素，但需要注意某些组件可能不支持，比如text组件。因此，使用时需要确保在支持的组件上应用伪元素，并检查基础库版本是否足够新。 此外，引用[4]提到使用nth-child伪类选择器，这可能与伪元素不同，但用户的问题集中在伪元素上，所以需要区分伪类和伪元素的支持情况。 总结一下，微信小程序在较新的基础库版本中支持::before和::after伪元素，但需要注意兼容性和组件限制。同时，可能需要处理特定设备的问题，如iPhone上的显示异常，可能需要额外的样式处理。</think>### 微信小程序对 CSS 伪元素的支持情况 微信小程序对 CSS 伪元素的支持存在一定限制，具体如下： 1. **基本支持** - **`::before` 和 `::after`**：从基础库 2.4.0 版本开始支持，但仅适用于部分组件（如 `view`、`button` 等），不支持 `text` 组件[^1][^2]。需确保开发者工具和用户客户端的基础库版本足够新。 - **伪类选择器**：支持 `:nth-child()`、`:active` 等伪类，但 `:hover` 在小程序中默认无效（需通过事件模拟）[^4]。 2. **兼容性问题** - **iOS 设备异常**：在 iPhone 上偶现伪元素渲染问题（如点击后消失），可通过为所有相关元素统一添加伪元素解决[^5]。 - **样式限制**：伪元素无法通过 JS 动态修改，需完全依赖静态 CSS 定义[^2]。 3. **使用示例** ```css /* 添加加号图标 */ .add::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26rpx; border-top: 10rpx solid #fff; transform: translate(-50%, -50%); } .add::after { content: ""; position: absolute; left: 50%; top: 50%; height: 26rpx; border-left: 10rpx solid #fff; transform: translate(-50%, -50%); } ``` 需注意：伪元素的 `content` 属性必须显式定义，否则不生效[^2][^5]。 4. **替代方案** - 若需动态效果（如点击动画），建议改用小程序原生组件（如 `animation` API）或图片实现。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值