微信小程序功能：轮播图--双重for循环

微信小程序–首页index

包含功能点：

• 轮播图
• 商品分类
• 商品楼层：双重for循环

结构：index.wxml

<view class="pyg_index">
  <!-- 搜索框 -->
  <searchInput></searchInput>
  <!-- 轮播图 -->
  <view class="index_swiper">
    <swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator url="{{item.navigator_url}}" hover-class="navigator-hover" open-type="navigate" url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
          <image src="{{item.image_src}}" mode="widthFix" lazy-load="false" />
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 导航 -->
  <view class="index_cate">
    <navigator wx:for="{{cateList}}" wx:key="name" url="/pages/category/category" open-type="switchTab">
      <image src="{{item.image_src}}" mode="widthFix" lazy-load="true" />
    </navigator>
  </view>
  <!-- 楼层 -->
  <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 src="{{item1.floor_title.image_src}}" mode="widthFix" lazy-load="false" />
      </view>
      <!-- 内容：如果是第一张图片：模式为widthFix -->
      <view class="floor_list">
        <navigator url="" hover-class="navigator-hover" open-type="navigate" wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="name" url="/pages/goods_lsit/goods_lsit?query={{item2.name}}">
          <image src="{{item2.image_src}}" mode="{{index2==0?'widthFix':'scaleFill'}}" lazy-load />
        </navigator>
      </view>
    </view>
  </view>
</view>

样式：index.less

// 轮播图
.index_swiper {
  swiper {
    width: 750rpx;
    height: 340rpx;

    image {
      width: 100%;
    }
  }
}

// 导航
.index_cate {
  display: flex;

  navigator {
    padding: 20rpx;
    flex: 1;

    image {
      width: 100%;
    }
  }
}

// 楼层--特点：每张图片占比1/3  后面图片高度占第一张图片的1/2
.index_floor {
  .floor_group {
    .floor_title {
      padding: 10rpx 0;

      img {
        width: 100%;
      }
    }

    .floor_list {
      // 清除浮动
      overflow: hidden;

      navigator {
        float: left;
        // 占比1/3
        width: 33.33%;

        /*
        后四个超链接
        原图的宽高：232 * 386px
        232 / 386 = 33.33vw / height
        第一张图片的高度height: 33.33vw * 386 / 232
        */
        &:nth-last-child(-n+4) {
          height: 33.33vw * 386 / 232 / 2;
          // 后四张图片：添加左边框
          border-left: 10rpx solid #fff;
        }

        // 2和3两个超链接：添加下边框
        &:nth-child(2),
        &:nth-child(3) {
          border-bottom: 10rpx solid #fff;
        }

        img {
          width: 100%; // 继承父元素的宽度
          height: 100%;
        }
      }
    }
  }
}

逻辑：index.js文件

import {request} from "../../request/index.js";

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 轮播图
    swiperList: [],
    // 分类
    cateList: [],
    // 楼层
    floorList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSwiperList()
    this.getCateList()  
    this.getFloorList() 
  },
// 获取轮播图数据
  getSwiperList(){
    request({url:"/home/swiperdata"})
    .then(result=>{
      this.setData({
        swiperList: result
      })
    })
  },
  // 获取分类数据
  getCateList(){
    request({url:"/home/catitems"})
    .then(result=>{
      this.setData({
        cateList: result
      })
    })
  },
  // 获取楼层数据
  getFloorList(){
    request({ url:"/home/floordata"})
    .then(result=>{
      this.setData({
        floorList: result
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

页面配置文件：index.json文件

{
  "usingComponents": {
    "searchInput": "../../component/searchInput/searchInput"
  }
}