刚进入公司的时候就有遇到过多规格的问题,当时就觉得很麻烦,就只是看了下,没有尝试,最近在写微信小程序的时候,又遇到了多规格问题,就自己尝试了下,在这里记录下
1.效果图
2.文件及部分思路
<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" />
.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;
m