【uniapp/uview】解决 u-collapse 展开折叠的小箭头在有些型号的手机上不显示

引入:

使用 uview1 版本的 u-collapse 折叠面板组件时,需要更改它自带的小箭头的样式,更改之后在有些型号的手机上不显示;

最终样式:

分析:

原生的样式长这样:

观察样式后发现使用的是 unicode 字符,但是改了之后仍然不生效;

解决:

最后没有用 content,用了背景图片:

javascript 复制代码
::v-deep .uicon-arrow-down:before {
    // content: '⏷';
    // font-size: 20px;
    color: #929199;
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url('../../../../static/gzt/AK-LN.png') center/contain no-repeat;
}
相关推荐
林恒smileZAZ1 小时前
Vue<前端页面版本检测>
前端·javascript·vue.js
码事漫谈4 小时前
当AI开始“思考”:我们是否真的准备好了?
前端·后端
许杰小刀5 小时前
ctfshow-web文件包含(web78-web86)
android·前端·android studio
我是Superman丶5 小时前
Element UI 表格某行突出悬浮效果
前端·javascript·vue.js
恋猫de小郭5 小时前
你的代理归我了:AI 大模型恶意中间人攻击,钱包都被转走了
前端·人工智能·ai编程
xiaokuangren_6 小时前
前端css颜色
前端·css
Huanzhi_Lin6 小时前
关于V8/MajorGC/MinorGC——性能优化
javascript·性能优化·ts·js·v8·新生代·老生代
hoiii1876 小时前
C# 基于 LumiSoft 实现 SIP 客户端方案
前端·c#
anOnion6 小时前
构建无障碍组件之Meter Pattern
前端·html·交互设计
小码哥_常7 小时前
Spring Boot配置diff:解锁配置管理新姿势
前端