Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to develop the Mini Program plus and minus pop-up box". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to develop the Mini Program plus and minus pop-up box" can help you solve your doubts. Let's follow the editor's train of thought to slowly deepen, together to learn new knowledge.

View >

Purchase quantity view >

-text >

View >

+ text >

View >

View >

View >

Add shopping cart view >

Pay now view >

View >

View >

/ / the pop-up box explicit and hidden control parameter data-

ShowModalStatus: false

Pop window

/ / pop-up window

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)

}

/ * Click the purchase pop-up box to shade the purchase layer * /

.shade {

Width: 100%

Height:100%

Position: fixed

Top:0

Left: 0

Background: rgba (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

}

/ * details of goods to be added * /

.shade-shop-detail {

Padding: 20rpx 24rpx 40rpx

}

/ * close and add or subtract * /

. detail-right {

/ * width: 190rpx; * /

}

.detail-title-de {

Font-size: 30rpx

Color: # 333333

Margin-bottom: 20rpx

}

/ * increase and decrease on the right * /

/ * calculate addition and subtraction * /

.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

}

/ * minus sign disables style * /

.stepper .disabled {

Border-color: rgba (153 pencils 153 pencils 153 pas 0.2)

}

. button-add {

Width: 100%

Height: 100rpx

Color: white

Line-height: 100rpx

Text-align: center

Font-size: 32rpx

}

. button-add {

"> # b5c2cf

}

After reading this, the article "how to develop the Mini Program plus-minus pop-up box" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, welcome to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.