微信小程序开发,实现商品分类(一): https://blog.csdn.net/jky_yihuangxing/article/details/141568915
1. 前言导读
在前集文章中,我们通过使用scroll-view
实现了左侧边栏的商品分类,今天我们来实现点击左侧边栏的分类,对应右边的商品列表数据
2. 官方文档指南
功能描述
可滚动视图区域。使用竖向滚动时,需要给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>
- 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刚好
- 在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() {
}
})
数据为模拟数据,自己可根据实际情况来模拟,或者从服务端获取