效果:类似携程小程序,首先一个轮播图展示一些活动信息或广告,然后九宫格展示酒店、机票、火车票、名宿、汽车票、专车等图标+文字
.wxml页面:
<view class="container-center">
<view class="weui-cells hotel" wx:for="{{ weuiArray }}" style="{{ item.color }}" >
<navigator class="weui-cell weui-cell_access head" url="{{ item.url}}" hover-class="weui-cell_active">
<view class="weui-cell__hd">
<text class="{{ item.image}}"></text>
</view>
<view class="weui-cell__bd">
<view class="hotel_title">{{ item.title}}</view>
</view>
</navigator>
</view>
</view>
.wxss样式:我这边展示的是两列,如果需要展示三列或者以上,直接修改.weui-cells.hotel的width属性即可
.container-center {
width: 100%;
}
.weui-cells.hotel {
margin: 20rpx 10rpx 5rpx 15rpx;
border-radius: 15rpx;
width: 46%;
height: 120px;
text-align: center;
display: block;
float: left;
position: relative;
}
.weui-cell__hd {
margin-top: 20px;
}
.weui-cell__bd .hotel_title {
font-size: 50rpx;
color: #fff;
}
.icon-jianshenfang, .icon-yumaoqiu, .icon-wangqiu, .icon-tiyu-gaoerfuqiu {
font-size: 50px;
color: #ffff;
}
.js 数据:在data{ }中增加
weuiArray: [{
url: '',
image: 'iconfont icon-jianshenfang',
title: '健身房',
color: "background-color: rgb(228,107,80)"
},
{
url: '',
image: 'iconfont icon-yumaoqiu',
title: '羽毛球',
color: "background-color: rgb(97,182,249)"
},
{
url: '',
image: 'iconfont icon-wangqiu',
title: '网球',
color: 'background-color: rgb(116,214,139)'
},
{
url: '',
image: 'iconfont icon-tiyu-gaoerfuqiu',
title: '高尔夫',
color: 'background-color: rgb(102,200,225 )'
}
],