樣式：

wxml：

<view id='guideList'>
    <view  class='guide-detail' >
      <view wx:for="{{guideList}}" wx:key="{{guideList}}">
        <navigator url='{{item.nav_to_item}}'>
          <view class='guide_detail_item' >
            <image class='logo' src='{{item.logoSrc}}'></image>
            <view>{{item.name}}</view>
          </view>
        </navigator>
      </view>
  </view>
 

wxss：

 .guide-detail{
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  font-size: 15px;
  justify-content: space-between;
}
/* 子項 圖片與文字一致 */
.guide_detail_item{
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 210rpx;
  padding: 20rpx 0;
}
.logo{
  width: 140rpx;
  height: 140rpx;
  margin: 0 auto;
}
/* 文字樣式 */
.guide_detail_item>view{
  font-size: 30rpx;
  margin-top: 15rpx;
}
 

js：

guideList: [
      {"name": "交通指南", "logoSrc": "../images/18-01.png", "nav_to_item":"traffic-guide/traffic-guide"},
      {"name": "停車指南", "logoSrc": "../images/19-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "科室分佈圖", "logoSrc": "../images/20-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "門診須知", "logoSrc": "../images/21-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "急診須知", "logoSrc": "../images/22-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "掛號須知", "logoSrc": "../images/23-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "住院流程", "logoSrc": "../images/24-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "醫保流程", "logoSrc": "../images/25-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "科室查詢", "logoSrc": "../images/26-01.png", "nav_to_item": "parking-guide/parking-guide"},
      {"name": "聯絡我們", "logoSrc": "../images/27-01.png", "nav_to_item": "parking-guide/parking-guide"},
    ]