uni-app 是否有NVUE的九宫格插件

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

uni-app 是否有NVUE的九宫格插件

No relevant information found.

Harmonyos Next教程
6 回复

uni ui有nvue版：https://github.com/dcloudio/uni-ui/tree/nvue-uni-ui?files=1


感谢，我去看看 。。

我直接把uniapp演示项目的组件拷贝过去了。我的页面是nvue的，然后照着把组件导入，九宫格根本都没用出来。如果把页面改成vue的就完全没用问题。 请问是我哪里搞错了吗？ 备注：我的这个页面是子页面所以只能是nvue的。

回复 何处不相逢: 确保nvue的编译模式是uni-app而不是weex

回复 DCloud_heavensoft: 可以了，谢谢 开始没有调模式

在uni-app中，虽然官方没有直接提供一个针对NVUE的九宫格插件，但你可以通过自定义组件和NVUE的原生特性来实现九宫格布局。NVUE 是 uni-app 提供的一种基于 Weex 的原生渲染引擎，它允许开发者使用 Vue.js 语法编写原生页面，以提高性能。

以下是一个简单的九宫格布局示例，你可以根据需要进行调整：

  1. 创建 NVUE 页面

首先，在你的项目中创建一个 NVUE 页面，例如 grid.nvue。

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" class="grid-item">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
    };
  }
};
</script>

<style>
.container {
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.grid-item {
  width: 33.33%;
  height: 33.33%;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  box-sizing: border-box;
}
</style>
  1. 配置页面路径

确保在 pages.json 中配置了 NVUE 页面的路径：

{
  "pages": [
    {
      "path": "pages/grid/grid.nvue",
      "style": {
        "navigationBarTitleText": "九宫格",
        "app-plus": {
          "titleNView": false,
          "autoBackButton": true
        }
      }
    }
    // 其他页面配置...
  ]
}
  1. 运行项目

现在你可以运行你的 uni-app 项目，并在支持 NVUE 的平台上（如 App 平台）查看九宫格布局效果。

这个示例展示了如何使用 NVUE 和 Vue.js 语法创建一个简单的九宫格布局。你可以根据实际需求调整每个格子的样式和内容。NVUE 提供了接近原生的性能，非常适合用于需要高性能渲染的场景，如游戏、复杂列表等。

注意，由于 NVUE 和普通 Vue 页面在渲染机制上的差异，一些 Vue 的高级特性（如组件库）在 NVUE 中可能无法直接使用，需要开发者自行实现或寻找兼容的替代方案。

回到顶部