小程序商城项目首页导航栏与楼层栏搭建

一、分析效果以及传递来的数据

• 现在，我们需要完成图示的导航和楼层的构建
• 根据请求来的数据，导航栏就是四张图片，而且文字都包含进去了

• 楼层也大致可以分为标题和内容：标题包含一张图片，内容包含5张图片共3组

二、请求数据

• 暂时利用封装的promise请求分类导航与楼层数据

• 在AppData中检查是否获取数据

三、分类导航构建

• 简单的用循环将四张图片在一行内显示，并调整一下样式即可

index.wxml:

<!-- 分类导航 开始 -->
<view class="index_cate">
  <navigator
    wx:for="{{catesList}}"
    wx:key="name">
    <image mode="widthFix" src="{{item.image_src}}"/>
  </navigator>
</view>
<!-- 分类导航 结束 -->

index.less:

.index_cate {
  display: flex;
  navigator {
    padding: 20rpx;
    flex: 1;
    image {
      width: 100%;
    }
  }
}

• 效果：

四、楼层构建

• 数据分析完毕后，清除知道需要两层循环，数据与结构的比对如下

• 其中第二循环五个照片时，后面四张图片的高度是第一张图片的一半

index.wxml：

<!-- 楼层 开始 -->
<view class="index_floor">
  <view class="floor_group"
    wx:for="{{floorList}}"
    wx:for-item="item1"
    wx:for-index="index1"
    wx:key="floor_title">
    <!-- 标题 -->
    <view class="floor_title">
      <image mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
    </view>
    <!-- 内容 -->
    <view class="floor_list">
      <navigator
        wx:for="{{item1.product_list}}"
        wx:for-item="item2"
        wx:for-index="index2"
        wx:key="name">
        <image src="{{item2.image_src}}" mode="{{ index2 === 0? 'widthFix' : 'scaleToFill' }}"/> 
      </navigator>
    </view>
  </view>
</view>
<!-- 楼层 结束 -->

index.wxss：

.index_floor {
  .floor_group {
    .floor_title {
      padding: 10rpx 0;
      image {
        width: 100%;
      }
    }
    .floor_list {
      // 清除浮动
      overflow: hidden;
      navigator {
        float: left;
        width: 33.33%;
        // 后四个超链接
        &:nth-last-child(-n+4) {
          // 原图的宽高 232 * 386
          // 232 / 386 = 33.33vw / height
          // 第一张图片的高度 height = 33.33vw / 386 * 232
          height: (33.33vw * 386 / 232 / 2);
          border-left: 10rpx solid #fff;
        }
        // 2 3两个超链接
        &:nth-child(2),
        &:nth-child(3) {
          border-bottom: 10rpx solid #fff;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

• 注意：less使用出发计算的时候需要加上小括号

• 此时，首页分类导航和楼层就搭建完成了：