【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;
}
相关推荐
前端老石人6 分钟前
HTML文档元素与元数据详解
前端·html
wing989 分钟前
用 AI 实现图片懒加载,这也太简单了!
前端·vue.js·图片资源
sigernet22 分钟前
Claude Code 不再推荐 npm 安装:官方改为 Native Installer
前端·npm·node.js
lxh011326 分钟前
函数防抖题解
前端·javascript·算法
颜酱31 分钟前
环检测与拓扑排序:BFS/DFS双实现
javascript·后端·算法
我发现一个问题32 分钟前
node+ts+koa全栈框架学习-1
前端
sure28235 分钟前
React Native中自定义TabBar
前端·react native·react.js
bluceli38 分钟前
CSS自定义属性与主题切换:构建动态UI的终极方案
前端·css
默默学前端38 分钟前
HTML 高频面试题 5 道|吃透基础,面试不慌(附详细解析)
前端·面试·职场和发展·html5
豆芽包39 分钟前
前端性能优化-图片懒加载技术
前端·面试