index1-526互联

<search></search>
<swiper class="swiper" autoplay indicator-dots indicator-color="#fff" indicator-active-color="#ddd" interval="2000">
  <swiper-item wx:for="{{swiper}}" wx:key="index">
    <navigator url="/pages/details/details?goods_id={{item.goods_id}}">
      <image src="{{item.image_src}}" mode="widthFix"></image>
    </navigator>
  </swiper-item>
</swiper>
<view class="cates">
  <navigator wx:for="{{cates}}" wx:key="index">
    <image  src="{{item.image_src}}"></image>
  </navigator>
</view>
<view class="floor">
<view wx:for="{{floor}}" wx:for-item="item1">
<view class="floor_title">
<image src="{{item1.floor_title.image_src}}" mode="widthFix"></image>
</view>
<navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" url="/pages/goodslist/goodslist">
<image src="{{item2.image_src}}" mode="{{index2==0?'widthFix':'scaleToFill'}}"></image>
</navigator>
</view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    swiper:[],
    cates:[],
    floor:[]
  },
  onLoad(){
    let that = this
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success(res){
        that.setData({
          swiper:res.data.message
        })
      }
    }),
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
      success(res){
        that.setData({
          cates:res.data.message
        })
      }
    }),
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
      success(res){
        console.log(res.data.message);
        that.setData({
          floor:res.data.message
        })
      }
    })
  }
})

.swiper{
  height: 300rpx;
  margin-top: 110rpx;
}
.swiper swiper-item navigator image{
  widows: 100%;
}

.cates{
  margin-top: 10rpx;
  display: flex;
}

.cates navigator{
  width: 25%;
  text-align: center;
  flex: 1;
}
.cates navigator image{
  width: 140rpx;
  height: 140rpx;
}
.floor{
  margin-top: 10rpx;
}
.floor_title{
  width: 100%;
}
.floor view navigator{
  width: 33.3%;
  float: left;
  border: 5rpx #fff solid;
  box-sizing: border-box;
}
.floor view navigator image{
  width: 100%;
  height: 100%;
}
.floor view navigator:nth-last-child(-n+4){
  height: 205rpx;
}

index1