【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;
}
相关推荐
盼兮14 分钟前
用AI编程从零搭建一个响应式数据看板
前端·人工智能·数据可视化
Lan.W15 分钟前
vue3-element-admin里新增mock接口一直没有生成,不生效
前端·javascript·vue.js·mock
小满zs17 分钟前
Next.js部署(Vercel)
前端·next.js
仙古.梦回~20 分钟前
vue-skills
前端·javascript·vue.js
倒霉熊dd32 分钟前
Python 学习(第二部分:函数、模块与面向对象编程)
前端·数据库·python
gCode Teacher 格码致知35 分钟前
Javascrip提高:CSS backdrop-filter的使用方法-由Deepseek产生
前端·css
gCode Teacher 格码致知1 小时前
Javascript提高:canvas画布的网格背景-由Deepseek产生
javascript·css·css3
清灵xmf1 小时前
JS 原生深拷贝的终极方案——structuredClone
前端·javascript·vue.js·json.stringify·structuredclone
前端 贾公子1 小时前
响应式系统基础:依赖追踪的基础 —— 发布订阅模式(前端应用最广的设计模式)上
javascript·vue.js
索西引擎1 小时前
【理论】TypeScript 函数重载:从 Vue 3 defineEmits 说起的类型安全实践
前端·typescript