转载自：https://blog.csdn.net/zx_001/article/details/80581506
wxml:
1 <!--屏幕背景变暗的背景 --> 2 <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> 3 <!--弹出框 --> 4 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> 5 <view class=\'commImg\'><image src=\'{{imghref}}{{goods_img[0].img}}\' mode="aspectFit"></image></view> 6 <view class=\'column\'> 7 <text class="sku-price">￥{{gg_price}}</text> 8 <text class="sku-title"><block wx:if="{{gg_txt==\'\'}}">请选择规格</block><block wx:else>已选择{{gg_txt}}ml</block></text> 9 </view> 10 <text class="line"></text> 11 <view class=\'guige\'> 12 <text class="gg-title">规格</text> 13 <view class=\'gg\'> 14 <text wx:for="{{guigeList}}" wx:key="gg" wx:for-item="item" class="{{gg_id==item.guige?\'active\':\'\'}}" data-id="{{item.guige}}" data-txt="{{item.guige}}" data-price=\'{{item.price}}\' bindtap="filter">{{item.guige}}ml</text> 15 </view> 16 </view> 17 <text class="line"></text> 18 <view class="row"> 19 <text >数量</text> 20 <view class="quantity-position"> 21 <view class="stepper"> 22 <!-- 减号 --> 23 <text class="{{minusStatus}}" bindtap="bindMinus">-</text> 24 <!-- 数值 --> 25 <input type="number" bindinput=\'bindManual\' value="{{num}}" /> 26 <!-- 加号 --> 27 <text class="normal" bindtap="bindPlus">+</text> 28 </view> 29 </view> 30 </view> 31 <text class="line"></text> 32 <view class=\'btn\'> 33 <button class="button-add" bindtap="addCart">加入购物车</button> 34 <button class="button-buy">立即购买</button> 35 </view> 36 </view>
wxss:
1 /*使屏幕变暗 */ 2 .commodity_screen { 3 width: 100%; 4 height: 100%; 5 position: fixed; 6 top: 0; 7 left: 0; 8 background: #000; 9 opacity: 0.5; 10 overflow: hidden; 11 z-index: 1000; 12 color: #fff; 13 } 14 /*对话框 */ 15 .commodity_attr_box { 16 17 width: 94%; 18 position: fixed; 19 bottom: 0; 20 left: 0; 21 z-index: 2000; 22 background: #fff; 23 padding:20rpx 3%; 24 } 25 26 .commImg{ 27 position: absolute; 28 width:150rpx; 29 height:150rpx; 30 background:#fff; 31 border:1px solid #f5f5f5; 32 z-index: 12; 33 left: 20px; 34 top: -35px; 35 padding:20rpx; 36 border-radius: 20rpx; 37 } 38 .commImg image{ 39 width:100%; 40 height:100%; 41 } 42 43 .column{ 44 display: flex; 45 flex-direction: column; 46 } 47 48 .sku-price { 49 color: red; 50 position: relative; 51 left: 250rpx; 52 margin: 1rpx; 53 } 54 .sku-title { 55 position: relative; 56 left: 250rpx; 57 font-size: 12px; 58 margin: 1rpx; 59 } 60 61 .line{ 62 width: 95%; 63 height: 2rpx; 64 display: inline-block; 65 margin: 30rpx 0rpx 5rpx 0rpx; 66 background-color: #f2f2f2; 67 text-align: center; 68 } 69 70 .gg-title{ 71 font-size: 15px; 72 } 73 74 .gg text{ 75 width:100rpx; 76 height:50rpx; 77 line-height:50rpx; 78 float:left; 79 background:#f2f2f2; 80 text-align: center; 81 margin:20rpx 0 0 26rpx; 82 font-size:12px; 83 border-radius: 5px; 84 } 85 .gg .active{ 86 color:#fff; 87 background:#e64340; 88 } 89 .row { 90 display: flex; 91 flex-direction: row; 92 align-items: center; 93 } 94 .row .quantity-position { 95 position: absolute; 96 margin-top:5px; 97 right:50rpx; 98 } 99 100 .btn{ 101 display: flex; 102 flex-direction: row; 103 align-items: center; 104 } 105 .button-add{ 106 width:50%; 107 border:0px; 108 background:#4CAF50; 109 color:#fff; 110 border-radius: 0px; 111 } 112 .button-buy{ 113 width:50%; 114 background:#F44336; 115 color:#fff; 116 border-radius: 0px; 117 } 118 119 120 /*数量加减样式*/ 121 /*主容器*/ 122 .stepper { 123 width: 80px; 124 height: 26px; 125 /*给主容器设一个边框*/ 126 border: 1px solid #ccc; 127 border-radius: 3px; 128 margin:0 auto; 129 } 130 131 /*加号和减号*/ 132 .stepper text { 133 width: 19px; 134 line-height: 26px; 135 text-align: center; 136 float: left; 137 } 138 139 /*数值*/ 140 .stepper input { 141 padding:0px; 142 width: 40px; 143 height: 26px; 144 float: left; 145 margin: 0 auto; 146 text-align: center; 147 font-size: 12px; 148 /*给中间的input设置左右边框即可*/ 149 border-left: 1px solid #ccc; 150 border-right: 1px solid #ccc; 151 } 152 153 /*普通样式*/ 154 .stepper .normal{ 155 color: black; 156 }
JS:这里是Page，也可改为组件Component
1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 showModalStatus: false,//是否显示 8 gg_id: 0,//规格ID 9 gg_txt: \'\',//规格文本 10 gg_price: 0,//规格价格 11 guigeList: [{ guige: \'100\', price: \'150\' }, { guige: \'200\', price: \'150\' }, { guige: \'300\', price: \'150\' }], 12 num:1,//初始数量 13 }, 14 filter: function (e) { 15 //console.log(e); 16 var self = this, id = e.currentTarget.dataset.id, txt = e.currentTarget.dataset.txt, price = e.currentTarget.dataset.price 17 self.setData({ 18 gg_id: id, 19 gg_txt: txt, 20 gg_price: price 21 }); 22 }, 23 24 /* 点击减号 */ 25 bindMinus: function () { 26 var num = this.data.num; 27 // 如果大于1时，才可以减 28 if (num > 1) { 29 num--; 30 } 31 // 只有大于一件的时候，才能normal状态，否则disable状态 32 var minusStatus = num <= 1 ? \'disabled\' : \'normal\'; 33 // 将数值与状态写回 34 this.setData({ 35 num: num, 36 minusStatus: minusStatus 37 }); 38 }, 39 /* 点击加号 */ 40 bindPlus: function () { 41 var num = this.data.num; 42 // 不作过多考虑自增1 43 num++; 44 // 只有大于一件的时候，才能normal状态，否则disable状态 45 var minusStatus = num < 1 ? \'disabled\' : \'normal\'; 46 // 将数值与状态写回 47 this.setData({ 48 num: num, 49 minusStatus: minusStatus 50 }); 51 }, 52 53 //显示对话框 54 showModal: function () { 55 // 显示遮罩层 56 var animation = wx.createAnimation({ 57 duration: 200, 58 timingFunction: "linear", 59 delay: 0 60 }) 61 this.animation = animation 62 animation.translateY(300).step() 63 this.setData({ 64 animationData: animation.export(), 65 showModalStatus: true 66 }) 67 setTimeout(function () { 68 animation.translateY(0).step() 69 this.setData({ 70 animationData: animation.export() 71 }) 72 }.bind(this), 200) 73 }, 74 //隐藏对话框 75 hideModal: function () { 76 // 隐藏遮罩层 77 var animation = wx.createAnimation({ 78 duration: 200, 79 timingFunction: "linear", 80 delay: 0 81 }) 82 this.animation = animation 83 animation.translateY(300).step() 84 this.setData({ 85 animationData: animation.export(), 86 }) 87 setTimeout(function () { 88 animation.translateY(0).step() 89 this.setData({ 90 animationData: animation.export(), 91 showModalStatus: false 92 }) 93 }.bind(this), 200) 94 }, 95 /** 96 * 生命周期函数--监听页面加载 97 */ 98 onLoad: function (options) { 99 100 }, 101 })
请发表评论