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

2023-09-21 20:04:05 173
detail.wxml展示页面









{{goods_info.goods_name}}

￥{{goods_info.shop_price}}
{{goods_info.market_price}}




已选
{{selectName}}




评价








疯狂的李狗蛋儿


回家为维护和额我好卡IE我人文环境人文环境业务8二维大家很快哒二球的大健康大厦火炬大厦会尽快打死大家好的委屈的健康啦即可登录三打架了可完全打卡机









商品详情







购物车

立即购买
加入购物车






￥{{amount}}




{{selectName}}


{{item.name}}：


{{item.name}}







购买数量：


-



+



确认








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:34rpx
30rpx;
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:0
20rpx;
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:0
20rpx;
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:20rpx
20rpx;
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#C62127solid;*/
padding:10rpx
10rpx;
}
.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
#D7D7D7solid;
box-sizing:border-box;
}
.detail_footer
.detail_cart{
width:250rpx;
height:100rpx;
background:#fff;
float:left;
}
.detail_footer
.detail_cartimage{
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:1pxsolid#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:0
auto;
}
/*不知道从哪点进来时候*/
.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_two
button{
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:
2pxsolid#F5F5F5;
position:relative;
}
.choose.spec_img_container
image{
width:200rpx;
height:200rpx;
position:absolute;
top:-40rpx;
left:20rpx;
border:2px
#F5F5F5solid;
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
#707070solid;
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:2rpxredsolid;*/
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:2rpx
solid#ccc;
border-radius:
3px;
margin-left:40rpx;
margin-top:20rpx;
}
/*加号和减号*/
.choose.buy_num
.steppertext{
width:58rpx;
line-height:
62rpx;
text-align:
center;
float:left;
}
/*数值*/
.choose.buy_num
.stepperinput{
width:80rpx;
height:62rpx;
float:left;
margin:0
auto;
text-align:
center;
font-size:
32rpx;
/*给中间的input设置左右边框即可*/
border-left:
2rpxsolid
#ccc;
border-right:
2rpxsolid
#ccc;
}
/*普通样式*/
.choose.buy_num
.stepper.normal{
color:black;
}
/*禁用样式*/
.choose.buy_num
.stepper.disabled{
color:#ccc;
}
detail.js页面
constapp=getApp();
varselectIndex;//选择的大规格key
varattrIndex;//选择的小规格的key
varselectIndexArray=[
];//选择属性名字的数组
varselectAttrid=[];//选择的属性id
Page({
/**
*页面的初始数据
*/
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){
varthat=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(){
varnum=this.data.num;
//如果大于1时，才可以减
if(num>1){
num--;
}
//只有大于一件的时候，才能normal状态，否则disable状态
varminusStatus=num<=
1?'disabled':
'normal';
//将数值与状态写回
this.setData({
num:num,
minusStatus:minusStatus
});
this.change_spec();
this.change_price();
},
bindPlus:function(){
varnum=this.data.num;
//不作过多考虑自增1
num++;
//只有大于一件的时候，才能normal状态，否则disable状态
varminusStatus=num<
1?'disabled':
'normal';
//将数值与状态写回
this.setData({
num:num,
minusStatus:minusStatus
});
this.change_spec();
this.change_price();
},
/*输入框事件*/
bindManual:function(e){
varnum=e.detail.value;
if(isNaN(num)){
num=1;
}
//将数值与状态写回
this.setData({
num:parseInt(num)
});
this.change_spec();
this.change_price();
},
//弹出
modal_show:function(e){
varflag=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;
varselectIndex=e.currentTarget.dataset.selectIndex;
varattrIndex=e.currentTarget.dataset.attrIndex;
varspec=this.data.spec;
varcount=spec[selectIndex].child.length;
//console.log(count);return;
for(vari=
0;i
总结
以上所述是小编给大家介绍的微信小程序商品详情页规格属性选择示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
微信小程序商品详情页规格属性选择示例代码

热门推荐

随机推荐
