<!--轮播图--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"> <block wx:for="{{picture}}"> <swiper-item> <image src="https://www.jb51.net/{{item.img}}" mode='scaleToFill'/> </swiper-item> </block> </swiper> <view> <view>{{goods_info.goods_name}}</view> <view> <text>￥</text><text>{{goods_info.shop_price}}</text> <text>{{goods_info.market_price}}</text> </view> </view> <view></view> <view> <text>已选</text> <view>{{selectName}}</view> <view bindtap='modal_show' data-flag="0"><image src='https://www.jb51.net/images/detail/more.png' bindtap='choose_spec'></image></view> </view> <view></view> <view> <text>评价</text> <view> <image src="https://www.jb51.net/images/detail/more.png"></image> </view> </view> <view></view> <view> <view> <view></view> <text>疯狂的李狗蛋儿</text> <image src="https://www.jb51.net/images/detail/star5.png"></image> </view> <view>回家为维护和额我好卡IE我人文环境人文环境业务8二维大家很快哒二球的大健康大厦火炬大厦会尽快打死大家好的委屈的健康啦即可登录三打架了可完全打卡机</view> <view> <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image> <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image> <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image> <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2770691011,100164542&fm=27&gp=0.jpg"></image> </view> </view> <view></view> <view> <view>商品详情</view> <view></view> <image mode='widthFix' src="https://img.alicdn.com/imgextra/i2/3001906498/TB2uxtyXiHmJKJjy0FfXXb9aVXa_!!3001906498.jpg"></image> </view> <!--底部购物车 --> <view> <view> <image src="https://www.jb51.net/images/common/cart1.png"></image> <view>购物车</view> </view> <view bindtap='modal_show' data-flag="1">立即购买</view> <view bindtap='modal_show' data-flag="2">加入购物车</view> </view> <!--属性规格选择栏--> <view></view> <view> <view> <image src="https://www.jb51.net/{{default_spe_img}}"></image> <view>￥{{amount}}</view> <icon type='clear' bindtap="modal_none"></icon> </view> <!--选择开始 --> <view> <view>{{selectName}}</view> <view> <block wx:for="{{spec}}" wx:for-index="group_idx"> <view>{{item.name}}：</view> <view> <block wx:for="{{item.child}}"> <view 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> <view>购买数量：</view> <view> <!-- 减号 --> <text bindtap="bindMinus">-</text> <!-- 数值 --> <input type="number" bindchange="bindManual" value="{{num}}" /> <!-- 加号 --> <text bindtap="bindPlus">+</text> </view> </view> <block wx:if="{{flag > 0}}"> <view>确认</view> </block> <block else> <view> <button>加入购物车</button> <button>立即购买</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 }); } })
微信小程序商品详情页规格属性选择示例代码
内容版权声明：除非注明，否则皆为本站原创文章。