Fusions

Appearance

Grid 宫格 ​

iPhone

此组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 此组件外层为 fu-grid 组件包裹，通过 column 属性设置内部宫格的列表
  • 内部通过 fu-grid-item 组件的 slot 设置宫格的内容
  • 如果不需要宫格的边框，可以设置 showBorder 属性为 false
html
<template>
    <fu-grid :column="3" :showBorder="false" :square="false" @change="change">
        <fu-grid-item v-for="(item ,index) in list" :index="index" :key="index">
            <view class="grid-item-box">
                <fu-icon name="image" :size="30" color="#777" />
                <text class="text">{{item.text}}</text>
            </view>
        </fu-grid-item>
    </fu-grid>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const list = reactive([
        { text: 'Grid 1' },
        { text: 'Grid 2' },
        { text: 'Grid 3' }
    ]);
</script>

设置宫格右上角角标和图标 ​

可以通过 fusions-ui 的 badge 组件设置宫格右上角角标，也可以通过 icon 组件设置图标。

html
<template>
    <fu-grid :column="3" :showBorder="false" :square="false" @change="change">
        <fu-grid-item v-for="(item ,index) in list" :index="index" :key="index">
            <view class="grid-item-box">
                <fu-icon name="image" :size="30" color="#777" />
                <text class="text">{{item.text}}</text>
                <view v-if="item.badge" class="grid-dot">
                    <fu-badge :value="item.badge" :type="item.type" />
                </view>
            </view>
        </fu-grid-item>
    </fu-grid>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const list = reactive([
        { text: 'Grid 1', badge: '0', type: "primary" },
        { text: 'Grid 2', badge: '1', type: "success" },
        { text: 'Grid 3', badge: '99', type: "warning" }
    ]);
</script>

实现宫格的左右滑动 ​

可以结合 uni-app 的 swiper 组件实现宫格的左右滑动, 因为 swiper 特性的关系，需指定 swiper 的高度，否则 swiper 的高度不会被内容撑开，可以自定义 swiper 的指示器，达到更高的灵活度。

html
<template>
    <swiper class="swiper" :indicator-dots="true">
        <swiper-item>
            <fu-grid :column="3" :highlight="true" @change="change">
                <fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
                    <view class="grid-item-box">
                        <fu-icon name="image" :size="30" color="#777" />
                        <text class="text">{{ item.text }}</text>
                    </view>
                </fu-grid-item>
            </fu-grid>
        </swiper-item>
        <swiper-item>
            <fu-grid :column="3" :highlight="true" @change="change">
                <fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
                    <view class="grid-item-box">
                        <fu-icon name="image" :size="30" color="#777" />
                        <text class="text">{{ item.text }}</text>
                    </view>
                </fu-grid-item>
            </fu-grid>
        </swiper-item>
        <swiper-item>
            <fu-grid :column="3" :highlight="true" @change="change">
                <fu-grid-item v-for="(item, index) in list" :index="index" :key="index">
                    <view class="grid-item-box">
                        <fu-icon name="image" :size="30" color="#777" />
                        <text class="text">{{ item.text }}</text>
                    </view>
                </fu-grid-item>
            </fu-grid>
        </swiper-item>
    </swiper>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const list = reactive([
        { text: 'Grid 1' },
        { text: 'Grid 2' },
        { text: 'Grid 3' }
    ]);
</script>

API ​

Grid Props ​

属性名说明类型默认值可选值
column宫格的列数Number3-
borderColor宫格边框颜色String#d6d6d6-
showBorder是否显示边框Booleantruefalse
square是否方形显示Booleantruefalse
highlight点击背景是否高亮显示Booleantruefalse

Grid Events ​

事件名说明回调参数
change点击宫格项时触发() => void

Grid Slot ​

名称说明
default自定义宫格内容

GridItem Props ​

属性名说明类型默认值可选值
index子组件的唯一标识 ，点击gird会返回当前的标识Number0-