uv-ui

# Grid 宫格布局

✈

组件名：uv-grid > uv-grid-item

点击下载&安装 (opens new window)

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

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √(仅支持微信小程序，原因 (opens new window)) √ √

# 基本使用

  • 该组件外层为uv-grid组件包裹，通过col设置内部宫格的列数
  • 内部通过uv-grid-item组件的slot设置宫格的内容
  • 如果不需要宫格的边框，可以设置border为false
<template>
	<view>
		<uv-grid :border="false">
			<uv-grid-item v-for="(item,index) in baseList" :key="index">
				<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
				<text class="grid-text">{{item.title}}</text>
			</uv-grid-item>
		</uv-grid>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				baseList: [{
					name: 'photo',
					title: '李白'
				}, {
					name: 'lock',
					title: '韩信'
				}, {
					name: 'star',
					title: '刘备'
				}]
			}
		}
	}
</script>
<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
	}
</style>

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

通过col属性设置列数，默认列数为3

<template>
	<view>
		<uv-grid :col="4" @click="click">
			<uv-grid-item v-for="(item,index) in baseList" :key="index">
				<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
				<text class="grid-text">{{item.title}}</text>
			</uv-grid-item>
		</uv-grid>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				baseList: [{
					name: 'photo',
					title: '李白'
				}, {
					name: 'lock',
					title: '韩信'
				}, {
					name: 'star',
					title: '刘备'
				}, {
					name: 'star',
					title: '元芳'
				}]
			}
		},
		methods: {
			click(name) {
				uni.showToast({
					icon: 'none',
					title: `点击了第${name}个`
				})
			}
		}
	}
</script>
<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
	}
</style>

# 实现宫格的左右滑动

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

<template>
	<view>
		<swiper :indicator-dots="true" class="swiper">
			<swiper-item>
				<uv-grid :border="true" align="center">
					<uv-grid-item 
						:customStyle="{width:220+'rpx',height:220+'rpx'}" 
						v-for="(item, index) in swiperList" 
						:index="index" 
						:key="index">
						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22"></uv-icon>
						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
					</uv-grid-item>
				</uv-grid>
			</swiper-item>
			<swiper-item>
				<uv-grid :border="true" align="center">
					<uv-grid-item 
						:customStyle="{width:220+'rpx',height:220+'rpx'}" 
						v-for="(item, index) in swiperList" 
						:index="index + 9" 
						:key="index">
						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22"></uv-icon>
						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
					</uv-grid-item>
				</uv-grid>
			</swiper-item>
			<swiper-item>
				<uv-grid :border="true" align="center">
					<uv-grid-item 
						:customStyle="{width:220+'rpx',height:220+'rpx'}" 
						v-for="(item, index) in swiperList" 
						:index="index + 18" 
						:key="index">
						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22"></uv-icon>
						<text class="grid-text">{{ "宫格" + (index + 1) }}</text>
					</uv-grid-item>
				</uv-grid>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				swiperList: ['integral', 'kefuv-ermai', 'coupon', 'gift', 'scan',
					'pause-circle', 'volume-off', '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>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Grid Props

参数 说明 类型 默认值 可选值
col 宫格的列数 String | Number 3 -
border 是否显示宫格的边框 Boolean true true | false
align 宫格的对齐方式，用于控制只有一两个宫格时的对齐场景 String left left | center | right
customStyle 自定义外部样式 Object - -

# GridItem Props

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

# Grid Events

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

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

# GridItem Events

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

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

← Album 相册 →