微信小程序之多规格选择

一、多规格实现代码

1、index.wxss

.view1 {margin-left: 2%;margin-right: 2%;
}
.viewkey {margin-top: 20rpx;margin-bottom: 20rpx;
}
.view2 {display: flex;flex-direction: row;flex-wrap: wrap;margin-right: 4%;margin-left: 4%;
}
.view2 view {border: 1rpx solid #d3d3d3;margin-right: 30rpx;padding-right: 20rpx;padding-left: 20rpx;border-radius: 10rpx;
}

2、 index.wxml

<view class="view1"><block wx:for="{{sizes}}" wx:key="index" wx:for-index="index1"><view class="viewkey">{{item.key}}</view><view class="view2"><block wx:for="{{item.sizeList}}" wx:for-item="items"><view style="color: {{items.state?(items.disState?'#000':'white'):items.disState?'#000':'#000'}};background-color: {{items.state?(items.disState?'#D3D3D3':'red'):items.disState?'#D3D3D3':'white'}}; pointer-events: {{items.disState?'none':''}};" bindtap="selectValue" data-value="{{items.value}}" data-key="{{item.key}}" data-index1="{{index1}}" data-selectvale="{{item.selectValue}}" data-index="{{index}}">{{items.value}}</view></block></view></block>
</view>

3、index.js

// index.js
Page({data: {// 该商品所有规格组合列表sizeList:[{price:35,stock:8,priceId:1,sizeList:[{key:"重量",value:"五斤"},{key:"尺寸",value:"大号"},{key:"数量",value:"十个"},{key:"颜色",value:"白色"}]},{price:35,stock:8,priceId:2,sizeList:[{key:"重量",value:"五斤"},{key:"尺寸",value:"大号"},{key:"数量",value:"三十个"},{key:"颜色",value:"白色"}]},{price:35,stock:8,priceId:3,sizeList:[{key:"重量",value:"十五斤"},{key:"尺寸",value:"大号"},{key:"数量",value:"三十个"},{key:"颜色",value:"白色"}]},{price:70,stock:8,priceId:4,sizeList:[{key:"重量",value:"五斤"},{key:"尺寸",value:"特大号"},{key:"数量",value:"五十个"},{key:"颜色",value:"白色"}]},{price:75,stock:8,priceId:5,sizeList:[{key:"重量",value:"十斤"},{key:"尺寸",value:"大号"},{key:"数量",value:"五十个"},{key:"颜色",value:"土黄色"}]},{price:35,stock:8,priceId:6,sizeList:[{key:"重量",value:"十斤"},{key:"尺寸",value:"特大号"},{key:"数量",value:"十个"},{key:"颜色",value:"白色"}]},{price:35,stock:8,priceId:7,sizeList:[{key:"重量",value:"十五斤"},{key:"尺寸",value:"大号"},{key:"数量",value:"五十个"},{key:"颜色",value:"土黄色"}]},{price:35,stock:8,priceId:8,sizeList:[{key:"重量",value:"十斤"},{key:"尺寸",value:"大号"},{key:"数量",value:"五十个"},{key:"颜色",value:"土黄色"}]}],// 商品所有规格列表sizes:[],// 筛选后规格组合列表newsize:[],},// 初始化数据 -----> 规格列表(sizes)getSize:function(){let sizeList=this.data.sizeListlet sizes=this.data.sizesfor(let i=0;i<sizeList.length;i++){for(let j=0;j<sizeList[i].sizeList.length;j++){let num=this.isKey(sizes,sizeList[i].sizeList[j].key);if(num==-1){let item={}item.key=sizeList[i].sizeList[j].keyitem.selectValue=""let items={}items.value=sizeList[i].sizeList[j].valueitems.state=falseitems.disState=falselet sizeList1=[]sizeList1.push(items)item.sizeList=sizeList1sizes.push(item)}else{let num1=this.isValue(sizes[num].sizeList,sizeList[i].sizeList[j].value);if(num1==1){let item1={}item1.value=sizeList[i].sizeList[j].valueitem1.state=falseitem1.disState=falsesizes[num].sizeList.push(item1)}}}}this.setData({sizes:sizes,newsize:this.data.sizeList})},// 判断规格名(是否存在) -----> keyisKey:function(sizes,key){if(sizes.length==0){return -1;}else{for(let i=0;i<sizes.length;i++){if(sizes[i].key==key){return i}}}return -1;},// 判断规格名值(是否存在) -----> valueisValue:function(sizes,values){for(let i=0;i<sizes.length;i++){if(sizes[i].value==values){return -1;}}return 1;},// 点击事件selectValue:function(e){let index1=e.currentTarget.dataset.index1let value=e.currentTarget.dataset.valuelet key=e.currentTarget.dataset.keylet selectvale=e.currentTarget.dataset.selectvalelet index=e.currentTarget.dataset.indexlet sizes=this.data.sizes// 判断是否点击同一个按钮if(selectvale == value && sizes[index1].key == key){// 取消按钮this.disSelect(sizes,value,key,index1,index)}else{// 点击按钮this.selectClick(sizes,value,key,index1)}},// 获取已选择数量getNum:function(sizes){let count=0;sizes.forEach(element => {if(element.selectValue != "" && element.selectValue.length > 0){count++;}});return count;},// 点击按钮selectClick:function(sizes,value,key,index1,unselect){var count=this.getNum(sizes)// 选择同行按钮---->(选中按钮数为1时，更改选中按钮为其他同行按钮) if(count == 1 && sizes[index1].key == key && sizes[index1].selectValue != value){for(let i = 0;i < sizes[index1].sizeList.length; i++){if(sizes[index1].sizeList[i].value == sizes[index1].selectValue){sizes[index1].sizeList[i].state = falsecount = 0sizes[index1].selectValue = ""break}}}let newsize=[]let sizelist=[]// 判断是否第一次选择if(count < 1){sizelist=this.data.sizeList}else{sizelist=this.data.newsize}// console.log(sizelist)// 筛选符合条件的规格组合for(let i = 0;i < sizelist.length; i++){for(let j = 0;j < sizelist[i].sizeList.length; j++){if(sizelist[i].sizeList[j].key == key && sizelist[i].sizeList[j].value == value){newsize.push(sizelist[i])}}}// 全部按钮置为不可选 ----->disState表示是否可选(false表示可选)for(let i = 0;i < sizes.length; i++){for(let j = 0;j < sizes[i].sizeList.length; j++){sizes[i].sizeList[j].disState=true}}// 将符合条件的按钮置为可选for(let i = 0;i < sizes.length; i++){for(let j = 0;j < newsize.length; j++){for(let k = 0;k < newsize[j].sizeList.length; k++){if(newsize[j].sizeList[k].key == sizes[i].key){for(let h = 0;h < sizes[i].sizeList.length; h++){if(newsize[j].sizeList[k].value == sizes[i].sizeList[h].value){sizes[i].sizeList[h].disState = false}// 保证一个按钮时同一行都可选if((count < 2 && unselect == true && index1 == i) || (count < 1 && index1 == i)){sizes[i].sizeList[h].disState = false}}}}}}// 改变选中按钮颜色,state表示选中状态(true 表示选中)for(let i = 0;i < sizes.length; i++){if(sizes[i].key == key){for(let j = 0;j < sizes[i].sizeList.length; j++){if(sizes[i].sizeList[j].value == value){sizes[i].sizeList[j].state = truesizes[i].selectValue = value}}}}this.setData({sizes:sizes,newsize:newsize})},// 取消按钮disSelect:function(sizes,value,key,index1,index){// 取消按钮sizes[index1].selectValue = ""// 初始化数据----->当取消最后一个按钮时，所有的selectValue都是空字符串// 不会进入selectClick方法，需要初始化所有按钮的状态(state、disState)for(let i = 0;i < sizes.length; i++){for(let j = 0;j < sizes[i].sizeList.length; j++){sizes[i].sizeList[j].state = falsesizes[i].sizeList[j].disState = false}}// 更新修改的数据// 更改newsize数据，改为未筛选前this.setData({sizes:sizes,newsize:this.data.sizeList})// 重新筛选for(let i = 0;i < sizes.length; i++){if(sizes[i].selectValue != "" && sizes[i].selectValue.length > 0){this.selectClick(sizes,sizes[i].selectValue,sizes[i].key,i,true)}}},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},onShow() {this.getSize()},})

二、效果展示

三、总结

1、一个商品的规格组合以及规格都可以通过后端处理生成，也可以只处理规格组合，规格列表由前端处理生成。

2、本博客未考虑库存显示的场景，规格组合默认去除库存为零的情况。在选择完按钮后，可以通过newsize数组来获取价格和库存。

3、只实现了第一次选择时同行相互切换，多行还未实现(例如：选择15斤后，第二个按钮选择三十个，之后可切换三十个为十个)

微信小程序之多规格选择相关推荐

微信小程序如何在地图选择地址并返回经纬度
微信小程序如何在地图选择地址并返回经纬度微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息实现效果: var that = thiswx.chooseLocation({suc ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
php 仿美团切换城市,微信小程序仿美团城市选择的实现
这篇文章主要为大家详细介绍了微信小程序仿美团城市选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下代码很简单. var cit ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
微信小程序开发语言的选择
微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...
微信小程序仿美团城市选择城市切换
原来的城市选择做了一些修改. 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {sea ...
微信小程序根据字母索引选择(仿京东)
效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578/12314561 .wxml ...
微信小程序开发—有关日期选择的下拉框
WXLL代码实现 <picker class='time-picker' mode="multiSelector" bindchange="bindStartMul ...
微信小程序通过 vant 实现选择城市
效果图 1. 准备新建 utlis > city.js city.js 数据源配置导出 export default [{"letter": "A" ...

微信小程序之多规格选择

一、多规格实现代码

二、效果展示

三、总结

微信小程序之多规格选择相关推荐

最新文章

热门文章