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

已于 2024-08-30 14:32:46 修改
阅读量334 收藏 1
点赞数 3
分类专栏： 微信小程序开发入门 文章标签： 微信小程序 小程序 javascript 前端
于 2024-08-30 14:19:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/141716455
版权

文章目录

微信小程序开发，实现商品分类（一）： 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-xbooleanfalse否允许横向滚动
scroll-ybooleanfalse否允许纵向滚动
upper-thresholdnumber/string50否距顶部/左边多远时，触发 scrolltoupper 事件
lower-thresholdnumber/string50否距底部/右边多远时，触发 scrolltolower 事件
scroll-topnumber/string否设置竖向滚动条位置
scroll-leftnumber/string否设置横向滚动条位置
scroll-into-viewstring否值为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡

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

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. 运行效果图

在这里插入图片描述

浩宇软件开发
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序开发：实现在线客服与客户管理
吃不胖.
08-10 1519
在线客服功能是指在小程序中提供实时的在线客服服务，方便用户与客服人员进行沟通交流，解决相关问题。而客户管理功能则是指对小程序中的用户进行管理，包括用户的基本信息、行为数据等进行分析和处理。客服人员需要登录系统，可以通过微信扫码登录或者输入用户名密码进行登录，登录后客服人员即可接收用户消息并进行回复。系统可以对客户进行推广管理，通过推广链接或邀请码等方式，将客户推荐给其他用户，从而增加客户数量，提高销售额。系统需要对客服人员和用户的聊天数据进行分析，统计客服人员的工作效率和用户的反馈情况，提高客服工作质量。
小程序 | 微信小程序实现商品分类列表
JifengZ9的博客
08-25 1万+
小程序 | 微信小程序实现商品分类列表
微信小程序之实现到商品列表跳转商品详情页
qq_47637405的博客
04-02 1万+
模仿京东小程序，实现下列功能。
新手版微信小程序商场商品分类页面（本地版）
Sun_day_more的博客
04-12 3237
关于微信小程序商品分类页面和商品详情页面的制作（新手版）
微信小程序之商品属性分类-——-微信小程序实战商城系列（4）
2301_79056696的博客
04-20 729
现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水！为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！Android架构师之路很漫长，一起共勉吧！
微信小程序实现分类功能
weeere的博客
07-20 610
然后在xlml页面中渲染，用数组的下标，如：{{list[currentIndex]}},分类一般是两侧，左侧和右侧，左侧的页面id和右侧的数组下标相等，右侧则呈现相应的数据。然后把从数据库得到的数据存储在以上的数据中，this.setdata({ list.0:res.data,list.1:res.data})想法是在page页面里data:{}数据里，创建一个数据，微信小程序怎样实现分类功能。
基于Java+SpringBoot+Vue+uniapp微信小程序零食商城系统设计和实现
热门推荐
java李阳勇的博客
01-18 19万+
微信小程序零食商城系统设计和实现主要功能设计:首页、网站公告、购物车、我的、零食分类、零食搜索、订单、购物车、评论、收藏、点赞、点踩、个人中心、用户充值、用户管理、零食分类管理、零食管理、系统管理、订单管理
uniapp微信小程序商品分类
mengmeng12138的博客
07-12 486
uniapp微信小程序商品分类
微信小程序开发一个小型商城（四、商品列表）
共勉
04-13 1万+
上一篇文章，微信小程序开发一个小型商城（三、商品分类设计） 在从上一个界面跳转过来，会看到商品列表这个界面：如下图所示： 页面分析：从上到下：分别是一个已经定义好的自定义组件，下面的综合，销量，也是一个自定义组件。下面商品的一个个的小框框就是一个个的navigetor。 自定义组件 使用已经定义好了的组件。先在category/index/index.json文件引入组件，随后在wxml文件当中...
微信小程序开发一个小型商城（三、商品分类设计）
共勉
04-13 1万+
上一篇博文，微信小程序开发一个小型商城（二、首页设计） 首先我们根据效果图再一一分解； 可以看到在这个页面室友上方自定义组件搜索栏，左右俩边分别是一个scroll-view标签组成的。 自定义组件 使用已经定义好了的组件。先在category/index/index.json文件引入组件，随后在wxml文件当中直接调用组件即可。 滚动view组件 在一个view标签当中将其分为左右俩侧，均使用s...
微信小程序实现侧边分类栏
10-16
本篇文章将详细讲解如何使用微信小程序开发工具来创建这样一个功能。 首先，我们需要理解微信小程序的基本结构，它由WXML（结构层）和WXSS（样式层）两部分组成，类似于HTML和CSS，再配合JavaScript进行逻辑处理。...
小米商城微信小程序源码实现
03-11
实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、用户购物车、订单结算、用户订单、用户收藏列表。 该项目整体参考了 vue-store 实现，基本实现了其所有功能，可以说是其的微信小程序版。 后端...
微信小程序实现列表的横向滑动方式
10-15
本文将介绍微信小程序中如何实现列表的横向滑动效果，主要包括以下两种方法：简单样式实现和scroll-view标签的使用。 一、简单样式实现 简单样式实现横向滑动列表的思路是通过CSS样式来控制。具体来说，就是设置父...
微信小程序实现左右列表联动
10-17
在微信小程序中，实现左右列表联动是一种常见的交互设计，它允许用户在左侧的分类列表中选择一个类别，然后右侧的列表会根据所选类别展示对应的内容。这种功能常见于电商应用，帮助用户快速定位到他们感兴趣的商品。...
基于微信小程序的行李寄存管理系统的设计与实现(论文+源码)_kaic
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
08-26 964
随着时代的发展，传统的行李寄存管理方式已经不再适合这个高速发展的时代，放眼全球行李寄存管理都是一个与人们生活息息相关的问题，为了解决上述问题，尝试基于微信小程序设计一个系统完善的行李寄存管理系统，该系统投入使用之后能够提升用户行李寄存效率，能够方便管理员对行李寄存的管理，进而有效的解决行李寄存中出现的问题，既可以规避行李寄存出错而带来的风险，又可以有效提升用户行李寄存的舒适度。通过对研究背景的分析，我得出结论，系统具有较低的开发费用，并且在系统‏完成后，对基于微信小程序的行李寄存管理系统有市场需求。
基于微信小程序靓丽内蒙古APP（源码+定制+辅导）
程序员阿龙的博客
08-24 809
随着互联网的飞速发展，人民生活水平逐步上升，伴随着的是人们对生活质量的追求不断提高，而旅游就是提高生活质量的一种很好的方式。当旅游人数和旅游景点数同时飞速增加时，旅游相关的数据的管理就变得愈加困难，因此，旅游管理系统的开发也就应运而生。系统通过采用目前主流的设计理念和技术构架进行搭建，使用高性能的IDEA编写代码。
nodejs基于微信小程序的书籍销售系统论文源码调试讲解
最新发布
u014445459的博客
08-29 974
B/S结构是目前使用最多的结构模式，它可以使得系统的开发更加的简单，好操作，而且还可以对其进行维护。使用该结构时只需要在计算机中安装数据库，和一些很常用的浏览器就可以了。浏览器就会与数据库进行信息的连接，可以实现很多的功能，B/S结构是可以直接进行使用的，而且B/S结构在使用中极大的减少了工作的维护。基于B/S的软件，所有的数据库之间都是相互独立的，因此是非常安全的。因为基于B/S结构可以清楚的看到系统正在处理的业务，并且能够及时的让管理人员做出决策，这样就可以避免企业的损失。
微信小程序：点击事件（bindtap）传递参数
一些平时在开发过程中遇到的常见问题，分享给大家
08-24 727
​ 小程序在组件上绑定事件后，传递参数的方式不同于前端其他场景中直接加参数的方式，小程序在参数的传递时，采用事件对象的自定义属性的方式，具体实现如下： ​
基于springboot+vue+uniapp的物流管理系统小程序
老卓爱爪哇 的博客
08-27 944
在此基础上，结合现有物流管理体系的特点，运用新技术，构建了以 springboot为基础的物流信息化管理体系。首先，以需求为依据，对目前传统物流管理基础业务进行了较为详尽的了解和分析。根据需求分析结果进行了系统的设计，并将其划分为管理员、用户和员工三种角色：主要功能包括个人中心、用户管理、员工管理、部门管理、物品分类管理、物流公司管理、物流信息管理、配送信息管理、运输信息管理、装卸搬运管理、仓储信息管理、系统管理等。使用目前市场主流的技术 Springboot框架和Maven进行项目构建，使用Java开发语
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩宇软件开发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值