首页热卖推荐商品显示axios异步请求数据动态渲染实现

flex-wrap属性：

默认情况下，项目都排在一条线（又称"轴线"）上。flex- wrap属性定义，如果一条轴线排不下，如何换行？

flex-wrap:wrap 该样式用于设置换行。

bash 复制代码

.product_name{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

bash 复制代码

<view>
<!-- 搜索框开始 -->
    <SearchBar></SearchBar>
<!-- 搜索框结束 -->

<!-- 轮播图开始 -->
<view class="index_swiper">
    <swiper autoplay circular indicator-dots>
        <swiper-item 
            wx:for="{{swiperList}}"
            wx:for-item="swiper"
            wx:key="id"
            >
            <navigator>
                <image mode="widthFix" src="{{'http://localhost:8080/image/swiper/'+swiper.swiperPic}}"></image>
            </navigator>
        </swiper-item>
    </swiper>
</view>
<!-- 轮播图结束 -->

    <!-- 商品大类显示 开始 -->
<view class="index_bigType">
    <view class="bigTypeRow">
        <navigator
            wx:for="{{bigTypeList_row1}}"
            wx:for-item="bigType"
            wx:key="id">
        <image mode="widthFix" src="{{baseUrl+'/image/bigType/'+bigType.image}}"></image>
        </navigator>
    </view>
    <view class="bigTypeRow">
        <navigator
            wx:for="{{bigTypeList_row2}}"
            wx:for-item="bigType"
            wx:key="id">
            <image mode="widthFix" src="{{baseUrl+'/image/bigType/'+bigType.image}}"></image>
        </navigator>
    </view>
</view>
<!-- 商品大类显示结束 -->

<!-- 商品热卖推荐 开始 -->
<view class="index_hotProduct">
    <view class="product_title">
        热卖推荐
    </view>
    <view class="product_list">
        <view class="product_detail"
            wx:for="{{hotProductList}}"
            wx:for-item="hotProduct"
            wx:key="id"
        >
            <navigator>
                <image mode="widthFix" src="{{baseUrl+'/image/product/'+hotProduct.proPic}}"></image>
                <view class="product_name">{{hotProduct.name}}</view>
                <view class="product_price">￥{{hotProduct.price}}</view>
                <button size="mini" type="warn">立即购买</button>
            </navigator>
        </view>
    </view>
</view>
<!-- 商品热卖推荐 结束 -->
</view>

bash 复制代码

.index_swiper{
    swiper{
        width: 750rpx;
        height: 375rpx;
        swiper-item{
            image{
                width: 100%;
            }
        }
    }
}

.index_bigType{
    padding-top: 20rpx;
    background-color: #F7F7F7;
    .bigTypeRow{
        display: flex;
        navigator{
            flex:1;
            image{
                width: 150rpx;
            }
        }
    }
}

.index_hotProduct{
    .product_title{
        font-size: 32rpx;
        font-weight: 600;
        padding: 20rpx;
        color: var(--themeColor);
        background-color: #E0E0E0;
    }
    .product_list{
        display: flex;
        flex-wrap: wrap;
        .product_detail{
            margin: 15rpx;
            width: 46%;
            text-align: center;
            navigator{
                image{
                    width: 100%;
                    background-color: #F5F5F5;
                }
                .product_name{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .product_price{
                    color: var(--themeColor);
                }
                button{}
            }
        }
    }
}

bash 复制代码

import { requestUtil,getBaseUrl } from "../../utils/requestUtil"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图数组
    swiperList:[],
    baseUrl:'',
    bigTypeList:[],
    bigTypeList_row1:[],
    bigTypeList_row2:[],
    hotProductList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     const baseUrl = getBaseUrl();
     this.setData({
         baseUrl
     })
     this.getSwiperList();
     this.getBigTypeList();
     this.getHotProductList();
  },
  async getSwiperList(){

    const result=await requestUtil({
        url:'/product/findSwiper',
        method:"GET"
    });
    this.setData({
        swiperList:result.message
    })

  },
  async getBigTypeList(){
    const result = await requestUtil({
        url:'/bigType/findAll',
        method:"GET"
    });
    console.log(result)
    const bigTypeList=result.message
    const bigTypeList_row1=bigTypeList.filter((item,index)=>{
        return index<5;
    })
    const bigTypeList_row2=bigTypeList.filter((item,index)=>{
        return index>=5;
    })
    this.setData({
        bigTypeList,
        bigTypeList_row1,
        bigTypeList_row2
    })
  },
  /**
   * 获取热卖商品
   */
  async getHotProductList(){
    const result=await requestUtil({
        url:'/product/findHot',
        method:"GET"
    });
    this.setData({
        hotProductList: result.message
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

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

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

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

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

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

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