【微信小程序】6/8/10个icon快捷菜单

效果

js

/**
   * 页面的初始数据
   */
  data: {
    /*类目列表*/
    sortRows: [
      [{
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "美食",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      },
      {
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "猫眼电影",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      },
      {
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "休闲娱乐",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      },
      {
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "外卖",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      }
      ],
      [{
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "KTV",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      },
      {
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "丽人",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      },
      {
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "火车票",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      },
      {
        image: "https://img03.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg",
        title: "更多",
        jumpUrl: "../link/link?linkUrl=https://www.baidu.com/"
      }
      ]
    ]
  },

//link.js

data: {
    linkUrl: ''
  },
  onLoad: function(options) {
    var that = this;
    that.setData({
      linkUrl: options.linkUrl
    });
  },

wxml

<!-- 6/8/10个icon模板 -->
<view class='sorts-wrap'>
  <view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
    <view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
      <navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
        <image src='{{sortItem.image}}'></image>
        <text>{{sortItem.title}}</text>
      </navigator>
    </view>
  </view>
</view>

//link.wxml

<web-view src='{{linkUrl}}' />

wxss

/* 8个icon */

.sorts-wrap {
  font-size: 28rpx;
  text-align: center;
  margin: 5px 0;
}

.sorts-wrap .flex-wrap {
  margin-top: 20rpx;
}

.sorts-wrap navigator image {
  width: 80rpx;
  height: 80rpx;
}

.sorts-wrap navigator text {
  display: block;
}

/*flex布局*/

.flex-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-wrap .flex-item {
  flex: 1;
}

转载请注明出处！