首页商品大类显示axios异步请求数据动态渲染实现

config

bash 复制代码
package com.java1234.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/***
 *
 * web项目配置类
 */
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/image/swiper/**").addResourceLocations("file:D:\\java1234-mall-v3\\swiperImgs\\");
        registry.addResourceHandler("/image/bigType/**").addResourceLocations("file:D:\\java1234-mall-v3\\bigTypeImgs\\");
    }
}
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>
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;
            }
        }
    }
}
bash 复制代码
import { requestUtil,getBaseUrl } from "../../utils/requestUtil"

Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     const baseUrl = getBaseUrl();
     this.setData({
         baseUrl
     })
     this.getSwiperList();
     this.getBigTypeList();
  },
  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
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
相关推荐
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶5 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json