微信小程序九宫格完整实例

微信小程序的九宫格布局通常用于展示图片或者信息列表，可以使用 Flexbox 或者 Grid 这两个 CSS 布局模式来创建。这里是一个基本的使用 Flexbox 实现的九宫格示例：

<view class="container">
  <view class="grid-item" v-for="(item, index) in items" :key="index">
    <image :src="item.src" :mode="item.mode" />
  </view>
</view>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}

.grid-item {
  width: calc(33.33% - 20px); /* 计算每个单元格宽度，减去间距 */
  height: auto;
  margin-bottom: 20px;
  overflow: hidden; /* 防止图片超出容器 */
}
</style>

<script>
export default {
  data() {
    return {
      items: [
        { src: 'your-image-url-1', mode: 'cover' },
        { src: 'your-image-url-2', mode: 'scaleAspectFit' },
        ... // 更多图片数据
      ]
    };
  }
};
</script>

在这个例子中，`items` 数组包含了你要展示的所有图片数据，每张图片都有 `src` 和 `mode` 属性，分别指定了图片源和显示模式。