【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;
}
相关推荐
Linux-lucky8 小时前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu
风骏时光牛马11 小时前
生成一个移动端标题,只需要一个标题,不需要其他的任何文本。
前端
IT_陈寒11 小时前
Redis雪崩把我坑惨了,这是5年经验的教训
前端·人工智能·后端
SameX11 小时前
HarmonyOS ArkUI List 的侧滑删除 用 ListItem 的 swipeAction + endIcon 的做法
前端
usdoc文档预览14 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
用户27050777252414 小时前
Agent 调工具卡住?3 种超时与取消策略实测对比
前端
LuHang15 小时前
我一行代码没写,把领导派的活做成了公司内部系统😭
前端
明月_清风15 小时前
Meta 开源了一个 AI Native 组件库:Astryx,150+ React 组件,专为 AI Agent 而设计
前端·人工智能·ai编程
用户8508692761515 小时前
秒杀系统中 Shell 脚本并发控制 Bug:究竟哪里出了
前端
程序员大阳17 小时前
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口
javascript·css·html·实战·删除·查询·新增