首页商品大类显示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 () {
    
  }
})
相关推荐
小镇程序员2 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背2 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M3 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc3 小时前
学习electron
javascript·学习·electron
想自律的露西西★3 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳3 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络4 小时前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing4 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript