【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;
}
相关推荐
kyriewen14 小时前
前端错误监控最全指南:捕获 JS 异常、Promise 拒绝、资源加载失败,附上报代码
前端·javascript·监控
狗哥哥15 小时前
船队运营可视化技术方案
前端
大家的林语冰15 小时前
ESLint 近期动态大全,新版本正式发布,antfu 大佬推荐的插件也更新了!
前端·javascript·前端工程化
只会cv的前端攻城狮15 小时前
DSL 领域模型架构设计:消灭 CRUD 重复工作
前端·架构
码事漫谈15 小时前
时序数据库2026盘点:国产数据库如何以“融合多模”走出差异化之路?
前端·后端
道友可好16 小时前
让 AI 自己验收,等于让学生自己批卷
前端·人工智能·后端
yingyima16 小时前
Go 语言正则表达式速查手册:30 分钟掌握核心语法与实战技巧
前端
大蝴蝶博努奇a16 小时前
使用ChatGPT 解决各类代码报错
前端
胡志辉16 小时前
深入浅出 call、apply、bind
前端·javascript·后端
iccb101316 小时前
5年,一个程序员是如何把私有化在线客服系统做到第一名的
前端·后端·github