【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;
}
相关推荐
烈风逍遥19 小时前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web19 小时前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码
前端探险家Rick19 小时前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户9210802628619 小时前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户9210802628619 小时前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王19 小时前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端
kiros_wang19 小时前
Notification 本地通知:定时消息、点击路由跳转、桌面角标适配
前端
flash俊杰20 小时前
SQLite + sqlite-vec:100 篇文档内的私域知识库怎么做
前端
Hilaku20 小时前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员