微信小程序商品布局宫格、列表、大图模式切换

效果：

搜索框内容处理、商品布局切换、手风琴模式弹出层、上拉触底加载下一页等等...

业务逻辑已经写好，接通后端接口就可以了，这里使用模拟数据展示！

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 () {}
})

总结：

每个人写代码的思路都是不一样的，有的地方可能不是那么完美，还有很多优化的地方。根据需求改吧！

微信小程序商品布局宫格、列表、大图模式切换相关推荐

微信小程序开发实现宫格布局
微信小程序开发实现宫格布局问题背景客户端和小程序等日常开发和学习过程中,宫格布局是一种很场景的场景,可以清晰的展现分类等效果.本文将介绍微信小程序开发中如何实现宫格布局效果. 问题分析先上效果图 ...
html 小程序九宫格抽奖,微信小程序实现多宫格抽奖活动
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样, ...
微信小程序抽奖9宫格
抽奖9宫格示例库代码片段
7.微信小程序（布局适配与物理逻辑像素）
微信小程序(布局适配与物理逻辑像素) 前言移动端开发经常遇到一些概念:物理像素.逻辑像素.像素密度.像素比等,本节来详细介绍下关键词: 屏幕尺寸.物理像素/屏幕分辨率/物理分辨率.逻辑像素DIP. ...
image 微信小程序flex_微信小程序flex布局案例(1)
微信小程序 flex 布局案例一前言最近在学习微信小程序时,看到很多布局都用到了 flex 布局,其实 flex 布局学习过好多东西不用就忘记了,这次用上就只得再去看了,争取学会.下面是我做的简单 ...
微信小程序商品分享海报
canva实现微信小程序商品分享海报前言使用canvas画布实现小程序分享海报功能一.定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止 ...
微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
“喜茶Go”店商微信小程序界面布局的架构思路（源代码讲解）
作者介绍:郝天翔,10年移动互联网软件行业经验,全栈高级软件工程师,微信生态开发先行者,主要参与智慧城市新零售电商领域方案的设计与实施,本次分享商业案例"喜茶Go",已落地于全国多 ...
微信小程序开发之六 —— 数据绑定与列表渲染
文章目录学习前后数据分离数据类型组件属性数据绑定渲染对象类型数据列表渲染 wx:for wx:key 渲染一下电影列表学习前后上一篇:微信小程序开发之五 -- 体验WeUI 下一篇:微 ...

微信小程序商品布局宫格、列表、大图模式切换

微信小程序商品布局宫格、列表、大图模式切换相关推荐

最新文章

热门文章

微信小程序 商品布局 宫格、列表、大图模式切换

微信小程序 商品布局 宫格、列表、大图模式切换相关推荐

最新文章

热门文章

微信小程序商品布局宫格、列表、大图模式切换

微信小程序商品布局宫格、列表、大图模式切换相关推荐