效果展示

Demo代码

wxml

<view class="box">
 <view class="boxitem" wx:key=‘index‘ wx:for="{{functions}}" bindtap="tofunction" data-url="{{item.url}}">
  <view class="boxitem_top">
   <image src="{{item.icon}}"></image>
  </view>
  <view class="boxitem_bottom">
   <text>{{item.name}}</text>
  </view>
 </view>
</view>

js

/ pages/functions/functions.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    h: app.globalData.h,
    functions: [{
        icon: "/images/x1.png",
        name: "农学院",
        url: "../xueyuan/xueyuan"
      },
      {
        icon: "/images/x2.png",
        name: "农市大集",
        url: "../shiji/shiji"
      },
      {
        icon: "/images/x3.png",
        name: "AR扫病害",
        url: "../ar/ar"
      },
      {
        icon: "/images/x4.png",
        name: "交流论坛",
        url: "../luntan/luntan"
      },
      {
        icon: "/images/x5.png",
        name: "鲜蔬配送",
        url: "../peisong/peisong"
      },
      {
        icon: "/images/x6.png",
        name: "休闲农业",
        url: "../xiuxian/xiuxian"
      },
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  // 跳转页面
  tofunction: function (e) {
      //  wx.navigateTo({
      //   url: e.currentTarget.dataset.url,
      // })
    }
})

wxss

page {
  background-image: url(https://wx3.sinaimg.cn/mw690/006cV2kkgy1gcz9iabu19j30yi22oabf.jpg);
  background-size: cover;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: 50% auto;
}

.boxitem {
  width: 180rpx;
  height: 180rpx;
  margin: 25rpx;
  background-color: white;
.
.
.
.
.
.
 完整源码获取途径
见文末引言

微信小程序--功能区

原文：https://www.cnblogs.com/haihongpro/p/14349126.html