行业资讯

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

发布时间：2020-09-13 02:28:54 作者：liuchen1314
来源：脚本之家 阅读：839

detail.wxml展示页面

<!--轮播图-->
<swiper
class="swiper"
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}">
<block
wx:for="{{picture}}">
<swiper-item>
<image
src="{{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><text
class='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"><image
class='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'>
<image
src="/images/detail/more.png"></image>
</view>
</view>
<view 
class="line1"></view>
<view 
class='comment'>
<view 
class="top">
<view 
class='head_img' 
></view>
<text 
class='nick_name'>疯狂的李狗蛋儿</text>
<image
class='star'
src="/images/detail/star5.png"></image>
</view>
<view 
class='comment_content'>回家为维护和额我好卡IE我人文环境人文环境业务8二维大家很快哒二球的大健康大厦火炬大厦会尽快打死大家好的委屈的健康啦即可登录三打架了可完全打卡机</view>
<view 
class='comment_img'>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
<image
class='comment_item_img'
src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image>
<image
class='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>
<image
class='des_img'
mode='widthFix'
src="https://cache.yisu.com/upload/information/20200622/114/60763.jpg"></image>
</view>
<!--底部购物车 -->
<view 
class='detail_footer'>
<view 
class='detail_cart'>
<image
src="/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' 
></view>
<view 
class="choose" 
> 
<view 
class="spec_img_container">
<image
src="{{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">
<block
wx:for="{{spec}}"
wx:for-index="group_idx">
<view 
class="modal_spec_name">{{item.name}}：</view>
<view 
class='modal_spec_group'>
<block
wx: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>
<!-- 数值 -->
<input
type="number"
bindchange="bindManual"
value="{{num}}"
/>
<!-- 加号 -->
<text 
class="normal" 
bindtap="bindPlus">+</text>
</view>
</view>
<block
wx:if="{{flag > 0}}">
<view 
class="modal_button">确认</view>
</block>
<block
else>
<view 
class="modal_button_two">
<button
class="modal_cart">加入购物车</button>
<button
class="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: 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
});
}
})

总结

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

推荐阅读：
  1. 如何实现仿iOS淘宝产品详情页选择属性规格的动画
  2. jquery实现商品sku多属性选择功能（商品详情页）

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

微信小程序 商品属性 信小

上一篇：Centos7 Python3下安装scrapy的详细步骤

下一篇：老韩思考：一个卖豆腐的能转行IT吗? 你的卖点在哪里?

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号