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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/SunshineBlog/article/details/83003493

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

设置菜单数据源：

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页面： 

<view class='content' wx:for='{{menuList}}' wx:for-index="parentIndex">
  <view class='item' data-parentIndex='{{parentIndex}}' data-index='{{index}}' wx:for='{{item}}' bindtap='muenSubClick' data-introduce='{{sub}}' wx:for-item='sub'>{{sub.name}}</view>
</view>

微信小程序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;
}