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


Posted in Javascript onOctober 30, 2017

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' 
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>
<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://img.alicdn.com/imgextra/i2/3001906498/TB2uxtyXiHmJKJjy0FfXXb9aVXa_!!3001906498.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' 
style="display:{{choose_modal}}"></view>
<view 
class="choose" 
style="display:{{choose_modal}}"> 
<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
});
}
})

总结

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

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 #Javascript
JavaScript数组push方法使用注意事项
Oct 30 #Javascript
JavaScript Date对象应用实例分享
Oct 30 #Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 #Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
Vue中正确使用jQuery的方法
Oct 30 #jQuery
ES6 javascript中Class类继承用法实例详解
Oct 30 #Javascript
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP简单日历实现方法
2016/07/20 PHP
让焦点自动跳转
2006/07/01 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
建筑设计学生的自我评价
2014/01/16 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
自我检讨书范文
2015/01/28 职场文书
劳资员岗位职责
2015/02/13 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android