How to develop the Mini Program plus and minus pop-up box
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.
