【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;
}
相关推荐
hunterandroid6 小时前
Jetpack Compose 入门:用声明式 UI 写 Android 页面
前端
以和为贵6 小时前
前端手写 RAG 踩坑实录:四个让检索"翻车"的坑
前端·人工智能·面试
用户2136610035726 小时前
Redux异步方案与React性能优化Hooks
前端
假如让我当三天老蒯6 小时前
TypeScript 继续学习(学习用)
前端·面试·typescript
玄玄子6 小时前
CSS 浮动引起父元素高度塌陷
前端·css
拾年2756 小时前
我用 30 行代码,搞懂了大模型是怎么"读"中文的
javascript·人工智能·llm
竹林8186 小时前
从 ethers.js 到 viem:我在一个 DeFi 看板项目中踩过的所有坑与最终方案
前端·javascript
kyrie286 小时前
React Redux 完整用法
前端
bonechips7 小时前
Tool Use:从"缸中大脑"到 AI Agent 的技术真相
javascript·agent
程序员鱼皮7 小时前
Codex 又出王炸功能「录制回放」,实战测评!附原理浅析
前端·后端·ai编程