小程序动态菜单九宫格

<!-- 动态菜单部分 标签 -->
    <view class="wifi_menu_wrap">
        <van-grid column-num="3" border="{{ false }}" center="center">
            <van-grid-item use-slot wx:for="{{menuDataList}}" data-item="{{item}}" bindtap="itemClick" wx:key="id">
                <view class="menu_item">
                    <image class="menu_icon" src="{{baseImgUrl+item.menu_icon}}" mode="widthFix" />
                    <view class="menu_name">{{item.menu_name}}</view>
                </view>
            </van-grid-item>
        </van-grid>
    </view>

wxss 样式
.wifi_menu_wrap {
    display: flex;
    flex-direction: column;
    margin: 20rpx 30rpx;
    /* height: 408rpx; */
    /* background: #FFFFFF;
    border-radius: 10rpx; */
    /* padding-bottom: 40rpx; */
    /* border: 2rpx solid;
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2; */
}

.item_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin: 0 60rpx;
}

.menu_item {
    text-align: center;
    display: flex;
    flex-direction: column;

    align-items: center;

    /* padding: 20rpx 0rpx; */

}

.menu_icon {
    width: 84rpx;
    height: 84rpx;
}

.menu_name {
    height: 40rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: center;
    padding-top: 20rpx;

}

.lable_unit {
    font-size: 20rpx;
    padding-right: 5rpx;
}

.wifi_menu_wrap .van-grid-item__content {
	padding: 0rpx 0 40rpx 0 !important;
}
.wifi_menu_wrap .van-grid{
    background: #FFFFFF;
    border-radius: 10rpx;
    padding-top: 40rpx;
    /* padding-bottom: 20rpx; */
}

    /**
     * 页面的初始数据
     */
    data: {
         //菜单数据构建
        menuDataList: [
            {
                id: 1,
                menu_icon: 'wifi_icon_agent_manager@2x.png',
                menu_name: '代理管理'
            },
            {
                id: 2,
                menu_icon: 'wifi_icon_extrue_agent@2x.png',
                menu_name: '拓展代理'
            },
            {
                id: 3,
                menu_icon: 'wifi_icon_dev_manager@2x.png',
                menu_name: '设备管理'
            },
            {
                id: 4,
                menu_icon: 'wifi_icon_my_meal@2x.png',
                menu_name: '我的套餐'
            },
            {
                id: 5,
                menu_icon: 'wifi_icon_record@2x.png',
                menu_name: '充值记录'
            },
        ],
        },
         //菜单点击事件处理
            itemClick(e) {
                var item = app.getElementData(e, "item"); // detail对象，提供给事件监听函数
                console.log(item);
                //处理点击事件
                switch (item.id) {
                    case 1://代理管理
                        this.handGotoAgentPage()
                        break;
                    case 2://拓展代理
                        this.handleShareBill()
                        break;
                    case 3: //设备管理
                        this.handDevManager();
                        break;
                    case 4: //我的套餐
                        this.handMyMealManager();
                        break;
                    case 5: //充值记录
                        this.goRecordClick();
                        break;
                    //..........其他的 handUserManager用户管理
                }
            },