知識
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價值,我們在追求其視覺表現(xiàn)的同時,更側(cè)重于功能的便捷,營銷的便利,運營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!
您當前位置>首頁 » 新聞資訊 » 小程序相關(guān) >
微信小程序組件 加減號彈出框
發(fā)表時間:2021-3-31
發(fā)布人:葵宇科技
瀏覽次數(shù):79
<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'>購買數(shù)量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>
// 彈出框顯隱控制參數(shù)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;
}
/* 關(guān)閉及加減 */
.detail-right {
/* width: 190rpx; */
}
.detail-title-de{
font-size: 30rpx;
color: #333333;
margin-bottom: 20rpx;
}
/* 右側(cè)增加減少 */
/* 計算加減 */
.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;
}
相關(guān)案例查看更多
相關(guān)閱讀
- 昆明網(wǎng)絡公司
- 云南小程序開發(fā)
- 做網(wǎng)站
- 云南小程序開發(fā)首選品牌
- 專業(yè)網(wǎng)站建設公司
- 云南小程序開發(fā)費用
- 云南科技公司
- .net網(wǎng)站
- 網(wǎng)站開發(fā)哪家好
- 昆明小程序代建
- 高端網(wǎng)站建設公司
- uniapp開發(fā)小程序
- 小程序表單
- 云南小程序開發(fā)報價
- 百度自然排名
- 云南軟件設計
- 昆明小程序哪家好
- 網(wǎng)站優(yōu)化
- 搜索引擎自然排名
- 云南網(wǎng)站建設方案 doc
- 云南網(wǎng)站建設公司地址
- 花農(nóng)小程序
- 網(wǎng)站建設電話
- 安家微信小程序
- 云南網(wǎng)站建設優(yōu)化
- 云南小程序代建
- 云南網(wǎng)站建設特性
- 軟件定制公司
- 云南網(wǎng)站建設哪家公司好
- 報廢車回收