【微信小程序】6/8/10个icon圆球导航

微信小程序的icon圆球菜单

效果

js

/**
   * 页面的初始数据
   */
  data: {
    navBtn: [{
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#5093D2'
      },{
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#5094D2'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#DA70A0'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#DF975C'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#95B1FA'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#77BF6B'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#F1E85B'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#F1E85B'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#EC5D55'
      },
      {
        'name': '你猜猜',
        'icon': '',
        'url': '../caicai/caicai',
        'bgc': '#A3619E'
      },
    ]

wxml

<view class='navBox'>
  <view class='navBtn' wx:for="{{navBtn}}" wx:key="unique">
    <navigator url='{{item.url}}' hover-class='none'>
      <image class='navImg' src='' style='background:{{item.bgc}}'></image>
      <view class='navName'>{{item.name}}</view>
    </navigator>
  </view>
</view>

wxss

.navBox {
  display: flex;
  flex-wrap: wrap;
  height: 450rpx;
  background: #fff;
  margin-top: 15rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
  font-size: 9pt;
}

.navBtn {
  /* 33.3 25 20 */
  width: 20%;
  text-align: center;
  padding-top: 15rpx;
  box-sizing: border-box;
}

.navImg {
  display: block;
  width: 125rpx;
  height: 125rpx;
  margin: 0 auto;
  border-radius: 50%;
}

.navName {
  padding: 10rpx 0;
}

转载请注明出处！