宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基本使用
- 该组件外层为
u-grid组件包裹，通过col设置内部宫格的列数 - 内部通过
u-grid-item组件的slot设置宫格的内容 - 如果不需要宫格的边框，可以设置
border为false
<template> <view> <u-grid :border="false" @click="click" > <u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex" > <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22" ></u-icon> <text class="grid-text">{{baseListItem.title}}</text> </u-grid-item> </u-grid> <u-toast ref="uToast" /> </view> </template> <script> export default { data() { return { baseList: [{ name: 'photo', title: '图片' }, { name: 'lock', title: '锁头' }, { name: 'star', title: '星星' }, ] } }, methods: { click(name) { this.$refs.uToast.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>
copy
#绑定点击事件&自定义列数
<template> <view> <u-grid :border="false" col="4" > <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" > <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22" ></u-icon> <text class="grid-text">{{listItem.title}}</text> </u-grid-item> </u-grid> <u-toast ref="uToast" /> </view> </template> <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.uToast.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>
copy
#实现宫格的左右滑动
结合uni的swiper组件可以实现宫格的左右滑动，因为swiper特性的关系，请指定swiper的高度 ，否则swiper的高度不会被内容撑开，可以自定义swiper的指示器，达到更高的灵活度
<template> <view> <swiper :indicator-dots="true" class="swiper" > <swiper-item> <u-grid :border="true"> <u-grid-item :customStyle="{width:220+'rpx',height:220+'rpx'}" v-for="(item, index) in swiperList" :index="index" :key="index" > <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22" ></u-icon> <text class="grid-text">{{ '宫格' + (index + 1) }}</text> </u-grid-item> </u-grid> </swiper-item> <swiper-item> <u-grid :border="true"> <u-grid-item :customStyle="{width:220+'rpx',height:220+'rpx'}" v-for="(item, index) in swiperList" :index="index + 9" :key="index" > <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22" ></u-icon> <text class="grid-text">{{ '宫格' + (index + 1) }}</text> </u-grid-item> </u-grid> </swiper-item> <swiper-item> <u-grid :border="true"> <u-grid-item :customStyle="{width:220+'rpx',height:220+'rpx'}" v-for="(item, index) in swiperList" :index="index + 18" :key="index" > <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item" :size="22" ></u-icon> <text class="grid-text">{{ "宫格" + (index + 1) }}</text> </u-grid-item> </u-grid> </swiper-item> </swiper> </view> </template> <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>
