【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;
}
相关推荐
萑澈2 小时前
Windows 7 运行 Electron 安装包报“不是有效的 Win32 应用程序”怎么办
javascript·windows·electron
W.A委员会2 小时前
JS原型链详解
开发语言·javascript·原型模式
懂懂tty2 小时前
React状态更新流程
前端·react.js
小码哥_常2 小时前
告别繁琐!手把手教你封装超实用Android原生Adapter基类
前端
她说彩礼65万3 小时前
C# 实现简单的日志打印
开发语言·javascript·c#
skywalk81633 小时前
pytest测试的时候这是什么意思?Migrating <class ‘kotti.resources.File‘>
前端·python
一只蝉nahc3 小时前
vue使用iframe内嵌unity模型,并且向模型传递信息,接受信息
前端·vue.js·unity
状元岐4 小时前
C#反射从入门到精通
java·javascript·算法
子兮曰4 小时前
Bun v1.3.12 深度解析:新特性、性能优化与实战指南
前端·typescript·bun
2401_885885044 小时前
易语言彩信接口怎么调用?E语言Post实现多媒体数据批量下发
前端