首页商品大类显示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 () {
    
  }
})
相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper8 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳8 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱8 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖8 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀8 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴8 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录9 小时前
JavaScript屏幕切换检测方案
前端·javascript