微信小程序-首页导航栏Ⅱ

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/82887202

效果：类似携程小程序，首先一个轮播图展示一些活动信息或广告，然后九宫格展示酒店、机票、火车票、名宿、汽车票、专车等图标+文字

.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 )'
      }
    ],