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

谁借莪１个温暖的怀抱￠ 2023-02-20 03:21 12阅读 0赞

## 微信小程序–首页index ##

> 包含功能点：
> 
>  *  轮播图
>  *  商品分类
>  *  商品楼层：双重for循环

### 结构：index.wxml ###

### 样式：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"
      }
    }