cc-gonggeGrid

使用方法

	
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @gridClick:宫格点击按钮 -->
<cc-gonggeGrid gridTitle="九宫格" gridNum="3" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>

<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @gridClick:宫格点击按钮 -->
<cc-gonggeGrid gridTitle="十二宫格" gridNum="4" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>

<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @gridClick:宫格点击按钮 -->
<cc-gonggeGrid gridTitle="十五宫格" gridNum="5" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>

HTML代码实现部分

<template>
	<div>

		<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @gridClick:宫格点击按钮 -->
		<cc-gonggeGrid gridTitle="九宫格" gridNum="3" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>

		<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @gridClick:宫格点击按钮 -->
		<cc-gonggeGrid gridTitle="十二宫格" gridNum="4" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>

		<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @gridClick:宫格点击按钮 -->
		<cc-gonggeGrid gridTitle="十五宫格" gridNum="5" :gridList="gridList" @gridClick="gridClick"></cc-gonggeGrid>

	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

				gridList: [{
						name: '功能1',
						imgSrc: "../../static/appointList.svg",
					},
					{
						name: '功能2',
						imgSrc: "../../static/appointNum.svg",
					},
					{
						name: '功能3',
						imgSrc: "../../static/appointList.svg",
					},
					{
						name: '功能4',
						imgSrc: "../../static/appointNum.svg",
					},
					{
						name: '功能5',
						imgSrc: "../../static/appointList.svg",
					},
					{
						name: '功能6',
						imgSrc: "../../static/appointNum.svg",
					},
					{
						name: '功能7',
						imgSrc: "../../static/appointList.svg",
					},
					{
						name: '功能8',
						imgSrc: "../../static/appointNum.svg",
					},
					{
						name: '功能9',
						imgSrc: "../../static/appointNum.svg",
					},


				]
			}
		},

		methods: {
			gridClick(item, index) { //格子菜单点击事件



				console.log('item = ' + item.name + 'index = ' + index);
				uni.showModal({
					title: '温馨提示',
					content: '点击的功能是: ' + item.name
				})


			}
		}
	}
</script>

<style lang="less" scoped>

</style>

组件实现方式

<template>
	<div>
		<div class="grid-title">

			<text style="margin-left: 20px; color: #333333;">{{gridTitle}}</text>

		</div>
		<div class="grid">
			<div class="grid-item" :style="{width: 100/gridNum + '%'}" v-for="(item, index) in gridList" :key="index"
				@click.stop="gridClick(item, index)">
				<image :src="item.imgSrc" mode="aspectFill"></image>
				<div v-text="item.name"></div>
			</div>
		</div>

	</view>
</template>

<script>
	export default {

		props: {
			// 一行展示几个格子
			gridNum: {
				type: [String, Number],
				default: 3
			},
			// 左边标题栏
			gridTitle: {
				type: String,
				default: ""
			},
			// 宫格数组
			gridList: {
				type: Array,
				default: () => {
					return [];
				}
			}


		},
		data() {
			return {

			}
		},
		methods: {
			gridClick(item, index) {


				this.$emit("gridClick", item, index);

			},

		}

	}
</script>

<style lang="less" scoped>
	.grid-title {
		display: flex;
		align-items: center;
		font-size: 32upx;
		color: rgba(0, 0, 0, .63);
		padding: 30upx 0;


	}

	.grid {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-top: 1upx solid rgba(172, 172, 172, .2);

		.grid-item {
			box-sizing: border-box;
			// 设置是九宫格还是十二宫格 /3九宫格 /4十二宫格
			width: calc(100% / 3);
			border-bottom: 1upx solid rgba(172, 172, 172, .2);
			border-right: 1upx solid rgba(172, 172, 172, .2);
			text-align: center;
			padding: 40upx 0;
			position: relative;

			// 图片尺寸
			image {

				width: 54upx;
				height: 54upx;
				align-items: center;
			}

			view {
				font-size: 28upx;
				margin-top: 4upx;
				color: #666666;
			}

		}


	}
</style>

重点在于width: calc(100% / 3); 宽度用calc去计算

小程序 uniapp vue 一样的原理