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

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!

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.