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

发布时间：2020-09-13 02:28:54

来源：脚本之家

阅读：217

作者：liuchen1314

detail.wxml展示页面

class="swiper"

indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

circular="{{circular}}">

wx:for="{{picture}}">

src="{{item.img}}"

mode='scaleToFill'

class="slide-image"/>

class="goods">

class='name'>{{goods_info.goods_name}}

class='price'>

class='left'>￥

class='shop_price'>{{goods_info.shop_price}}

class='market_price'>{{goods_info.market_price}}

class='line'>

class='choose_spec'>

class='left'>已选

class='spec'>{{selectName}}

class='more'

bindtap='modal_show'

data-flag="0">

class='right'

src='/images/detail/more.png'

bindtap='choose_spec'>

class='line'>

class='comment_head'>

评价

class='comment_right'>

src="/images/detail/more.png">

class="line1">

class='comment'>

class="top">

class='head_img'

>

class='nick_name'>疯狂的李狗蛋儿

class='star'

src="/images/detail/star5.png">

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

class='comment_img'>

class='comment_item_img'

src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">

class='comment_item_img'

src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">

class='comment_item_img'

src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">

class='comment_item_img'

src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg">

class="line">

class='des'>

class='des_head'>商品详情

class='line1'>

class='des_img'

mode='widthFix'

src="https://cache.yisu.com/upload/information/20200622/114/60763.jpg">

class='detail_footer'>

class='detail_cart'>

src="/images/common/cart1.png">

class='cart_font'>购物车

class='buy'

bindtap='modal_show'

data-flag="1">立即购买

class='addCart'

bindtap='modal_show'

data-flag="2">加入购物车

class='mask'

>

class="choose"

>

class="spec_img_container">

src="{{default_spe_img}}">

class="amount">￥{{amount}}

class="clear"

type='clear'

bindtap="modal_none">

class="spec_view_container">

class="modal_de_select">{{selectName}}

class="modal_spec">

wx:for="{{spec}}"

wx:for-index="group_idx">

class="modal_spec_name">{{item.name}}：

class='modal_spec_group'>

wx:for="{{item.child}}">

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}}

class="buy_num">

class="font_num">购买数量：

class="stepper">

class="{{minusStatus}}"

bindtap="bindMinus">-

type="number"

bindchange="bindManual"

value="{{num}}"

/>

class="normal"

bindtap="bindPlus">+

wx:if="{{flag > 0}}">

class="modal_button">确认

else>

class="modal_button_two">

class="modal_cart">加入购物车

class="modal_buy">立即购买

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 #C62127 solid; */

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

#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: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:

2px solid #F5F5F5;

position: relative;

}

.choose .spec_img_container

image{

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: 2rpx

solid #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: 0

auto;

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;//选择的大规格key

var attrIndex;//选择的小规格的key

var selectIndexArray = [

];//选择属性名字的数组

var selectAttrid = [];//选择的属性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) {

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;

// 不作过多考虑自增1

num++;

// 只有大于一件的时候，才能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

});

}

})

总结

以上所述是小编给大家介绍的微信小程序商品详情页规格属性选择示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持！