微信小程序组件加减号弹出框

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

微信小程序组件加减号弹出框

发布时间:2020-11-03

<view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModalStatus}}">view> <view class='rob-box' wx:if="{{showModalStatus}}"> <view class="shade-shop-detail"> <view class="detail-right flexb"> <view class='detail-title-de'>购买数量view> <view class="stepper"> <text class="{{minusStatuses?'disabled':''}}" disabled="true" data-idx="{{idx}}" data-index="{{index}}" bindtap="bindMinus">-text> <view class="number" bindchange="bindManual">view> <input maxlength='5' type='number' class="numberin" value='{{detailDatas.num}}' bindinput="bindChange" /> <text class="normal" data-idx="{{idx}}" data-index="{{index}}" bindtap="bindPlus">+text> view> view> view> <view class="shade-shop-button"> <view wx:if="{{myBtn==1?'true':''}}" class="button-add" data-cid='detailDatas.id' bindtap='addShopcar'>加入购物车view> <view wx:if="{{myBtn==1?'':'true'}}" class="button-add" data-cid='detailDatas.id' bindtap='orderInto'>立即支付view> view> view> // 弹出框显隐控制参数data------ showModalStatus: false,

弹窗

// 弹窗 setModalStatus: function (e) { let that = this; var animation = wx.createAnimation({ duration:200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step(); this.setData({ animationData: animation.export(), }) if (e.currentTarget.dataset.status == 1) { this.setData( { showModalStatus: true } ); } setTimeout(function () { animation.translateY(0).step() this.setData({ animationData: animation }) if (e.currentTarget.dataset.status == 0) { this.setData( { showModalStatus: false } ); } }.bind(this), 200) }, /*点击购买弹出购买框遮照购买层 */ .shade{ width: 100%; height:100%; position: fixed; top:0; left: 0; background: rgba(0,0,0,0.5); } .shade-shop{ width: 100%; height: 290rpx; ">white; position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; } /* 待添加商品详情 */ .shade-shop-detail{ padding: 20rpx 24rpx 40rpx; } /* 关闭及加减 */ .detail-right { /* width: 190rpx; */ } .detail-title-de{ font-size: 30rpx; color: #333333; margin-bottom: 20rpx; } /* 右侧增加减少 */ /* 计算加减 */ .stepper{ display: flex; border-radius: 5px; text-align: center; } .stepper text{ display: block; width: 50rpx; height: 52rpx; border:1px solid #999999; line-height: 50rpx; color: #666666; } .stepper input{ display: block; width: 100rpx; height: 50rpx; border:1px solid #999999; line-height: 50rpx; color: #333333; font-size: 28rpx; text-align: center; } /* .stepper wx-input.numberin{ width: 120rpx; } */ .stepper text:first-child{ border-right: none; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .stepper text:last-child{ border-left: none; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* 减号禁用样式 */ .stepper .disabled{ border-color: rgba(153,153,153,0.2) } .button-add{ width: 100%; height: 100rpx; color: white; line-height: 100rpx; text-align: center; font-size: 32rpx; } .button-add{ ">#b5c2cf; }

本文标签

程序微信组件弹出减号

上一篇：聊一聊卡卷签名的那些坑
下一篇：基于一个好玩儿的聊天室理解小程序 session 管理

258资源分享网

分类

推荐文章

推荐下载

微信小程序组件加减号弹出框

本文标签

258资源分享网

分类

推荐文章

推荐下载

微信小程序组件 加减号弹出框

本文标签

微信小程序组件加减号弹出框