微信小程序动态实现小菜单

雨点打透心脏的1/2处 2022-05-08 09:48 701阅读 0赞

![70][]

微信小程序动态实现上图所示小菜单：

设置菜单数据源：

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        menuList: [
          [{
              name: '菜单1',
              url: '../navigateTo/navigateTo',
              content: '我是菜单一'
            },
            {
              name: '菜单2',
              url: '../logs/logs',
              content: '我是菜单二'
            },
            {
              name: '菜单3',
              url: '../movie/movie',
              content: '我是菜单三'
            },
            {
              name: '菜单4',
              url: '../userinfo/userinfo',
              content: '我是菜单四'
            }
          ],
          [{
              name: '菜单5',
              url: '121',
              content: '我是菜单五'
            },
            {
              name: '菜单6',
              url: '121',
              content: '我是菜单六'
            },
            {
              name: '菜单7',
              url: '121',
              content: '我是菜单七'
            },
            {
              name: '菜单8',
              url: '121',
              content: '我是菜单八'
            }
          ],
        ]
      }
    })

微信小程序wxml页面：

微信小程序wxss页面：

.content {
      display: flex; /*显示方式为flex*/
      flex-direction: row; /*布局方式为水平*/
      justify-content: space-around; /*位置平分*/
      margin-top: 25rpx;
    }
    
    .item {
      width: 100rpx;
      height: 100rpx;
      background-color: skyblue;
      border-radius: 50%; /*圆角*/
      text-align: center;
      line-height: 100rpx;
      font-family: 宋体;
      font-size: 35rpx;
    }

[70]: /images/20220508/2d1a6e76eeda4e03bd1244829bf28cf5.png