|
样式: 
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"},
]
|