1、效果：

2、源码：

<template>
	<view class="u-demo">
		
		<u-toast ref="uToast"></u-toast>

		<u-grid :col="col" :border="border">

			<u-grid-item v-for="(item,index) in gridlist" :key="index" :index="item.index" @click="itemClick">
				
				<u-image width="50rpx" height="50rpx" :src="item.src"></u-image>
				<view class="grid-text">{{item.name}}</view>
				
			</u-grid-item>

		</u-grid>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				col: 3,
				border: false,
				gridlist: [{
					"index":0,
					"src": "/static/logo2.png",
					"name": "uView1.0"
				}, {
					"index":1,
					"src": "/static/logo.png",
					"name": "测试2"
				}, {
					"index":2,
					"src": '/static/logo.png',
					"name": "测试3",
				}, {
					"index":3,
					"src": '/static/logo.png',
					"name": "测试4",
				}, {
					"index":4,
					"src": '/static/logo.png',
					"name": "测试5",
				}, {
					"index":5,
					"src": '/static/logo.png',
					"name": "测试6",
				}, {
					"index":6,
					"src": '/static/logo.png',
					"name": "测试7",
				}, {
					"index":7,
					"src": '/static/logo.png',
					"name": "测试8",
				}, {
					"index":8,
					"src": '/static/logo.png',
					"name": "测试9",
				}],
			}
		},
		methods: {
			itemClick(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}宫格`,
					type: 'warning'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>

3、需要导入第三方项目uview-ui，如下图，