uni-app 纯nvue 使用三元表达式 切换 class 背景渐变 css 在IOS端无效,安卓端正常
uni-app 纯nvue 使用三元表达式 切换 class 背景渐变 css 在IOS端无效,安卓端正常
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | Windows 64位家庭版 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
HBuilderX类型:正式
HBuilderX版本号:3.1.8
手机系统:iOS
手机系统版本号:IOS 14
手机厂商:苹果
手机机型:iPhone XR
页面类型:nvue
打包方式:云端
项目创建方式:HBuilderX
示例代码:
<template>
<list>
<cell>
<template v-for="(v,k) in list" >
<text :class="k == index ? 'cur':''" :key="k" @tap="malegebi(k)"> {{k}} </text>
</template>
</cell>
</list>
</template>
<script>
export default {
data() {
return {
list:[0,2,3,4,5,6,7,8,9],
index:0
}
},
onLoad() {
},
methods: {
malegebi(k){
this.index = k;
}
}
}
</script>
<style>
.cur{background-image: linear-gradient(to right, #D8B689, #bf9d70);color: #202028;}
</style>
操作步骤:
- 点击切换
预期结果:
- 跟安卓端一样随点击切换背景
实际结果:
- 是有新增 背景没有移除上一个背景class
bug描述:
- 切换有有效,但是背景颜色不会被残留,不知道是不是ios对这个颜色值不支持
.cur{background-image: linear-gradient(to right, #D8B689, #bf9d70);color: #202028;}
更多关于uni-app 纯nvue 使用三元表达式 切换 class 背景渐变 css 在IOS端无效,安卓端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
5 回复
问题复现,后续优化,已加分,感谢您的反馈!
更多关于uni-app 纯nvue 使用三元表达式 切换 class 背景渐变 css 在IOS端无效,安卓端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
等了一个月 ,怎么样?有修复吗?
头皮发麻 好像nvue不支持 linear-gradient
解决了吗?
在 iOS 端的 nvue 中,动态切换 class 时,渐变背景可能因渲染机制差异导致样式残留。这是由于 nvue 在 iOS 使用原生渲染,对 CSS 渐变和动态类更新的处理与安卓 Webview 不同。建议改用内联样式绑定替代 class 切换,直接通过 :style
动态设置背景。示例修改:
<text
:style="{ backgroundImage: k === index ? 'linear-gradient(to right, #D8B689, #bf9d70)' : 'none', color: k === index ? '#202028' : 'inherit' }"
[@tap](/user/tap)="malegebi(k)">
{{k}}
</text>