小程序加減號(hào)彈出框如何開發(fā)

本文小編為大家詳細(xì)介紹“小程序加減號(hào)彈出框如何開發(fā)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“小程序加減號(hào)彈出框如何開發(fā)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

<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)

},

/*點(diǎn)擊購買彈出購買框 遮照購買層 */

.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è)增加減少 */

/* 計(jì)算加減 */

.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;

}

/* 減號(hào)禁用樣式 */

.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;

}

讀到這里，這篇“小程序加減號(hào)彈出框如何開發(fā)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。