【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;
}
相关推荐
fruge几秒前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
用户877244753962 分钟前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱8 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端
用户877244753968 分钟前
Lubanno7UniverSheet:选择命令式,为了真正的跨框架通用
前端
Aoda14 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
幸运小圣15 分钟前
Set数据结构【ES6】
javascript·数据结构·es6
望获linux17 分钟前
【实时Linux实战系列】使用 u-trace 或 a-trace 进行用户态应用剖析
java·linux·前端·网络·数据库·elasticsearch·操作系统
zxg_神说要有光24 分钟前
我好像找到了最适合我的生活状态
前端·javascript
飞哥数智坊29 分钟前
今天,我的个人网站正式上线了!
前端
念念不忘 必有回响1 小时前
前端自动化部署全流程(Jenkins + Nginx)
前端·自动化·jenkins