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 }); } })
总结
以上所述是小编给大家介绍的微信小程序商品详情页规格属性选择示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
微信小程序商品详情页规格属性选择示例代码
- Author -
liuchen1314声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@