微信小程序伪元素显示问题解决iPhone

最新推荐文章于 2025-03-09 19:36:50 发布

原创最新推荐文章于 2025-03-09 19:36:50 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #css

文章描述了一个在iPhone上遇到的UI问题，即点击新元素后旧元素直接消失。解决方案是通过在不显示下划线的WXML元素上添加一个CSS伪元素来解决。具体做法是修改wxss样式，为`.chg_type.chg_item`的`::before`选择器设置透明背景，然后在`.chg_item.on::before`中设定选中的颜色，这样可以确保元素切换时不会消失。

iPhone上偶现奇怪问题,点击新的元素之后旧的元素直接消失,除非重新点击
针对这个问题只需要给不显示下划线的元素也设置一个伪元素就可以解决了,代码示例在最后
在这里插入图片描述

在这里插入图片描述

wxml

<view class="chg_type">
  <view class="chg_item {{type==4?'on':''}}" bindtap="sel_type" data-type="4">全部</view>
  <view class="chg_item {{type==0?'on':''}}" bindtap="sel_type" data-type="0">未支付</view>
  <view class="chg_item {{type==1?'on':''}}" bindtap="sel_type" data-type="1">待发货</view>
  <view class="chg_item {{type==2?'on':''}}" bindtap="sel_type" data-type="2">待收货</view>
  <!-- <view class="chg_item {{type==3?'on':''}}" bindtap="sel_type" data-type="3">已完成</view> -->
  <view class="chg_item {{type==5?'on':''}}" bindtap="sel_type" data-type="5">待评价</view>
</view>

有问题的wxss样式

.chg_type .chg_item::before {
  display: block;
  content: '';
  height: 6rpx;
  background: #f87306;
  position: absolute;
  bottom: -8rpx;
  left: 0;
  right: 0;
}

修改之后的

.chg_type .chg_item::before {
  display: block;
  content: '';
  height: 6rpx;
  background: transparent;
  position: absolute;
  bottom: -8rpx;
  left: 0;
  right: 0;
}

.chg_type .chg_item.on::before {
  background: #f87306;
}