uni-app nvue里面切换样式类名有问题

发布于 1周前 作者 vueper 来自 Uni-App

uni-app nvue里面切换样式类名有问题

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 4.08
手机系统 Android
手机系统版本号 Android 12
手机厂商 小米
手机机型 k50
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<text class="text-20" :class="{'tab-active':tab==item.value}">{{item.label}}</text>

操作步骤：

  • 点击tab

预期结果：

  • 正确切换类名

实际结果：

  • 有时会切换错误

bug描述：

自己实现一个tab栏，动态切换类名时，有时会有问题。用对象或者数组的方式，都不行
感觉像是类名有短暂地切换错误。
不得不说，用着用着，感觉uniapp的nvue有很多问题。坑是有那么一点多啊


Harmonyos Next教程
17 回复

为啥用nvue啊，官方都不维护了。。。


哎，这是老项目。不维护了吗？那现在用啥的

回复 m***@163.com: uvue，或者直接用vue

回复 靐齉齾麤龖龗: 你现在使用uniapp x?

回复 m***@163.com: 没，uniapp x好多插件都用不了，现在基本用的vue。。。现在的公司app没有一个，哈哈

回复 m***@163.com: 话说你的视频里面啥问题啊，都抖动了一下吗？

回复 靐齉齾麤龖龗: 奥，你没用x啊。我以为你使用x。现在使用nvue，老项目吧，主要是搞app。使用它，可能解决一些问题比较方便。但是也有很多问题不好处理。

回复 靐齉齾麤龖龗: 不是抖动，感觉是那个类名没有切换过来，感觉有点延迟或者卡顿，导致画面有点跳。在字体变小的时候，突然变大，又变小回去。

回复 m***@163.com: 哦哦，好吧，我之前用的时候没有遇到过，是不是手机太低端了导致的

回复 靐齉齾麤龖龗: 不知道，你有么有开发原生插件的？

回复 m***@163.com: 没有，哈哈，我就是一个半吊子前端

回复 靐齉齾麤龖龗: 嗯，以为你搞过。我也不会搞这个原生的，这个更难

回复 m***@163.com: 嗯嗯，之前有个打印的东西，别人发了个aar的包给我们，我研究了半天，还用Android studio开发了个插件，集成有问题哈哈，研究了1天

回复 靐齉齾麤龖龗: 后面解决了没有，集成进来了？

回复 m***@163.com: 没，调用之后没反应，后面换成了windows去了，我就写了个页面，他们写了个.net的框放进去.net的开发调用打印机

回复 靐齉齾麤龖龗: 哦，还以为你解决了呢。前面我集成一个aar包进来，也没集成

在uni-app中使用nvue进行开发时，切换样式类名确实可能会遇到一些问题，这主要是因为nvue是基于Weex引擎的，与普通的Vue页面（基于Vue.js）在DOM操作和渲染机制上有所不同。在nvue中，我们不能直接使用Vue中的v-bind:class或简写:class来动态绑定类名，因为Weex对CSS的支持相对有限，且类名的切换需要特定的方法。

下面是一个如何在nvue中切换样式类名的示例代码。我们将通过修改元素的style属性或使用条件渲染来实现类名的切换。

示例：通过修改style属性切换样式

假设我们有两个样式类classA和classB，需要在按钮点击时切换：

<template>
  <div>
    <button @click="toggleClass">Toggle Class</button>
    <div :style="currentStyle">This is a toggleable div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClassA: true,
      classA: {
        color: 'red',
        fontSize: '20px'
      },
      classB: {
        color: 'blue',
        fontSize: '30px'
      }
    };
  },
  computed: {
    currentStyle() {
      return this.isClassA ? this.classA : this.classB;
    }
  },
  methods: {
    toggleClass() {
      this.isClassA = !this.isClassA;
    }
  }
};
</script>

示例：通过条件渲染切换样式类

虽然nvue不直接支持类名绑定，但可以通过条件渲染来模拟类名的切换：

<template>
  <div>
    <button @click="toggleClass">Toggle Class</button>
    <div v-if="isClassA" class="classA">This is a toggleable div</div>
    <div v-else class="classB">This is a toggleable div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClassA: true
    };
  },
  methods: {
    toggleClass() {
      this.isClassA = !this.isClassA;
    }
  }
};
</script>

<style>
.classA {
  color: red;
  font-size: 20px;
}

.classB {
  color: blue;
  font-size: 30px;
}
</style>

注意，在nvue中使用样式时，建议尽量使用内联样式或通过<style>标签定义在组件内部的样式，因为Weex对外部CSS文件的支持有限。上述两种方法都可以有效地在nvue中实现样式类名的切换，开发者可以根据具体需求选择合适的方法。

回到顶部