效果
代码
<template><view class="position"><view class="circle"><img src="/static/item1.png" class="center-image"><view v-for="(item, index) in itemList" :key="index" class="item" :style="getItemStyle(index)"><img :src="item.src" /><text>{{ item.name }}</text></view></view></view>
</template><script>export default {data() {return {itemList: [{name: "Item1",src: "/static/item1.png"},{name: "Item2",src: "/static/item2.png"},{name: "Item3",src: "/static/item3.png"},{name: "Item4",src: "/static/item4.png"},{name: "Item5",src: "/static/item5.png"},{name: "Item6",src: "/static/item6.png"},{name: "Item7",src: "/static/item7.png"},],circleRadius: 120, // 圆的半径itemSize: 60, // 每个view的大小};},methods: {// 计算每个 view 的样式getItemStyle(index) {const {itemList,circleRadius,itemSize} = this;const angle = (2 * Math.PI) / itemList.length; // 每个 view 的角度间隔const centerX = circleRadius + itemSize / 2; // 圆心的 x 坐标const centerY = circleRadius + itemSize / 2; // 圆心的 y 坐标const radius = circleRadius + itemSize / 2; // view 的圆心距离（圆的半径加上 view 大小的一半）const x = Math.round(centerX + radius * Math.cos(angle * index - Math.PI / 2)); // 计算 x 坐标const y = Math.round(centerY + radius * Math.sin(angle * index - Math.PI / 2)); // 计算 y 坐标return {width: itemSize + "px",height: itemSize + "px",position: "absolute",top: y + "px",left: x + "px",transform: `translate(-50%, -50%)`, // 居中显示};},},};
</script><style scoped>/* 整体位置 */.position{/* border: 1px solid black; */position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);}/* 圆的样式 */.circle {width: 300px;height: 300px;border-radius: 50%;/* border: 1px solid black; */}/* 中间图标 */.center-image {width: 80px;height: 80px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 小图标 */.item {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}/* 小图标的图片信息 */.item img {width: 40px;height: 40px;border-radius: 50%;}
</style>
