detail.wxml展示页面
{{goods_info.goods_name}} ￥{{goods_info.shop_price}}{{goods_info.market_price}} 已选{{selectName}} 评价 疯狂的李狗蛋儿回家为维护和额我好卡IE我人文环境人文环境业务8二维大家很快哒二球的大健康大厦火炬大厦会尽快打死大家好的委屈的健康啦即可登录三打架了可完全打卡机 商品详情 购物车立即购买加入购物车 ￥{{amount}} {{selectName}} {{item.name}}： {{item.name}} 购买数量： -+ 0}}"> 确认 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-600'}, { img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1525546566,2404337493&fm=27&gp=0.jpg-600' }, { img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3028702483,4182396631&fm=27&gp=0.jpg-600' }, ], //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
总结
以上所述是小编给大家介绍的微信小程序商品详情页规格属性选择示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
以上就是微信小程序商品详情页规格属性选择示例代码的详细内容，更多请关注本站其它相关文章！
