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

本文主要是介绍首页热卖推荐商品显示axios异步请求数据动态渲染实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

flex-wrap属性：
默认情况下，项目都排在一条线（又称“轴线”）上。flex- wrap属性定义，如果一条轴线 排不下，如何换行？
flex-wrap:wrap 该样式用于设置 换行。

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

<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"><navigatorwx: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"><navigatorwx: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>

.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{}}}}
}

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.messageconst 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 () {}
})

这篇关于首页热卖推荐商品显示axios异步请求数据动态渲染实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---