微信小程序商品详情页规格属性选择示例代码

<!--轮播图--><swiperclass="swiper"indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"circular="{{circular}}"><blockwx:for="{{picture}}"><swiper-item><imagesrc="{{item.img}}"mode='scaleToFill'class="slide-image"/></swiper-item></block></swiper><view class="goods"><view class='name'>{{goods_info.goods_name}}</view><view class='price'><text class='left'>￥</text><textclass='shop_price'>{{goods_info.shop_price}}</text><text class='market_price'>{{goods_info.market_price}}</text></view></view><view class='line'></view><view class='choose_spec'><text class='left'>已选</text><view class='spec'>{{selectName}}</view><view class='more' bindtap='modal_show' data-flag="0"><imageclass='right'src='/images/detail/more.png'bindtap='choose_spec'></image></view></view><view class='line'></view><view class='comment_head'><text>评价</text><view class='comment_right'><imagesrc="/images/detail/more.png"></image></view></view><view class="line1"></view><view class='comment'><view class="top"><view class='head_img' style="background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg') no-repeat; background-size: cover;"></view><text class='nick_name'>疯狂的李狗蛋儿</text><imageclass='star'src="/images/detail/star5.png"></image></view><view class='comment_content'>回家为维护和额我好卡IE我人文环境人文环境业务8二维大家很快哒二球的大健康大厦火炬大厦会尽快打死大家好的委屈的健康啦即可登录三打架了可完全打卡机</view><view class='comment_img'><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image><imageclass='comment_item_img'src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image></view></view><view class="line"></view><view class='des'><view class='des_head'>商品详情</view><view class='line1'></view><imageclass='des_img'mode='widthFix'src="https://img.alicdn.com/imgextra/i2/3001906498/TB2uxtyXiHmJKJjy0FfXXb9aVXa_!!3001906498.jpg"></image></view><!--底部购物车 --><view class='detail_footer'><view class='detail_cart'><imagesrc="/images/common/cart1.png"></image><view class='cart_font'>购物车</view></view><view class='buy' bindtap='modal_show' data-flag="1">立即购买</view><view class='addCart' bindtap='modal_show' data-flag="2">加入购物车</view></view><!--属性规格选择栏--><view class='mask' style="display:{{choose_modal}}"></view><view class="choose" style="display:{{choose_modal}}"> <view class="spec_img_container"><imagesrc="{{default_spe_img}}"></image><view class="amount">￥{{amount}}</view><icon class="clear" type='clear' bindtap="modal_none"></icon></view><!--选择开始 --> <view class="spec_view_container"><view class="modal_de_select">{{selectName}}</view><view class="modal_spec"><blockwx:for="{{spec}}"wx:for-index="group_idx"><view class="modal_spec_name">{{item.name}}：</view><view class='modal_spec_group'><blockwx:for="{{item.child}}"><view class="modal_spec_item_{{item.isSelect ? 'active' : ''}}"data-select-index="{{group_idx}}"data-attr-index="{{index}}"data-attr-id="{{item.id}}"bindtap='clickAttr'>{{item.name}}</view></block></view></block></view></view><!--选择结束 --><view class="buy_num"><view class="font_num">购买数量：</view><view class="stepper"><!-- 减号 --><text class="{{minusStatus}}" bindtap="bindMinus">-</text><!-- 数值 --><inputtype="number"bindchange="bindManual"value="{{num}}"/><!-- 加号 --><text class="normal" bindtap="bindPlus">+</text></view></view><blockwx:if="{{flag > 0}}"><view class="modal_button">确认</view></block><blockelse><view class="modal_button_two"><buttonclass="modal_cart">加入购物车</button><buttonclass="modal_buy">立即购买</button></view></block></view>detail.wxss样式页面/* pages/detail/detail.wxss */.swiper{height: 750rpx;width: 750rpx;box-sizing: border-box;}.swiper .slide-image{width: 750rpx;height: 750rpx;}.goods{width: 750rpx;height: 215rpx;padding: 34rpx30rpx;box-sizing: border-box;}.goods .name{width: 702rpx;height: 70rpx;line-height: 35rpx;font-size: 28rpx;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.goods .name{width: 702rpx;height: 70rpx;}.goods .price{margin-top:20rpx;color: #C62127;font-size: 32rpx;}.goods .price.left{font-size: 24rpx;}.goods .price.shop_price{font-weight: 700;}.goods .price.market_price{font-size: 24rpx;color: #D7D7D7;margin-left:20rpx;text-decoration-line: line-through;}.line{width: 750rpx;height: 10rpx;background: #EFEFF4;}.choose_spec{width: 750rpx;height: 90rpx;padding: 020rpx;line-height: 90rpx;box-sizing: border-box;}.choose_spec .left{font-size: 24rpx;color: #B6B6B6;float: left;}.choose_spec .spec{height: 90rpx;width: 550rpx;margin-left:30rpx;line-height: 90rpx;font-size: 24rpx;color: #707070;float: left;}.choose_spec .more{width: 60rpx;height: 90rpx;margin-left:650rpx;}.choose_spec .right{width: 38rpx;height: 8rpx;}.comment_head{width: 750rpx;height: 90rpx;line-height: 90rpx;font-size: 24rpx;color: #B6B6B6;padding: 020rpx;box-sizing: border-box;}.comment_head text{float: left;}.comment_head .comment_right{width: 50rpx;height: 90rpx;float: left;margin-left:604rpx;}.comment_head image{width: 38rpx;height: 8rpx;}.line1{width: 750rpx;height: 2rpx;background:#D7D7D7;}.comment{width: 750rpx;height: 428rpx;padding: 20rpx20rpx;box-sizing: border-box;}.comment .top{width: 100%;height: 100rpx;line-height: 100rpx;}.comment .top.head_img{width: 100rpx;height: 100rpx;border-radius: 50%;float: left;}.comment .top.nick_name{font-size: 21rpx;margin-left:12rpx;} .comment .top.star{width: 120rpx;height: 18rpx;margin-left:310rpx;}.comment .comment_content{margin-top:20rpx;height: 64rpx;line-height: 32rpx;font-size: 24rpx;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.comment .comment_img{height: 165rpx;width: 165rpx;overflow: hidden;margin-top:20rpx;}.comment .comment_img{height: 165rpx;width: 100%;}.comment .comment_img.comment_item_img{width: 165rpx;height: 165rpx;box-sizing: border-box;/* border:2rpx #C62127 solid; */padding: 10rpx10rpx;}.des{width: 750rpx;margin-bottom: 100rpx;}.des .des_head{width: 750rpx;height: 100rpx;line-height: 100rpx;font-size: 28rpx;color: #707070;text-align: center;}.des .des_img{width: 750rpx;}.detail_footer{width: 750rpx;height: 100rpx;position: fixed;bottom: 0;border-top: 4rpx#D7D7D7 solid;box-sizing: border-box;}.detail_footer .detail_cart{width: 250rpx;height: 100rpx;background: #fff;float: left;}.detail_footer .detail_cart image{width: 46rpx;height: 46rpx;margin-left: 100rpx;margin-top:10rpx;}.detail_footer .detail_cart .cart_font{font-size: 24rpx;text-align:center;}.detail_footer .buy{width: 250rpx;height: 100rpx;background:#FF9500;margin-left:250rpx;text-align: center;line-height: 100rpx;color: #fff;}.detail_footer .addCart{position: fixed;bottom: 0;right: 0;width: 250rpx;height: 99rpx;background: #C62127;text-align: center;line-height: 99rpx;color: #fff;}/*蒙版 */.mask{width: 750rpx;height: 100%;background: #C0C0C0;z-index: 10;position: fixed;top: 0;opacity: 0.8;}/*选择规格层面*/.choose{display: none;flex-direction: row;align-items: center;background-color: #fff;position: fixed;bottom: 0;right: 0;/* border: 1px solid #f44336; */z-index: 100;width: 750rpx;box-sizing: border-box;}/*知道从来点击来时候 */.choose .modal_button{flex-direction: row;background-color: #C62127;position: inherit;bottom: 0;z-index: 100;width: 750rpx;height: 106rpx;line-height:106rpx;color: #fff;text-align:center;margin:0auto;}/*不知道从哪点进来时候*/.choose .modal_button_two{flex-direction: row;align-items: center;float: left;background-color: #fff;position: inherit;bottom: 0;right: 0;z-index: 10;width: 100%;height: 50px;}.choose .modal_button_twobutton{width: 50%;float: left;color: #fff;border-radius: 0px;}.choose .modal_button_two.modal_cart{background: #FFB03F;}.choose .modal_button_two.modal_buy{background: #f44336;}/* */.choose .spec_img_container{height:100px;border-bottom: 2px solid #F5F5F5;position: relative;}.choose .spec_img_containerimage{width: 200rpx;height: 200rpx;position: absolute;top:-40rpx;left: 20rpx;border: 2px#F5F5F5 solid;border-radius: 5px; }.choose .spec_img_container.amount{width: 400rpx;color: red;position: absolute;top: 80rpx;left:240rpx;}.choose .spec_img_container.clear{position:absolute;top:20rpx;right:20rpx;}.choose .spec_view_container{width: 100%;}.choose .spec_view_container.modal_de_select{font-size: 28rpx;color: #808080;margin-left: 20rpx;margin-top:10rpx;}.choose .spec_view_container.modal_spec{margin-left:20rpx;margin-top:10rpx;font-size:28rpx;}.choose .spec_view_container.modal_spec_name{margin-left:5rpx;margin-top:10rpx;font-size:28rpx;color:#8B0000;}/* .choose .spec_view_container .modal_spec_name::after{content: "";clear: both;display: block;overflow: hidden;} *//* .choose .spec_view_container .radio-group{padding:18rpx;} */.choose .spec_view_container.modal_spec_item_{width: 750rpx;display: inline-block;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;min-width: 80rpx;max-width: 400rpx;height: 50rpx;line-height: 50rpx;border: 2rpx#707070 solid;margin-left:20rpx;margin-top:20rpx;border-radius: 10rpx;text-align: center;}.choose .spec_view_container.modal_spec_item_active{width: 750rpx;display: inline-block;width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;min-width: 80rpx;max-width: 400rpx;height: 50rpx;line-height: 50rpx;/* border: 2rpx red solid; */margin-left:20rpx;margin-top:20rpx;border-radius: 10rpx;text-align: center;background: #C62127;color: #fff;}.choose .buy_num {margin-top:40rpx;margin-bottom: 120rpx;font-size: 28rpx;}.choose .buy_num.font_num{margin-left: 20rpx;}/*主容器*/.choose .buy_num.stepper { width: 200rpx; height: 62rpx; /*给主容器设一个边框*/ border: 2rpxsolid #ccc; border-radius: 3px; margin-left:40rpx;margin-top:20rpx;}/*加号和减号*/.choose .buy_num.stepper text { width: 58rpx; line-height: 62rpx; text-align: center; float: left;}/*数值*/.choose .buy_num.stepper input { width: 80rpx; height: 62rpx; float: left; margin: 0auto; text-align: center; font-size: 32rpx; /*给中间的input设置左右边框即可*/ border-left: 2rpx solid#ccc; border-right: 2rpx solid#ccc;}/*普通样式*/.choose .buy_num.stepper .normal{ color: black;}/*禁用样式*/.choose .buy_num.stepper .disabled{ color: #ccc;}detail.js页面const app =getApp();var selectIndex;//选择的大规格keyvar attrIndex;//选择的小规格的keyvar selectIndexArray = [];//选择属性名字的数组var selectAttrid = [];//选择的属性idPage({/*** 页面的初始数据*/data: {picture: [{img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3438576193,3301397209&fm=27&gp=0.jpg'},{ img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1525546566,2404337493&fm=27&gp=0.jpg' },{ img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028702483,4182396631&fm=27&gp=0.jpg' },],//swiper相关indicatorDots: true,autoplay: true,interval: 3000,duration: 1000,circular: true,//选择的规格num: 1,//初始数量amount: 0,//初始金额minusStatus: 'disabled', // 使用data数据对象设置样式名choose_modal: "block", // 规格数量框flag: 0,//点选规格时来源 0：规格点 1：立即购买 2：加入购物车//规格数据spec: [{ "id": 1, "name": "/u989c/u8272", "child": [{ "id": 11, "name":"/u7ea2/u8272", "isSelect":true }, { "id":111, "name":"/u767d/u8272", "isSelect":false }] }, { "id":2, "name": "/u5c3a/u7801", "child": [{ "id": 21, "name":"/u5c0f/u53f7", "isSelect":true }, { "id":22, "name":"/u5927/u53f7", "isSelect":false }] }],selectName: "",//已选的属性名字selectAttrid:[],//选择的属性id//商品信息goods_info:{},},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;wx.request({url: app.globalData.host +'/index.php/app/goods/goodsDetails/goods_id/34',header: {'Content-type': 'application/json'},success:function(res){console.log(res.data.data.goods_info);that.setData({goods_info:res.data.data.goods_info,});that.init_attr();}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/* 点击减号 */bindMinus: function () {var num = this.data.num;// 如果大于1时，才可以减if (num > 1) {num--;}// 只有大于一件的时候，才能normal状态，否则disable状态var minusStatus = num <= 1 ? 'disabled' : 'normal';// 将数值与状态写回this.setData({num: num,minusStatus: minusStatus});this.change_spec();this.change_price();},bindPlus: function () {var num = this.data.num;// 不作过多考虑自增1num++;// 只有大于一件的时候，才能normal状态，否则disable状态var minusStatus = num < 1 ? 'disabled' : 'normal';// 将数值与状态写回this.setData({num: num,minusStatus: minusStatus});this.change_spec();this.change_price();},/* 输入框事件 */bindManual: function (e) {var num = e.detail.value;if (isNaN(num)) {num = 1;}// 将数值与状态写回this.setData({num: parseInt(num)});this.change_spec();this.change_price();},//弹出modal_show: function (e) {var flag = e.currentTarget.dataset.flag;this.setData({flag:flag,choose_modal: "block",});},//消失modal_none: function () {this.setData({choose_modal: "none",});},clickAttr: function (e) {// console.log(e);return;var selectIndex = e.currentTarget.dataset.selectIndex;var attrIndex = e.currentTarget.dataset.attrIndex;var spec = this.data.spec;var count = spec[selectIndex].child.length;// console.log(count); return;for (var i =0; i < count; i++) {spec[selectIndex].child[i].isSelect = false;}spec[selectIndex].child[attrIndex].isSelect = true;var name = spec[selectIndex].child[attrIndex].name;//点击属性的名称var attrid = spec[selectIndex].child[attrIndex].id;// //点击过，修改属性var selectName = "";//点击过，修改属性selectIndexArray[selectIndex].value = name;selectAttrid[selectIndex] = attrid;var selectIndexArraySize = selectIndexArray.length;//将数组的所有属性名拼接起来for (var i =0; i < selectIndexArraySize; i++) {selectName += ' "' + selectIndexArray[i].value +'" ';}console.log(selectName);this.setData({spec: spec,//变换选择框selectName: selectName,selectAttrid: selectAttrid});},//初始化规格选择init_attr:function(){//初始化规格选择var name = "";var spec = this.data.spec;var size = spec.length;for (var i =0; i < size; i++) {selectIndexArray.push({ key: i, value: spec[i].child[0].name });selectAttrid.push(spec[i].child[0].id)name += ' "' + selectIndexArray[i].value +'" ';}var selectName = this.data.selectName;selectName = name;this.setData({selectName: selectName,selectAttrid: selectAttrid});}})