微信小程式動態實現上圖所示小選單：

設定選單資料來源：

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;
}