微信小程序开发，实现商品分类商品列表（二）

移动开发 2024-11-01 16:29:28 阅读次数: 0

文章目录

微信小程序开发，实现商品分类（一）： https://blog.csdn.net/jky_yihuangxing/article/details/141568915

1. 前言导读

在前集文章中，我们通过使用scroll-view 实现了左侧边栏的商品分类，今天我们来实现点击左侧边栏的分类，对应右边的商品列表数据

2. 官方文档指南

  1. scroll-view: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

功能描述
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

  • 横向滚动需打开 enable-flex 以兼容 WebView，如
<scroll-view scroll-x enable-flex style="flex-direction: row;"/>
  • 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
  • 使用 worklet 函数需要开启开发者工具 “将 JS 编译成 ES5” 或 “编译 worklet 函数” 选项。

通用属性

属性 类型 默认 必填 说明
scroll-x boolean false 否 允许横向滚动
scroll-y boolean false 否 允许纵向滚动
upper-threshold number/string 50 否 距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold number/string 50 否 距底部/右边多远时，触发 scrolltolower 事件
scroll-top number/string 否 设置竖向滚动条位置
scroll-left number/string 否 设置横向滚动条位置
scroll-into-view string 否 值为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation boolean false 否 在设置滚动条位置时使用动画过渡

详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档 | 详情请看官方文档

3.右侧整体布局分析

分析右边商品布局整体是一个可以滑动的列表（当数据超过一屏时，可滑动），因此，最外层应该用scroll-view来包裹，跟左侧栏分类一样

4. 代码实现过程

1.cate.wxml

<navigation-bar title="购物商城" back="{
    
    {false}}" color="#ffffff" background="#f3514f"></navigation-bar>
<view class="category-container">
	<!-- 左边的滚动视图区域 -->
	<scroll-view class="category-left-view" scroll-y type="list">
		<view class="left-view-item  {
    
    {activeIndex===index? 'active' : ''}}" active wx:for="{
    
    {categoryList}}" wx:key="category_id" bind:tap="selectCategory" data-currentIndex="{
    
    {index}}">
			{
    
    {
    
    item.category_name}}
		</view>
	</scroll-view>


	<!-- 右边边的滚动视图区域 -->
	<scroll-view class="category-right-view" scroll-y type="list">
		<view class="category-right-container">
			<view class="category-item" wx:for="{
    
    {productList}}" wx:key="{
    
    {product_id}}">
				<image src="{
    
    {item.product_picUrl}}" mode="" />
				<text>{
    
    {
    
    item.product_name}}</text>
			</view>

		</view>

	</scroll-view>
</view>
  1. cate.wxcss
.category-container {
    
    
  display: flex;
}

.category-left-view {
    
    
  height: 100vh;
  width: 220rpx;
}

.left-view-item {
    
    
  height: 68rpx;
  color: #333333;
  line-height: 68rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  text-align: center;
  border-left: 6rpx solid #ffffff;
  font-size: 26rpx;
}
.active {
    
    
  border-left: 6rpx solid #f3514f;
  color: #f3514f;
}

.category-right-view {
    
    
  height: 100vh;
  width: 100%;
  background-color: #f5f5f5;
}
.category-right-view .category-right-container {
    
    
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 30rpx;
  margin-right: 30rpx;
  padding-bottom: 200rpx;
}

.category-right-container .category-item {
    
    
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
  align-items: center;
}
.category-right-container .category-item image {
    
    
  width: 158rpx;
  height: 158rpx;
}

.category-right-container .category-item text{
    
    
  color: #666666;
  font-size: 26rpx;
  margin-top: 10rpx;
  font-weight: 500;
}

注意事项：

  • 在.category-right-view .category-right-container{}设置了 padding-bottom: 200rpx; 原因是当数据超过一屏时，被下面的TabBar遮盖了一部分，为了不被遮盖住，设置了内边距距离底部200rpx刚好
  1. 在cate.js
  • 首先在data 里面定义一个空数组 productList: []
  • 然后定义一个点击左侧栏切换的时候，加载对应的商品列表数据的方法,取名叫selectCategoryList
  /**
   * 点击左侧分类对应右侧的商品列表
   * @param  position 
   */
selectCategoryList(position){
    
    
   //根据左侧栏分类的下边来获取不同的商品列表数据
   ···
    this.setData({
    
    })
}
  • 最后在selectCategoryList里面再调用this.setData({}) 来驱动更新数据

整个cate.js代码实现过程

// pages/cate/cate.js
Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    

    categoryList: [
      {
    
     "category_id": 1001, "category_name": "爱礼精选", "category_index": 0 },
      {
    
     "category_id": 1002, "category_name": "鲜花玫瑰", "category_index": 1 },
      {
    
     "category_id": 1003, "category_name": "永生玫瑰", "category_index": 2 },
      {
    
     "category_id": 1004, "category_name": "玫瑰珠宝", "category_index": 3 },
      {
    
     "category_id": 1005, "category_name": "鲜花玫瑰", "category_index": 4 },
      {
    
     "category_id": 1006, "category_name": "永生玫瑰", "category_index": 5 },
      {
    
     "category_id": 1007, "category_name": "玫瑰珠宝", "category_index": 6 },
      {
    
     "category_id": 1008, "category_name": "鲜花玫瑰", "category_index": 7 },
      {
    
     "category_id": 1009, "category_name": "永生玫瑰", "category_index": 8 },
      {
    
     "category_id": 10010, "category_name": "玫瑰珠宝", "category_index": 9 },
    ],
    categoryName: "爱礼精选",
    activeIndex: 0,   //默认选中下标为0

    productList: []  //右侧商品数据

  },


  /**点击左侧分类 */
  selectCategory(event) {
    
    
    const index = event.currentTarget.dataset.currentindex
    this.setData({
    
    
      activeIndex: index,
      categoryName: this.data.categoryList[index].category_name,

    })

    //切换时加载数据
    this.selectCategoryList(this.data.activeIndex)

  },


  /**
   * 点击左侧分类对应右侧的商品列表
   * @param  position 
   */
  selectCategoryList(position) {
    
    
    //这里要注意先要清空集合数据，再重新添加数据到集合
    this.data.productList = []
    if (position == 0) {
    
    
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    } else if (position == 1) {
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })

      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    } else if (position == 2) {
    
    
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==3){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==4){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==5){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==6){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==7){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==8){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }else if(position==9){
    
    
      this.data.productList.push({
    
     "product_id": 4, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 5, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 6, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 7, "product_picUrl": "http://img.alicdn.com/img/i4/129087831/O1CN012akn8n27ieS7dLeyy_!!0-saturn_solar.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 3, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 0, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 1, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
      this.data.productList.push({
    
     "product_id": 2, "product_picUrl": "https://picasso.alicdn.com/imgextra/O1CNA1AOd4v82LheKQz1Tui_!!2785769724-0-psf.jpg_.webp", "product_name": "测试数据", "product_price": 30, "product_details": "拉夏贝尔Puella法式拼接连衣裙女夏2024新款别致设计感赫本风裙子" })
    }

    this.setData({
    
    
      productList: this.data.productList
    })
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    
    
    this.selectCategoryList(0)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
    

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

数据为模拟数据，自己可根据实际情况来模拟，或者从服务端获取

5. 运行效果图

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jky_yihuangxing/article/details/141716455
今日推荐
周排行
TryParse的使用方法小结
Android之高仿手机QQ聊天
关于在java中关键字private能否用来修饰类的问题
去雾算法总结
前端面试题：事件防抖，函数节流，事件防抖和函数节流的区别
随堂小测
【OpenCV + Python】归一化函数cv2.normalize()的原理讲解
05: redis 主从复制
python3-基础5
持续更新-使用 Maven Module 搭建spring boot项目（整合Spring Security、Spring Social、spring OAuth）第一篇
每日归档
更多
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022