效果：
搜索框内容处理、商品布局切换、手风琴模式弹出层、上拉触底加载下一页等等...
业务逻辑已经写好，接通后端接口就可以了，这里使用模拟数据展示！
1.在项目根部创建一个 components 文件夹里面放 -- 全局组件
goodsLayout.wxml
<block wx:if="{{layoutType == 1}}">
<view class="layout1">
<block wx:for="{{data}}" wx:key="index">
<view class="goods" bindtap="particulars" data-id="{{item.id}}">
<view class="goods_item_img">
<image src="{{item.image}}" mode="aspectFill"></image>
<view class="goods_item_img_view"><text class="store_name">{{item.store_name}}</text></view>
</view>
<view wx:if="{{item.param_sku}}" class="goods_item_sku {{item.param_sku.length >= 2?'border-top':'item-border-top'}}">
<block wx:for="{{item.param_sku}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs">
<view class="goods_sku_item">
<view class="item_name">{{items.sku}}</view>
<view class="item_price">
<text>￥</text>
<text>{{items.price}}</text>
</view>
</view>
</block>
</view>
</view>
</block>
</view>
</block>
<block wx:elif="{{layoutType == 2}}">
<view class="layout2">
<block wx:for="{{data}}" wx:key="index">
<view class="goods_item {{item.param_sku.length >= 4?'align_items_center':''}}" bindtap="particulars" data-id="{{item.id}}">
<view class="goods_item_left">
<image src="{{item.image}}" mode="aspectFill"></image>
<view class="goods_item_left_view"><text class="store_name">{{item.store_name}}</text></view>
</view>
<view class="goods_item_right">
<block wx:for="{{item.param_sku}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs">
<view class="sku_item">
<view class="name_price">
<view class="name">{{items.sku}}</view>
<view class="price">
<text>￥</text>
<text>{{items.price}}</text>
</view>
</view>
<view class="size">{{items.size}}</view>
</view>
</block>
</view>
</view>
</block>
</view>
</block>
<block wx:else>
<view class="layout3">
<block wx:for="{{data}}" wx:key="index">
<view class="goods-item" bindtap="particulars" data-id="{{item.id}}">
<view class="goods-item-image">
<image src="{{item.image}}" mode="aspectFill"></image>
<view class="goods-item-image-view" style="width: 100%;"><text class="store_name">{{item.store_name}}</text></view>
</view>
<view wx:if="{{item.param_sku}}" class="goods-item-sku">
<block wx:for="{{item.param_sku}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs">
<view class="sku-item">
<view class="name_price">
<view class="name">{{items.sku}}</view>
<view class="price">
<text>￥</text>
<text>{{items.price}}</text>
</view>
</view>
<view class="size">{{items.size}}</view>
</view>
</block>
</view>
</view>
</block>
</view>
</block>
<block wx:if="{{showloading==2}}">
<view wx:if="{{isloading}}" class="show__loading">
<image src="../../images/loading.gif"></image>
<text>努力加载中</text>
</view>
<view wx:else class="show__loading">没有更多了，老板</view>
</block>goodsLayout.wxss
/* public */
.layout1,
.layout2,
.layout3 {
width: 100%;
height: auto;
box-sizing: border-box;
padding: 0 20rpx;
padding-top: 20rpx;
background-color: #f5f5f5;
}
/* 第1种布局 */
.layout1 {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.goods {
width: 48.5%;
height: auto;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.goods:nth-child(2n) {
margin-right: 0;
}
.goods_item_img {
width: 100%;
height: 344rpx;
background: #F0F1F3;
border-radius: 15rpx 15rpx 0rpx 0rpx;
overflow: hidden;
position: relative;
}
.goods_item_img image {
width: 100%;
height: 100%;
position: relative;
}
.goods_item_img_view {
width: 100%;
}
.goods_item_sku {
margin-top: 10rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
height: auto;
border-left: 1rpx solid #E5E5E5;
}
.border-top,
.item-border-top .goods_sku_item {
border-top: 1rpx solid #E5E5E5;
}
.goods_sku_item {
width: calc(50% - 1rpx);
height: 39rpx;
line-height: 39rpx;
background: #FFFFFF;
border-right: 1rpx solid #E5E5E5;
border-bottom: 1rpx solid #E5E5E5;
display: flex;
align-items: center;
}
.goods_sku_item .item_name,
.goods_sku_item .item_price {
width: 50%;
height: 100%;
text-align: center;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
font-size: 20rpx;
font-family: PingFang;
font-weight: 500;
}
.goods_sku_item .item_price {
color: #DF3629;
}
/* public */
.goods_item_img_view,
.goods_item_left_view,
.goods-item-image-view {
width: 100%;
height: 50rpx;
line-height: 50rpx;
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
box-sizing: border-box;
padding: 0rpx 28rpx;
}
.store_name {
width: 100%;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
display: inline-block;
color: #fff;
font-size: 26rpx;
font-family: PingFang;
font-weight: 800;
}
/* 第2种布局 */
.goods_item {
width: 100%;
height: auto;
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
margin-bottom: 20rpx;
display: flex;
flex-direction: row;
}
.align_items_center {
align-items: center;
}
.goods_item_left {
position: relative;
width: 366rpx;
height: 360rpx;
margin-left: 20rpx;
}
.goods_item_left image {
position: relative;
width: 100%;
height: 100%;
}
.goods_item_right {
width: 326rpx;
height: auto;
padding: 10rpx 23rpx 10rpx 30rpx;
}
.sku_item {
border-bottom: 1rpx solid #E5E5E5;
padding: 10rpx 0rpx;
}
/* public */
.sku_item .name_price,
.sku-item .name_price {
display: flex;
align-items: center;
justify-content: space-between;
}
.name_price .name {
padding: 2rpx 20rpx;
height: 32rpx;
line-height: 31rpx;
background: #F0F0F0;
border-radius: 3rpx;
font-size: 20rpx;
font-family: PingFang;
font-weight: 800;
color: #1E1E1E;
white-space: nowrap;
overflow: hidden;
}
.name_price .price {
font-size: 24rpx;
font-family: PingFang;
font-weight: 500;
color: #DF3629;
}
.sku_item .size,
.sku-item .size {
font-size: 19rpx;
font-family: PingFang;
font-weight: 500;
color: #1E1E1E;
text-align: left;
margin-top: 5rpx;
}
/* 第3种布局 */
.goods-item {
width: 100%;
height: auto;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.goods-item-image {
width: 100%;
height: 709rpx;
border-radius: 10rpx 10rpx 0rpx 0rpx;
overflow: hidden;
position: relative;
}
.goods-item-image image{
width: 100%;
height: 100%;
}
.goods-item-sku {
width: 100%;
height: auto;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 0rpx 0rpx 10rpx 10rpx;
overflow: hidden;
padding: 26rpx 30rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.sku-item {
width: 45%;
margin-right: 10%;
border-bottom: 1rpx solid #E5E5E5;
padding: 10rpx 0rpx;
}
.sku-item:nth-child(2n) {
margin-right: 0%;
}
.show__loading {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
/* constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容 (底部小黑条) */
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
font-size: 28rpx;
}
.show__loading image{
margin-right: 10rpx;
width: 35rpx;
height: 35rpx;
}goodsLayout.js
Component({
/**
* 组件的属性列表
*/
properties: {
data: {
type: Array,
value: []
},
layoutType: {
type: Number,
value: 1
},
showloading: {
type: Number,
value: 1
},
isloading: {
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
},
created() {
},
/**
* 组件的方法列表
*/
methods: {
// 跳转到商品详情页
particulars(e) {
// let id = e.currentTarget.dataset.id;
// wx.navigateTo({
// url: '/pages/goodsDetail/index?id=' + id,
// })
},
}
})
goodsLayout.json 保持不动
2.在pages页面里调用封装好的全局组件
比如 pages/index/index.json
{
"usingComponents": {
"goodslayout": "/components/goodsLayout/goodsLayout"
},
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "商品列表",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}pages/index/index.wxml
<view class="header__fixed">
<view class="search_row">
<view class="search">
<text class="iconfont icon-sousuo"></text>
<input class="search_input" type="text" bindinput="bindKeyInput" value='{{inputValue}}' placeholder="请输入搜索内容" />
<text wx:if="{{inputValue!=''}}" class="iconfont icon-cuowu2" style="margin-right: 20rpx;" catchtap="clearClick"></text>
<view style="background-color: red;color: #fff;border-radius: 30rpx;padding: 4rpx 20rpx;text-align: center;font-size: 28rpx;" catchtap="searchClick">搜索</view>
</view>
<view class="operate" catchtap="operateClick">
<text wx:if="{{layout_type == 1}}" class="iconfont icon-leimupinleifenleileibie"></text>
<text wx:elif="{{layout_type == 2}}" class="iconfont icon-liebiao"></text>
<text wx:else class="iconfont icon-zhengfangxing" style="font-size: 52rpx; font-weight: bold;"></text>
</view>
</view>
<view class="filtrate_row" style="border-bottom: {{findex>=0?'1rpx solid #ccc':'none'}};">
<block wx:for="{{filtratelist}}" wx:key="index">
<view data-index="{{index}}" bindtap="filtrateClick">
{{item.title}} <text class="iconfont {{findex==index?'icon-weibiaoti33':'icon-xia'}}"></text>
</view>
</block>
</view>
</view>
<!-- 这个样式是 品类多选 弹出层占满屏幕，任君选择 -->
<!--
<view wx:if="{{findex>=0}}" class="filtrate__fixed" catchtouchmove='catchTouchMove' style="padding-top:{{findex==2?'10rpx':'0rpx'}};height:{{findex==2?'100%':'auto'}};">
<scroll-view scroll-y="true" style="height:{{findex==2?'calc(87% - 110rpx)':'auto'}};overflow: hidden;width: 100%;">
-->
<!-- 这个样式是 品类多选 弹出层不占满屏幕！！！！！！！！！！-->
<view wx:if="{{findex>=0}}" class="filtrate__fixed" catchtouchmove='catchTouchMove' style="padding-top:{{findex==2?'10rpx':'0rpx'}};">
<scroll-view scroll-y="true" style="height:{{findex==2?'800rpx':'auto'}};overflow: hidden;width: 100%;">
<block wx:for="{{filtratelist[findex].Childlist}}" wx:key="index">
<block wx:if="{{findex==2}}">
<view class="filtrate__title">{{item.title}}</view>
<view class="filtrate__Childlist">
<block wx:for="{{item.Childlist}}" wx:for-item="citem" wx:for-index="cindex" wx:key="cindex">
<view class="{{citem.checked?'checkedColor':''}}" data-index="{{index}}" data-cindex="{{cindex}}" bindtap="fChildClick">{{citem.title}}</view>
</block>
</view>
</block>
<block wx:else>
<view class="filtrate__item" data-index="{{index}}" bindtap="fitemClick">
<text>{{item.title}}</text>
<text class="iconfont {{item.checked?'icon-dui3':''}}"></text>
</view>
</block>
</block>
</scroll-view>
<view wx:if="{{findex==2}}" class="filtrate__button">
<view bindtap="resetClick">重置</view>
<view bindtap="submitClick">确认</view>
</view>
</view>
<view wx:if="{{findex>=0}}" class='mask' catchtouchmove='catchTouchMove' bindtap='close'></view>
<view wx:if="{{goodslist.length > 0}}" style="margin-top: 165rpx;">
<goodslayout data="{{goodslist}}" layoutType="{{layout_type}}" showloading="{{showloading}}" isloading="{{loading}}"></goodslayout>
</view>
<view class="blank" wx:if="{{isEmpty}}">
<image src="../../images/cat_none.jpg"></image>
<view class="title">没有相关的商品</view>
</view>pages/index/index.wxss
page {
background-color: #f5f5f5;
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
box-sizing: border-box;
}
.header__fixed,
.filtrate__fixed {
width: 100%;
height: auto;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
font-size: 28rpx;
background-color: #fff;
}
/* 搜索框 */
.search_row {
width: 100%;
box-sizing: border-box;
padding: 20rpx;
display: flex;
align-items: center;
}
.search {
flex: 8;
height: 60rpx;
position: relative;
display: flex;
align-items: center;
/* vertical-align: middle; */
background-color: #f5f5f5;
border-radius: 30rpx;
padding-left: 30rpx;
padding-right: 8rpx;
}
.search text {
font-size: 32rpx;
}
.search .search_input {
flex: 1;
padding-left: 10rpx;
font-size: 28rpx;
}
.operate {
margin-left: 20rpx;
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
}
.operate .iconfont {
font-size: 60rpx;
color: #333;
}
/* 筛选条件 */
.filtrate_row {
display: flex;
justify-content: space-around;
padding-bottom: 20rpx;
}
.filtrate_row view {
display: flex;
align-items: center;
}
.filtrate_row text {
position: relative;
top: 2rpx;
margin-left: 5rpx;
}
/* 弹出的筛选条件 */
.filtrate__fixed {
padding: 0rpx 30rpx;
top: 157rpx;
/* background-color: transparent; */
}
.filtrate__title {
width: 100%;
height: 60rpx;
line-height: 60rpx;
}
.filtrate__Childlist {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.filtrate__Childlist view {
padding: 8rpx 20rpx;
background-color: #F5F5F5;
border-radius: 30rpx;
margin-left: 20rpx;
margin-bottom: 15rpx;
}
.filtrate__item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 80rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #ccc;
}
.filtrate__item:last-child {
border-bottom: none;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
.filtrate__button {
width: 100%;
height: 110rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-around;
/* margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom); */
}
.filtrate__button view{
width: 45%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background-color: #F5F5F5;
border-radius: 35rpx;
}
.checkedColor,
.filtrate__button view:last-child {
background: -webkit-linear-gradient(left, #f97d15, #f85617);
color: #fff;
}
/* 弹出层蒙版 */
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 98;
}
/* 空白页 */
.blank {
margin-top: 154rpx;
width: 100%;
height: calc(100vh - 154rpx);
box-sizing: border-box;
background-color: #fff;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
text-align: center;
}
.blank image {
margin-top: -154rpx;
width: 600rpx;
height: 400rpx;
margin-bottom: 20rpx;
}
/* 引用阿里云图标库 */
/* 涉及到公司项目内容 这里保密！！！！！！！！！！！！*/
pages/index/index.js
//import { getGoodsData, getCategories } from '../../api/api.js';
Page({
/**
* 页面的初始数据
*/
data: {
layout_type: 1,
findex:-1,
showloading:1,
loading: true,
inputValue: '',
style_id: '',
space_id: '',
cate_ids: [],
sort_id: '',
page: 1,
pageSize: 20,
isEmpty: false,
filtratelist:[{
title:'风格',
Childlist:[
{title:'全部风格',checked:true,id:0},
{title:'风格风格1',checked:false,id:1},
{title:'风格风格2',checked:false,id:2},
{title:'风格风格3',checked:false,id:3},
{title:'风格风格4',checked:false,id:4},
{title:'风格风格5',checked:false,id:5}
]
},
{
title:'空间',
Childlist:[
{title:'全部空间',checked:true,id:0},
{title:'空间空间1',checked:false,id:1},
{title:'空间空间2',checked:false,id:2},
{title:'空间空间3',checked:false,id:3},
{title:'空间空间4',checked:false,id:4},
{title:'空间空间5',checked:false,id:5}
]
},
{
title:'品类多选',
Childlist:[
{title:'一级品类1',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2},{title:'二级品类3',checked:false,id:3}]},
{title:'一级品类2',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2},{title:'二级3',checked:false,id:3},{title:'二级4',checked:false,id:4},{title:'二级5',checked:false,id:5},{title:'二级品类6',checked:false,id:6}]},
{title:'一级品类3',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2}]},
{title:'一级品类4',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2}]},
{title:'一级品类5',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2}]},
// 为了看效果 故复制多了一份
{title:'一级品类1',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2},{title:'二级品类3',checked:false,id:3}]},
{title:'一级品类2',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2},{title:'二级3',checked:false,id:3},{title:'二级4',checked:false,id:4},{title:'二级5',checked:false,id:5},{title:'二级品类6',checked:false,id:6}]},
{title:'一级品类3',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2}]},
{title:'一级品类4',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2}]},
{title:'一级品类5',Childlist:[{title:'二级品类1',checked:false,id:1},{title:'二级品类2',checked:false,id:2}]}
]
},
{
title:'排序',
Childlist:[
{title:'综合排序',checked:true,id:0},
{title:'排序排序1',checked:false,id:1},
{title:'排序排序2',checked:false,id:2},
{title:'排序排序3',checked:false,id:3},
{title:'排序排序4',checked:false,id:4},
{title:'排序排序5',checked:false,id:5}
]
},
],
goodslist: [
{
id:1,
image: "/images/demo1.jpg",
store_name: "现代极简休闲椅#AC46 德国进口抗污布 环保耐磨PU皮 高回弹海绵座包 格调碳素钢",
param_sku: [
{sku: "1人位", size: "1050*1020*900", price: "1380", bar_code: "", num: "1", weight: "", volume: "0.8"},
{sku: "2人位", size: "1650*1020*900", price: "1880", bar_code: "", num: "1", weight: "", volume: "1.2"},
{sku: "3人位", size: "2160*1020*900", price: "2380", bar_code: "", num: "1", weight: "", volume: "1.6"},
{sku: "4人位", size: "2820*1020*900", price: "2880", bar_code: "", num: "2", weight: "", volume: "2.5"},
{sku: "1+2+3", size: "", price: "5640", bar_code: "", num: "3", weight: "", volume: ""}
]
},
{
id:1,
image: "/images/demo1.jpg",
store_name: "现代极简休闲椅#AC46 德国进口抗污布 环保耐磨PU皮 高回弹海绵座包 格调碳素钢",
param_sku: [
{sku: "1人位", size: "1050*1020*900", price: "1380", bar_code: "", num: "1", weight: "", volume: "0.8"},
{sku: "2人位", size: "1650*1020*900", price: "1880", bar_code: "", num: "1", weight: "", volume: "1.2"},
{sku: "3人位", size: "2160*1020*900", price: "2380", bar_code: "", num: "1", weight: "", volume: "1.6"}
]
},
{
id:1,
image: "/images/demo1.jpg",
store_name: "现代极简休闲椅#AC46 德国进口抗污布 环保耐磨PU皮 高回弹海绵座包 格调碳素钢",
param_sku: [
{sku: "1人位", size: "1050*1020*900", price: "1380", bar_code: "", num: "1", weight: "", volume: "0.8"},
{sku: "2人位", size: "1650*1020*900", price: "1880", bar_code: "", num: "1", weight: "", volume: "1.2"},
{sku: "3人位", size: "2160*1020*900", price: "2380", bar_code: "", num: "1", weight: "", volume: "1.6"},
{sku: "4人位", size: "2820*1020*900", price: "2880", bar_code: "", num: "2", weight: "", volume: "2.5"},
{sku: "1+2+3", size: "", price: "5640", bar_code: "", num: "3", weight: "", volume: ""}
]
},
//复制一份
{
id:1,
image: "/images/demo1.jpg",
store_name: "现代极简休闲椅#AC46 德国进口抗污布 环保耐磨PU皮 高回弹海绵座包 格调碳素钢",
param_sku: [
{sku: "1人位", size: "1050*1020*900", price: "1380", bar_code: "", num: "1", weight: "", volume: "0.8"},
{sku: "2人位", size: "1650*1020*900", price: "1880", bar_code: "", num: "1", weight: "", volume: "1.2"},
{sku: "3人位", size: "2160*1020*900", price: "2380", bar_code: "", num: "1", weight: "", volume: "1.6"},
{sku: "4人位", size: "2820*1020*900", price: "2880", bar_code: "", num: "2", weight: "", volume: "2.5"},
{sku: "1+2+3", size: "", price: "5640", bar_code: "", num: "3", weight: "", volume: ""}
]
},
{
id:1,
image: "/images/demo1.jpg",
store_name: "现代极简休闲椅#AC46 德国进口抗污布 环保耐磨PU皮 高回弹海绵座包 格调碳素钢",
param_sku: [
{sku: "1人位", size: "1050*1020*900", price: "1380", bar_code: "", num: "1", weight: "", volume: "0.8"},
{sku: "2人位", size: "1650*1020*900", price: "1880", bar_code: "", num: "1", weight: "", volume: "1.2"},
{sku: "3人位", size: "2160*1020*900", price: "2380", bar_code: "", num: "1", weight: "", volume: "1.6"}
]
},
{
id:1,
image: "/images/demo1.jpg",
store_name: "现代极简休闲椅#AC46 德国进口抗污布 环保耐磨PU皮 高回弹海绵座包 格调碳素钢",
param_sku: [
{sku: "1人位", size: "1050*1020*900", price: "1380", bar_code: "", num: "1", weight: "", volume: "0.8"},
{sku: "2人位", size: "1650*1020*900", price: "1880", bar_code: "", num: "1", weight: "", volume: "1.2"},
{sku: "3人位", size: "2160*1020*900", price: "2380", bar_code: "", num: "1", weight: "", volume: "1.6"},
{sku: "4人位", size: "2820*1020*900", price: "2880", bar_code: "", num: "2", weight: "", volume: "2.5"},
{sku: "1+2+3", size: "", price: "5640", bar_code: "", num: "3", weight: "", volume: ""}
]
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//请求筛选条件数据
// getCategories().then(res => {
// if (res.status == 200) {
// this.setData({
// filtratelist: res.data
// })
// }
// })
this.getGoodsList(true,1)
},
// 请求商品列表数据 (需要多次调用，故封装为一个公用的函数)
getGoodsList(isShowLoading,type) {
this.setData({
showloading: type //type为1 不显示底部的 (☀ 努力加载中) type为2才显示
})
if(isShowLoading){
wx.showLoading({title:'加载中',mask:true})
}
let data = {
style_id: this.data.style_id,
space_id: this.data.space_id,
sort_id: this.data.sort_id,
cate_ids: this.data.cate_ids,
page: this.data.page,
pageSize: this.data.pageSize,
keywords: this.data.inputValue,
}
setTimeout(function () {
wx.hideLoading()
}, 300)
// getGoodsData(data).then(res => {
// if (res.status == 200) {
// wx.hideLoading();
// if (res.data.length != 0) {
// if(type == 1) {
// this.setData({
// goodslist: res.data
// })
// } else {
// this.setData({
// goodslist: [...this.data.goodslist, ...res.data],
// loading: res.data.length < this.data.pageSize?false:true,
// })
// }
// } else {
// if(type == 1){
// this.setData({
// goodslist:[],
// })
// }
// this.setData({
// loading: false,
// isEmpty: this.data.goodslist.length > 0 ? false : true
// })
// }
// }
// })
},
// 搜索框 键盘输入时触发
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value
})
},
//清空搜索框内容
clearClick() {
this.setData({
inputValue: ''
})
},
//搜索按钮点击事件
searchClick() {
this.setData({
page: 1,
//goodslist: [], //在这里不要直接清空数据，不然会出现页面闪白的情况！
loading: true,
isEmpty: false
})
this.getGoodsList(true,1)
},
//点击切换商品布局 （共有三种布局）
operateClick() {
let type = this.data.layout_type;
if(type == 1){
this.setData({
layout_type: 2,
findex: -1
})
}else if(type == 2){
this.setData({
layout_type: 3,
findex: -1
})
}else{
this.setData({
layout_type: 1,
findex: -1
})
}
this.setData({
page: 1,
//goodslist: [], //在这里不要直接清空数据，不然会出现页面闪白的情况！
loading: true,
isEmpty: false
})
//重新请求数据渲染视图
this.getGoodsList(true,1);
//置顶
wx.pageScrollTo({
scrollTop: 0
})
//记录用户操作
// let index = this.data.layout_type
// wx.setStorageSync('layoutType', parseInt(index))
},
//点击头部筛选
filtrateClick(e) {
let index = e.currentTarget.dataset.index;
if(this.data.findex == index) {
//相同
this.setData({
findex: -1
})
} else {
//不同
this.setData({
findex: index
})
}
},
//点击筛选列表
fitemClick(e) {
let findex = this.data.findex;
let index = e.currentTarget.dataset.index;
let list = this.data.filtratelist;
list[findex].title = this.data.filtratelist[findex].Childlist[index].title;
list[findex].Childlist.forEach(v=>{
v.checked = false
});
list[findex].Childlist[index].checked = true;
let ids = list[findex].Childlist[index].id;
switch(findex){
case 0:
this.setData({
style_id: ids,
})
break;
case 1:
this.setData({
space_id: ids,
})
break;
default:
this.setData({
sort_id: ids,
})
}
this.setData({
filtratelist: list,
findex: -1,
page: 1,
//goodslist: [], //在这里不要直接清空数据，不然会出现页面闪白的情况！
loading: true,
isEmpty: false,
})
//重新请求数据渲染视图
this.getGoodsList(true,1)
//置顶
wx.pageScrollTo({
scrollTop: 0
})
},
//点击品类多选
fChildClick(e) {
let findex = this.data.findex;
let index = e.currentTarget.dataset.index;
let cindex = e.currentTarget.dataset.cindex;
let list = this.data.filtratelist;
let booleans = list[findex].Childlist[index].Childlist[cindex].checked;
list[findex].Childlist[index].Childlist[cindex].checked = !booleans;
this.setData({
filtratelist: list
})
},
//点击品类多选 --重置
resetClick() {
let findex = this.data.findex;
let list = this.data.filtratelist;
list[findex].Childlist.forEach(v1=>{
v1.Childlist.forEach(v2=>{
v2.checked = false
})
})
this.setData({
filtratelist: list,
cate_ids:[]
})
},
//点击品类多选 --确认
submitClick() {
let findex = this.data.findex;
let list = this.data.filtratelist;
let ids = [];
list[findex].Childlist.forEach((v1,index1)=>{
v1.Childlist.forEach((v2,index2)=>{
if(v2.checked) {
ids.push({
//id:v1.id,
name:v1.title,
idlist: v2
})
}
})
})
//console.log(ids)
//根据某个相同的字段分组
if(ids.length > 0) {
var map = {},
dest = [];
for (var i = 0; i < ids.length; i++) {
//先保存一个item 对象
var ai = ids[i];
//取其中一个字段判断是否相同
if (!map[ai.name]) {
//如果不相同,往数组里面新插入一条数据
dest.push({
name: ai.name,
data: [ai.idlist.id]
});
map[ai.name] = ai; //赋值进入下一轮循环判断
} else {
//否则相同,就往相同的数组里面的 data 插入一条数据
for (var j = 0; j < dest.length; j++) {
var dj = dest[j];
if (dj.name == ai.name) {
dj.data.push(ai.idlist.id);
break;
}
}
}
}
this.setData({
cate_ids: dest,
findex: -1,
page: 1,
//goodslist: [], //在这里不要直接清空数据，不然会出现页面闪白的情况！
loading: true,
isEmpty: false,
})
//重新请求数据渲染视图
this.getGoodsList(true,1)
//置顶
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showToast({
title: '请选择品类',
icon: 'none',
duration: 3000
})
}
},
//关闭蒙版
close() {
this.setData({
findex: -1
})
},
//禁止滑动
catchTouchMove() {
return false;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.loading) {
let page = this.data.page + 1;
this.setData({
page: page
})
// type为2 上拉触底的时候 才显示底部的 (☀ 努力加载中)
this.getGoodsList(false,2)
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})总结：
每个人写代码的思路都是不一样的，有的地方可能不是那么完美，还有很多优化的地方。根据需求改吧！
版权声明：本文为m0_61073617原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。