写 微信小程序 圆形菜单 代码
时间: 2023-04-07 20:02:10 浏览: 85
我可以回答这个问题。以下是一个简单的微信小程序圆形菜单的代码示例:
wxml 文件:
```
<view class="menu">
<view class="menu-item" bindtap="handleTap" data-index="0">
<image src="/images/icon1.png"></image>
<text>菜单项1</text>
</view>
<view class="menu-item" bindtap="handleTap" data-index="1">
<image src="/images/icon2.png"></image>
<text>菜单项2</text>
</view>
<view class="menu-item" bindtap="handleTap" data-index="2">
<image src="/images/icon3.png"></image>
<text>菜单项3</text>
</view>
<view class="menu-item" bindtap="handleTap" data-index="3">
<image src="/images/icon4.png"></image>
<text>菜单项4</text>
</view>
</view>
```
wxss 文件:
```
.menu {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 200rpx;
}
.menu-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
background-color: #fff;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
margin: 0 40rpx;
}
.menu-item image {
width: 60rpx;
height: 60rpx;
}
.menu-item text {
margin-top: 10rpx;
font-size: 28rpx;
color: #333;
}
```
js 文件:
```
Page({
handleTap: function(e) {
var index = e.currentTarget.dataset.index;
console.log('点击了菜单项' + (index + 1));
}
})
```
这个代码示例实现了一个简单的圆形菜单,包含四个菜单项,每个菜单项都有一个图标和一个文本。当用户点击菜单项时,会在控制台输出相应的信息。