刚进入公司的时候就有遇到过多规格的问题，当时就觉得很麻烦，就只是看了下，没有尝试，最近在写微信小程序的时候，又遇到了多规格问题，就自己尝试了下，在这里记录下

1.效果图

2.文件及部分思路

index.wxml文件

<view class="multipleStandard" bindtap="standardSelect"><view class="standard">规格:<text class="item">颜色</text>    <text class="item">颜色</text>    <text class="item">颜色</text>    </view><image src="/images/arrows.png" class="arrows"></image>
</view>
<view style="background:rgb(207, 224, 232); height: 300rpx;margin-top: 50rpx;"></view>
<view animation="{{animationData}}" class="selectStandard" catchtouchmove="noMove"><view class="tophead"><view class="topimg"><image src="{{goods.original_img}}"></image></view><view class="topright"><view class="selectClose"><view style="color:#ef5426;">{{standardObject.price}}</view><image src="/images/close.png" bindtap="handleClose"></image></view><view style="margin:10rpx 0;color:#999999;">库存:{{standardObject.store_count}}</view><view>规格: {{mergeStandard}}</view></view></view><view class="standard" wx:for="{{commodityStandard}}" wx:key="{{standardIndex}}" wx:for-index="standardIndex"><view class="standardTitle">{{item[0].spec_name}}</view><view class="standardItem"><block wx:for="{{item}}" wx:key="{{item.item_id}}"><view class="selectItem {{isSelect[item.isClick]}}" bindtap="handleStandardClick" data-standard-index="{{standardIndex}}" data-index="{{index}}" data-id="{{item.item_id}}">{{item.item}}</view>        </block></view><view style="height:1px; width:100%;background-color:#eeeeee;"></view></view><view class="selectCount"><view class="countname">数量</view><view class="countright"><i-input-number value="{{commodityNum}}" min="1" max="{{store_count}}" bindchange="handleCommodityNumber" /></view></view><view class="submitBtn" bindtap="submitSelected">确定</view>
</view>
<i-message id="message" />

index.wxss文件

.multipleStandard{display: flex;margin-top: 20rpx;padding: 15rpx 20rpx;justify-content: space-between;align-items: center;box-shadow: 0 0 10px #ccc;
}
.item{margin-right: 15rpx;
}
.arrows{width: 16rpx;height: 27rpx;
}/* 规格弹窗 */
.selectStandard {width: 100%;height: 1000rpx;background-color: #fff;position: fixed;z-index: 333;bottom: -600px;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;
}/* 头部选中的规格 */
.tophead {display: flex;margin: 30rpx 3%;width: 94%;align-items: center;text-align: center;
}.topimg {width: 200rpx;height: 200rpx;
}.topimg image {width: 100%;height: 100%;border-radius: 20rpx;background-color: red;
}.topright {margin-left: 30rpx;font-size: 28rpx;text-align: left;width: 66%;
}
/* 关闭按钮 */
.selectClose {display: flex;justify-content: space-between;align-items: center;
}.selectClose image {width: 30rpx;height: 30rpx;
}.standard {margin: 0 3%;width: 94%;font-size: 28rpx;
}.standardTitle {font-size: 30rpx;margin-top: 20rpx;
}
.standardItem {display: flex;flex-wrap: wrap;width: 100%;
}
.selectItem {border: solid 1px #666;margin: 20rpx;padding: 5rpx 23rpx;border-radius: 16rpx;
}
/* 规格选中时样式 */
.standardSelected{color: #fff;background: #f26740;background-color:#fe6732;border:solid 1px #fe6732;margin:20rpx;padding:5rpx 23rpx;border-radius:16rpx;
}
.standardNormal{color: #000;
}
.standardDisable{color: #eee;
}/* 选择的数量 */
.selectCount {margin: 30rpx 3%;width: 94%;font-size: 28rpx;
}
.countright {float: right;display: flex;text-align: center;align-items: center;
}.countname {margin-bottom: 20rpx;font-size: 30rpx;
}.submitBtn {position: absolute;bottom: 0;width: 70%;margin: 0 15% 20rpx 15%;text-align: center;z-index: 66;height: 80rpx;background-color: #fe6732;border-radius: 40rpx;color: white;font-size: 32rpx;line-height: 80rpx;
}

index.js文件

const {$Message
} = require('../../component/iview/base/index');
Page({data: {animationData: {},isSelect: ["standardNormal", "standardSelected", "standardDisable"],  /* 用于区别当前的规格是否选中 */goods: {goods_name: "男鞋",store_count: 158,cost_price: "10.00",original_img: "/images/commodity.jpg",     },commodityStandard: [[{spec_name: "颜色",item_id: 535385,item: "白色",src: "",isClick: 0},{spec_name: "颜色",item_id: 535386,item: "黑色",src: "",isClick: 0}],[{spec_name: "尺寸",item_id: 535692,item: "170",src: "",isClick: 0},{spec_name: "尺寸",item_id: 535693,item: "180",src: "",isClick: 0}],[{spec_name: "重量",item_id: 552569,item: "11",src: "",isClick: 0},{spec_name: "重量",item_id: 552570,item: "15",src: "",isClick: 0}]],standardInfo: [{id: 1018269,key: "535385_535692_552569",price: "10.00",productprice: "0.00",store_count: 20},{id: 1018270,key: "535385_535692_552570",price: "20.00",productprice: "0.00",store_count: 20},{id: 1018271,key: "535385_535693_552569",price: "30.00",productprice: "0.00",store_count: 20},{id: 1018272,key: "535385_535693_552570",price: "40.00",productprice: "0.00",store_count: 20},{id: 1018273,key: "535386_535692_552569",price: "50.00",productprice: "0.00",store_count: 20},{id: 1018274,key: "535386_535692_552570",price: "60.00",productprice: "0.00",store_count: 20},{id: 1018275,key: "535386_535693_552569",price: "70.00",productprice: "0.00",store_count: 20},{id: 1018276,key: "535386_535693_552570",price: "80.00",productprice: "0.00",store_count: 18}],selectedId: [],selectedStandard: [],standardObject: {},commodityNum: 1,},onLoad: function (options) {let goods = this.data.goods;let standardObject = this.data.standardObject;standardObject.price = goods.cost_price;standardObject.store_count = goods.store_count;let store_count = goods.store_count;this.setData({standardObject,store_count})},/* 规格选择 */standardSelect() {var that = thisvar animal1 = wx.createAnimation({timingFunction: 'ease-in'}).translate(0, -600).step({duration: 300})that.setData({animationData: animal1.export(),})},/* 关闭规格选择 */handleClose() {var that = thisvar animal1 = wx.createAnimation({timingFunction: 'ease-in'}).translate(0, 600).step({duration: 300})that.setData({animationData: animal1.export()})},/* 每个规格的点击事件 */handleStandardClick(e) {let id = e.currentTarget.dataset.id;// 总规格名称索引let standardIndex = e.currentTarget.dataset.standardIndex;// 单个规格名称索引let index = e.currentTarget.dataset.index;let commodityStandard = this.data.commodityStandard;let standardLength = commodityStandard[standardIndex].length;// 用于存储规格的idlet selectedId = this.data.selectedId;// 用总规格名称索引来存储每个选中的规格idselectedId[standardIndex] = id;let selectedStandard = this.data.selectedStandard;// 在点击的时候，只需要对点击的这个规格所在的数组进行循环for (let i = 0; i < standardLength; i++) {// 找到对应的单个规格索引，并设置isClick及单个规格名称if (index == i) {commodityStandard[standardIndex][index].isClick = 1;selectedStandard[standardIndex] = commodityStandard[standardIndex][index].item;} else {commodityStandard[standardIndex][i].isClick = 0;}}// 将id用_连接起来let mergeId = selectedId.join('_');console.log(mergeId);let mergeStandard = selectedStandard.join('  ');console.log(mergeStandard);let standardInfo = this.data.standardInfo;let standardInfoLength = standardInfo.length;// 用于存储选中的规格let standardObject = {};for (let i = 0; i < standardInfoLength; i++) {if (standardInfo[i].key == mergeId) {standardObject = standardInfo[i];break;} else {standardObject = this.data.standardObject;}}this.setData({currentId: id,commodityStandard,selectedId,standardObject,mergeStandard,selectedStandard,})},/* 选择数量 */handleCommodityNumber(e) {let commodityNum = e.detail.value;if (commodityNum >= this.data.store_count) {commodityNum = this.data.store_count;}this.setData({commodityNum})},/* 保存选择的规格 */submitSelected() {let selectedStandard = this.data.selectedStandard;let length = selectedStandard.length;console.log(length)if (length == 0) {$Message({content: '请选择规格',type: 'error'});return false;}for (let i = 0; i < length; i++) {if (length < this.data.commodityStandard.length) {$Message({content: '请选择规格',type: 'error'});break;}if (selectedStandard[i] == undefined) {$Message({content: '请选择规格',type: 'error'});break;}}$Message({content: '选择成功',type: 'success'});},
})

我这里提示信息使用了插件iview，可以在官网直接下载后使用

iview weapp

3.部分思路及改进方法

开始想到的是将需合并的id的位置写死，比如，第一个位置就传第一个规格里选中的规格id，第二个位置就传第二个规格里选中的规格id,不过此时有问题，就是后台的id拼接是根据当前规格长度来拼接的，从最短的开始往长的拼接，然后，长度相等的时候，我这边的话，后台是从第一个开始拼接的，而且你选规格时，也可能是随机点的，此时若是采用第一种位置写死的方法就会有问题，因为会找不到对应的合并后的规格id

因为我这里一开始用的数据就刚好满足我的设想，但是后面换了个数据后就出现问题了
index.wxml文件也做部分修改,可以直接查找下，类名为standardItem

<view class="standardItem"><block wx:for="{{item}}" wx:key="{{item.item_id}}"><view class="selectItem {{item.item_id == Specifications[standardIndex]?'standardSelected':'standardNormal'}}" bindtap="handleStandardClick" data-standard-index="{{standardIndex}}" data-name="{{item.item}}" data-id="{{item.item_id}}">{{item.item}}</view>        </block>
</view>

*增加另一种模拟数据

goods: {goods_name: "男鞋",store_count: 95,market_price: "10.00",shop_price: "101.00",cost_price: "10.00",original_img: "/images/commodity.jpg",store_id: 170,
},
commodityStandard: [[{spec_name: "颜色",item_id: 532825,item: "白色",src: "",isClick: 0},{spec_name: "颜色",item_id: 532826,item: "黑色",src: "",isClick: 0},{spec_name: "颜色",item_id: 532827,item: "红色",src: "",isClick: 0}],[{spec_name: "大小",item_id: 532828,item: "160",src: "",isClick: 0},{spec_name: "大小",item_id: 532829,item: "150",src: "",isClick: 0}],[{spec_name: "重量",item_id: 552581,item: "10",src: "",isClick: 0}]
],
/* 这里合并规格的信息 */
spec_goods_price: [{id: 1018286,key: "552581_532828_532825",price: "10.00",productprice: "0.00",store_count: 9},{id: 1018287,key: "552581_532828_532826",price: "20.00",productprice: "0.00",store_count: 10},{id: 1018288,key: "552581_532828_532827",price: "30.00",productprice: "0.00",store_count: 10},{id: 1018289,key: "552581_532829_532825",price: "40.00",productprice: "0.00",store_count: 10},{id: 1018290,key: "552581_532829_532826",price: "50.00",productprice: "0.00",store_count: 7},{id: 1018291,key: "552581_532829_532827",price: "60.00",productprice: "0.00",store_count: 10}
],

index.js文件

onLoad: function (options) {let goods = this.data.goods;/* 用于存储对应的价格及库存 */let standardObject = this.data.standardObject;standardObject.price = goods.cost_price;standardObject.store_count = goods.store_count;let spec_goods_price =this.data.spec_goods_price;if (spec_goods_price) {this.checkPrice(spec_goods_price);}this.setData({standardObject,})
},
handleStandardClick: function (e) {// 总规格名称索引let standardIndex = e.currentTarget.dataset.standardIndex;let id = e.currentTarget.dataset.id;/* 存储选中的规格名称 */let name = e.currentTarget.dataset.name;let selectedStandard = this.data.selectedStandard;selectedStandard[standardIndex] = name;let mergeStandard = selectedStandard.join('  ');let Specifications = this.data.Specifications;Specifications[standardIndex] = id;console.log(mergeStandard)this.setData({Specifications,mergeStandard,selectedStandard,})this.checkPrice(this.data.spec_goods_price);
},
/*在还未选择完规格时，暂时选用第一个合并后的规格价格及库存*/
checkPrice: function (spec_goods_price) {let standardObject = this.data.standardObject;if (!this.checkSpecifications(spec_goods_price)) {standardObject.price = spec_goods_price[0].price;standardObject.store_count = spec_goods_price[0].store_count;this.setData({standardObject,})}
},
/* 保存及校验是否选好了规格 */
submitSelected: function (e) {let spec_goods_price = this.data.spec_goods_price;let i = 0;let optionid = "";if (spec_goods_price) {optionid = this.checkSpecifications();if (optionid) {$Message({content: '选择成功',type: 'success'});} else {$Message({content: '请选择规格',type: 'error'});}}
},
checkSpecifications(spec_goods) {let spec_goods_price = spec_goods || this.data.spec_goods_price;let Specifications = this.data.Specifications;let SpecificationsLength = spec_goods_price[0].key.split("_").length;let standardObject = this.data.standardObject;if (Specifications.length != SpecificationsLength) {return false;} else {for (let i = 0; i < spec_goods_price.length; i++) {/* 若selectSpecifications全为true，则选中了对应的合并后的规格 */let selectSpecifications = true;for (let j = 0; j < Specifications.length; j++) {if (spec_goods_price[i].key.indexOf(Specifications[j]) == -1) {selectSpecifications = false;break;}}if (selectSpecifications) {standardObject.price = spec_goods_price[i].price;standardObject.store_count = spec_goods_price[i].store_count;this.setData({standardObject,})return spec_goods_price[i].id;}}}return false;
},

利用indexOf来判断合并后的key值，就不用通过写死位置存储规格，然后这里用了动画，可以自己查看官方完档微信创建动画

微信小程序中遇到的多规格问题(一)相关推荐

微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
微信小程序中如何使用setData修改数组或对象中的某一参数
本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...

微信小程序中遇到的多规格问题(一)

1.效果图

2.文件及部分思路

3.部分思路及改进方法

微信小程序中遇到的多规格问题(一)相关推荐

最新文章

热门文章