uview-plus

# Grid 宫格布局

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

  • 该组件外层为up-grid组件包裹，通过col设置内部宫格的列数
  • 内部通过up-grid-item组件的slot设置宫格的内容
  • 如果不需要宫格的边框，可以设置border为false
<template>
    <view>
        <up-grid
                :border="false"
                @click="click"
        >
            <up-grid-item
                    v-for="(baseListItem,baseListIndex) in baseList"
                    :key="baseListIndex"
            >
                <up-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="baseListItem.name"
                        :size="22"
                ></up-icon>
                <text class="grid-text">{{baseListItem.title}}</text>
            </up-grid-item>
        </up-grid>
        <up-toast ref="uToastRef" />
    </view>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const baseList = ref([  
    {  
        name: 'photo',  
        title: '图片'  
    },  
    {  
        name: 'lock',  
        title: '锁头'  
    },  
    {  
        name: 'star',  
        title: '星星'  
    },  
]);  
  
// 创建对子组件的引用  
const uToastRef = ref(null);  
  
// 定义方法  
const click = (name) => {  
    if (uToastRef.value) {  
        uToastRef.value.success(`点击了第${name}个`);  
    }  
};  
</script>

<script>
    export default {
        data() {
            return {
                baseList: [{
                    name: 'photo',
                    title: '图片'
                    },
                    {
                        name: 'lock',
                        title: '锁头'
                    },
                    {
                        name: 'star',
                        title: '星星'
                    },
                ]
            }
        },
        methods: {
            click(name) {
                this.$refs.uToastRef.success(`点击了第${name}个`)
            }
        }
    }
</script>

<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
</style>

# 绑定点击事件&自定义列数

<template>
    <view>
        <up-grid
                :border="false"
                col="4"
        >
            <up-grid-item
                    v-for="(listItem,listIndex) in list"
                    :key="listIndex"
            >
                <up-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="listItem.name"
                        :size="22"
                ></up-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </up-grid-item>
        </up-grid>
        <up-toast ref="uToastRef" />
    </view>
</template>

<script setup>  
import { ref, reactive } from 'vue';  
  
// 创建响应式数据  
const list = reactive([  
    {  
        name: 'photo',  
        title: '图片'  
    },  
    {  
        name: 'lock',  
        title: '锁头'  
    },  
    {  
        name: 'star',  
        title: '星星'  
    },  
    {  
        name: 'hourglass',  
        title: '沙漏'  
    },  
    {  
        name: 'home',  
        title: '首页'  
    },  
    {  
        name: 'volume', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name  
        title: '音量'  
    },  
]);  
  
// 创建对子组件的引用  
const uToastRef = ref(null);  
  
// 定义方法  
const click = (name) => {  
    if (uToastRef.value) {  
        uToastRef.value.success(`点击了第${name + 1}个`); // 注意：这里加1是因为通常我们是从第1个开始计数的  
    }  
};  
</script>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: 'photo',
                    title: '图片'
                    },
                    {
                        name: 'lock',
                        title: '锁头'
                    },
                    {
                        name: 'star',
                        title: '星星'
                    },
                    {
                        name: 'hourglass',
                        title: '沙漏'
                    },
                    {
                        name: 'home',
                        title: '首页'
                    },
                    {
                        name: 'star',
                        title: '音量'
                    },
                ],
            }
        },
        methods: {
            click(name) {
                this.$refs.uToastRef.success(`点击了第${name}个`)
            }
        }
    }
</script>

<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
</style>

# 实现宫格的左右滑动

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

<template>
    <view>
        <swiper
                :indicator-dots="true"
                class="swiper"
        >
            <swiper-item>
                <up-grid :border="true">
                    <up-grid-item
                            :customStyle="{width:220+'rpx',height:220+'rpx'}"
                            v-for="(item, index) in swiperList"
                            :index="index"
                            :key="index"
                    >
                        <up-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="item"
                                :size="22"
                        ></up-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                    </up-grid-item>
                </up-grid>
            </swiper-item>
            <swiper-item>
                <up-grid :border="true">
                    <up-grid-item
                            :customStyle="{width:220+'rpx',height:220+'rpx'}"
                            v-for="(item, index) in swiperList"
                            :index="index + 9"
                            :key="index"
                    >
                        <up-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="item"
                                :size="22"
                        ></up-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                    </up-grid-item>
                </up-grid>
            </swiper-item>
            <swiper-item>
                <up-grid :border="true">
                    <up-grid-item
                            :customStyle="{width:220+'rpx',height:220+'rpx'}"
                            v-for="(item, index) in swiperList"
                            :index="index + 18"
                            :key="index"
                    >
                        <up-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="item"
                                :size="22"
                        ></up-icon>
                        <text class="grid-text">{{ "宫格" + (index + 1) }}</text>
                    </up-grid-item>
                </up-grid>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 创建响应式数据  
const swiperList = ref(['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list']);  
</script>

<script>
	export default {
		data() {
			return {
                swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
			};
		}
	};
</script>

<style lang="scss">
    .swiper {
        height: 720rpx;
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
</style>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码


 github  gitee

# API

# Grid Props

参数 说明 类型 默认值 可选值
col 宫格的列数 String | Number 3 -
border 是否显示宫格的边框 Boolean false true
align 宫格的对齐方式，用于控制只有一两个宫格时的对齐场景 String left center / right
gap 宫格间隔（暂不支持nvue) String 0px -

# Grid-item Props

参数 说明 类型 默认值 可选值
name 宫格的name String | Number - -
bgColor 宫格的背景颜色 String transparent(背景透明) -

# Grid Event

注意：请在<up-grid></up-grid>上监听此事件

事件名 说明 回调参数
click 点击宫格触发 name

# Grid-item Event

注意：请在<up-grid-item></up-grid-item>上监听此事件

事件名 说明 回调参数
click 点击宫格触发 name

← Swiper 轮播图 →