微信小程序组件 加减号弹出框
2024-10-13 20:17:12
<!-- 点击立即抢拼弹出框 -->
<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;
}
最新文章
- 在MacOS 10.12上安装Tomcat8.5
- 权重和层叠规则决定了CSS样式优先级
- 分析案例：界面提示“基础链接已经关闭：接收时发生错误”----本质为StackOverflow
- 关于web测试
- Android 测试工具
- struts2视频学习笔记 29-30（Struts 2常用标签，防止表单重复提交）
- require.js js模块化方案
- Ubuntu 下安装 Oracle JDK
- ASP.NET中IsPostBack详解
- 研究了下apache的漏洞CVE-2012-0053
- 参数验证 @Validated 和 @Valid 的区别
- requests库/爬取zhihu表情包
- css颜色表示法
- [PHP] 多表外连接性能测试及优化
- python3安装ipython 过程以及问题
- rbac集成 权限分配。之用户管理
- DLL动态链接库导出函数方法 -- 动态导出（.def文件导出）
- CF1012C Hills
- Jdk1.8在CentOS7中的安装与配置
- 有关xml中的xmlns