uni-app fui-grid组件在firstui-uvue - FirstUI中的使用

在uni-app中，fui-grid组件是FirstUI框架提供的一个用于展示网格布局的组件。通过fui-grid组件，你可以方便地创建图片墙、商品列表等布局。以下是一个简单的示例，展示了如何在firstui-uvue项目中使用fui-grid组件。

首先，确保你已经在项目中安装了FirstUI组件库。如果还没有安装，可以使用以下命令通过npm安装：

npm install @dcloudio/uni-ui

然后，在你的页面文件中引入FirstUI的样式和组件。假设你正在使用easycom风格，可以在页面的<script>和<style>部分分别引入：

<template>
  <view class="content">
    <fui-grid :cols="3" class="grid">
      <fui-grid-item v-for="(item, index) in gridData" :key="index" class="grid-item">
        <image :src="item.image" class="grid-image"></image>
        <text class="grid-text">{{ item.text }}</text>
      </fui-grid-item>
    </fui-grid>
  </view>
</template>

<script>
import fuiGrid from '@/components/firstui/fui-grid/fui-grid.vue';
import fuiGridItem from '@/components/firstui/fui-grid-item/fui-grid-item.vue';

export default {
  components: {
    fuiGrid,
    fuiGridItem
  },
  data() {
    return {
      gridData: [
        { image: 'https://example.com/image1.jpg', text: 'Item 1' },
        { image: 'https://example.com/image2.jpg', text: 'Item 2' },
        { image: 'https://example.com/image3.jpg', text: 'Item 3' },
        { image: 'https://example.com/image4.jpg', text: 'Item 4' },
        { image: 'https://example.com/image5.jpg', text: 'Item 5' },
        { image: 'https://example.com/image6.jpg', text: 'Item 6' },
      ]
    };
  }
};
</script>

<style>
@import "@/common/uni.css";
.content {
  padding: 20rpx;
}
.grid {
  margin-top: 20rpx;
}
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grid-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}
.grid-text {
  margin-top: 10rpx;
  text-align: center;
}
</style>

在这个示例中，我们使用了fui-grid组件，并设置了cols属性为3，表示每行显示3个网格项。fui-grid-item组件用于定义每个网格项的内容，这里我们展示了图片和文本。通过v-for指令循环渲染gridData数组中的数据，每个网格项都绑定了不同的图片和文本内容。

请确保你的图片URL是有效的，并且样式部分可以根据实际需求进行调整。这样，你就可以在uni-app项目中成功使用FirstUI的fui-grid组件来创建网格布局了。