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>
回到顶部