微信小程序巧用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内容导致的多余显示问题。通过条件渲染优化布局，提升用户体验。

 

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

解决后效果:

 

微信小程序：代码在沙箱里的运行规则
最新发布
fykam的博客
09-04 119
摘要： 微信小程序的沙箱环境通过双线程架构实现逻辑与渲染隔离，确保安全性与生态封闭性。逻辑线程处理业务逻辑但无法直接操作DOM或调用系统API，渲染线程负责界面展示但无权处理逻辑。代码需遵循微信规范，禁止动态执行、敏感API调用及外部链接跳转，并通过审核机制把关。沙箱限制虽增加开发约束（如专用API、性能优化），但保障了即点即用的安全体验。这种“隔离与限制”设计平衡了功能、性能与管控需求，是小程序生态的核心基础。
WeChat小程序开发：基础笔记（一）
qq_2862896879的博客
04-28 3417
一、生命周期 1、什么是生命周期？ 小程序启动，表示生命周期的开始。 小程序关闭，表示生命周期的结束。 中间小程序运行的过程，就是小程序的生命周期。 2、生命周期的分类 在小程序中，声明中求分为两类，分别是： 应用生命周期，特指小程序从启动-运行-销毁的过程。 页面生命周期，特指小程序中，每个页面的加载-渲染-销毁的过程。 3、什么是生命周期函数 生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。 生命周期函数的作用：允许程序员咋特定的时间点，执行某些二特定的操作。 注意：生
微信小程序 tab面板切换 伴随点击修改样式 tab下划线伪元素写法
MittyLee的博客
10-14 1356
<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">本月已.
微信小程序 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...
微信小程序界面设计小程序中的WXSS(css)选择器课程-::first-line 伪元素
杭州.黄老师
04-09 1159
小程序中的WXSS(css)选择器课程-::first-line 伪元素 定义和用法 :first-line 选择器用于选取指定选择器的首行。 注释：以下属性可与 :first-line 使用：  字体属性  颜色属性  背景属性  word-spacing  letter-spacing  text-decoration  vertical-align  text-transfo...
微信小程序伪元素显示问题解决iPhone
qq_19716091的博客
04-28 916
针对这个问题只需要给不显示下划线的元素也设置一个伪元素就可以解决了,代码示例在最后。iPhone上偶现奇怪问题,点击新的元素之后旧的元素直接消失,除非重新点击。只需要将css修改之后就可以解决这个问题。有问题的wxss样式。
微信小程序界面设计小程序中的WXSS(css)选择器课程-::after伪元素
杭州.黄老师
04-09 2307
小程序中的WXSS(css)选择器课程-::after伪元素 定义和用法 :after 选择器在被选元素的内容后面插入内容。 请使用 content 属性来指定要插入的内容。 浏览器支持 所有主流浏览器都支持 :after 选择器。 注释：对于 IE8 及更早版本中的 :after，必须声明 &amp;lt;!DOCTYPE&amp;gt;。 实例 在每个 元素的内容之后插入新内容： &amp;lt;!DOCTYPE...
微信小程序性能调优专家：深入掌握WXML与WXSS
![微信小程序性能调优专家：深入掌握WXML与WXSS]...此外，文章还探讨了性能监控与分析工具的应用，并预测了微信小程序性能优化的未来趋势，包括框架演进、新兴技术的融合及
微信小程序测试与部署：确保旅游应用稳定上线的全面指南
本文首先概述了微信小程序的测试与部署流程，并对微信小程序的理论基础进行了详细解析，包括其架构、开发规范以及性能优化理论。随后，本文深入探讨了微信小程序的测试策略，涵盖了单元测试、集成测试以及性能测试的...
微信小程序微信小程序纯css实现刻度尺.zip
01-11
7. **数据绑定**：如果刻度尺还需要显示动态数据，如测量结果，就需要结合小程序的`data`和`wx:if`等特性，实现数据与视图的双向绑定。 通过这个压缩包，开发者可以学习到如何在微信小程序环境中，利用纯CSS实现一...
去除小程序weui组件的伪元素
weixin_43457519的博客
03-29 377
去除小程序weui组件的伪元素
微信小程序界面设计小程序中的WXSS(css)选择器课程-::selection 伪元素
杭州.黄老师
01-24 885
小程序中的WXSS(css)选择器课程-::selection 伪元素 定义和用法 ::selection 选择器匹配被用户选取的选取是部分。 只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。 浏览器支持 IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器...
微信小程序——wxss高级篇讲解（before，after )(.class image)(@import)(＜view class=‘view1 view2‘ / ＞)、wxss中使用变量
wy313622821的博客
11-03 9699
大家有没有遇到这样的一种现象，在看复杂的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 875
从这段代码，我们看到一个小小的伪元素，就能让页面从平淡走向生动。设计从来不是堆砌复杂效果，而是用简单的手法制造惊喜。💖 下次写代码时，别忘了给你的页面加点“魔法条”，让用户眼前一亮吧！你有没有用过类似的伪元素技巧？快在评论里分享你的创意，咱们一起涨姿势！👇希望这篇博客既有趣又有料！
微信小程序开发基础( 采用伪代码)
weixin_51771816的博客
09-21 1440
这个就相当于html的span的标签。这个就相当于html的div标签。
微信小程序
qq_44428688的博客
12-05 528
SDK：软件开发工具包 software development kit 微信APP自动携带sdk 灰度发布:少量发布 测试没有问题之后 全量发布：所有用户都能用####jsonJSO格式最大的优点是易于人的阅读和编写，通常不需要特殊的工具， 就能够读懂和修改，是一种轻量级的数据交换格式 json文件都是被包裹在一个大括号中，通过key-value的方式来表达数据 看起来与javascript的对象表达方式十分相似，但是有所不同json的key必须包裹在一个双引号之中，在实践中，编写json的时候 忘了给
微信小程序开发——点击按下时变色，松开后恢复（hover-class，或【：after】使用）
番薯大佬的专栏
02-13 8251
界面交互中，按下时改变颜色主是设置组件的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 381
问题描述在小程序中，给view 添加:before伪类样式，transform无效问题出现的环境背景及自己尝试过哪些方法已经参考链接描述将display改为inline-block，但还是无效相关代码.more-icon {height: 1.06rem;width: 1.06rem;transform: rotate(45deg);border: 0.1rem solid #979797;bor...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值