What's the difference between Mini Program moveable-area and movealbe-view?
This article mainly shows you "what's the difference between Mini Program moveable-area and movealbe-view". The content is simple and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "what's the difference between Mini Program moveable-area and movealbe-view".
one。 Movable-area
The movable area of the movable-view.
two。 Movalbe-view
A removable view container that can be dragged and slid on the page
Pay attention
Movable-view must set width and height. Otherwise, it will default to 10px.
The movable-view must be in the component and must be a direct child node, otherwise it cannot be moved
Movable-view defaults to absolute positioning, and top and left attributes are 0px
When movable-view is less than movable-area, the moving range of movable-view is within movable-area.
When movable-view is greater than movable-area, the movement range of movable-view must include movable-area (the x-axis direction and y-axis direction are considered separately)
three。 Runnable code
Wxml
The movable-view area is smaller than movable-area
The movable-view area is larger than movable-area
Removable view
Wxss
.container {
Display: flex
Flex-direction: column
Align-items: center
}
.section _ title_less {
Font-size: 28rpx
}
.area _ less {
Height: 200px
Width: 200px
Background-color: red
}
.view _ less {
Height: 50px
Width: 50px
Background-color: yellow
}
.section _ title_more {
Font-size: 28rpx
Margin-top: 50px
}
.area _ more {
Height: 50px
Width: 50px
Background-color: red
}
.view _ more {
Height: 200px
Width: 200px
Border-color: green
Border-width: 2px
Border
Js
Page ({
/ * *
* initial data of the page
, /
Data: {
X: "100px"
Y: "10px"
}
/ * *
* Lifecycle function-- listen for page loading
, /
OnLoad: function (options) {
}
Change: function (event) {
/ / console.log (event)
}
Scale: function (event) {
/ / console.log (event)
}
Vtouchmove: function (event) {
Console.log ("vertical")
}
Htouchmove: function (event) {
Console.log ("horizontal")
}
})
These are all the contents of this article entitled "what's the difference between Mini Program moveable-area and movealbe-view". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
