用uniapp写一个九宫格
时间: 2023-05-11 13:04:21 浏览: 94
好的,以下是一个用uniapp写的九宫格的代码示例:
<template>
<view class="grid">
<view class="grid-item" v-for="(item, index) in gridData" :key="index" @click="handleClick(index)">
<image :src="item.icon" class="grid-icon"></image>
<text class="grid-text">{{ item.text }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
gridData: [
{ icon: '/static/icon1.png', text: '选项1' },
{ icon: '/static/icon2.png', text: '选项2' },
{ icon: '/static/icon3.png', text: '选项3' },
{ icon: '/static/icon4.png', text: '选项4' },
{ icon: '/static/icon5.png', text: '选项5' },
{ icon: '/static/icon6.png', text: '选项6' },
{ icon: '/static/icon7.png', text: '选项7' },
{ icon: '/static/icon8.png', text: '选项8' },
{ icon: '/static/icon9.png', text: '选项9' },
],
};
},
methods: {
handleClick(index) {
console.log(`点击了第${index + 1}个选项`);
},
},
};
</script>
<style>
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx;
}
.grid-item {
width: 30%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.grid-icon {
width: 80rpx;
height: 80rpx;
margin-bottom: 10rpx;
}
.grid-text {
font-size: 28rpx;
color: #333;
}
</style>