The movable-area component is a very useful component in Uniapp, which allows users to drag a movable area on the page to achieve some interesting interactive effects. This article will introduce in detail how to use the movable-area component in Uniapp.
1. Create a movable-area component
In Uniapp, we can create a movable area by adding a movable-area component to the page. Here is a simple sample code:
<template>
<view>
<movable-area>
<movable-view>
<view class="box"></view>
</movable-view>
</movable-area>
</view>
</template><style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
In the above code, we created a movable-area component and added a movable-view component and a red square to it. The movable-view component is a subcomponent of the movable-area component, and it can move freely in the movable-area component.
2. Set the properties of the movable-view component
In the sample code above, we simply created a movable area, but we can also achieve more effects by setting the properties of the movable-view component.
Here are some commonly used properties:
- direction: Set the moving direction of the movable-view component, the optional values are "all", "vertical" and "horizontal".
- damping: Set the moving damping of the movable-view component, the value range is 0~100.
- friction: Set the movement friction of the movable-view component, the value range is 0~1.
- scale: Set the zoom ratio of the movable-view component, the value range is 0.5~10.
- animation: Set the animation effect of the movable-view component, the optional values are "ease", "linear", "ease-in", "ease-out", "ease-in-out" and "step-start". Here is a sample code that demonstrates how to set properties of the movable-view component:
<template>
<view>
<movable-area>
<movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease">
<view class="box"></view>
</movable-view>
</movable-area>
</view>
</template><style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
In the above code, we set the moving direction of the movable-view component to "all", the moving damping to 50, the moving friction to 0.5, the scaling to 1.5, and the animation effect to "ease".
3. Listen to events of the movable-view component
When using the movable-area component, we can also listen to the events of the movable-view component to achieve more interactive effects. Here are some commonly used events:
- touchstart: Triggered when the user starts touching the movable-view component.
- touchmove: Triggered when the user moves the finger on the movable-view component.
- touchend: Triggered when the user stops touching the movable-view component.
- change: Triggered when the position or size of the movable-view component changes. Here is a sample code that demonstrates how to listen to events of the movable-view component:
<template>
<view>
<movable-area>
<movable-view @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @change="onChange">
<view class="box"></view>
</movable-view>
</movable-area>
</view>
</template><script>
export default {
methods: {
onTouchStart() {
console.log("touchstart");
},
onTouchMove() {
console.log("touchmove");
},
onTouchEnd() {
console.log("touchend");
},
onChange() {
console.log("change");
}
}
}
</script><style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
In the above code, we listened to the four events of the movable-view component and output the corresponding information on the console. Sample code:
<template>
<view>
<movable-area>
<movable-view direction="all" damping="50" friction="0.5" scale="1.5" animation="ease" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @change="onChange">
<view class="box"></view>
</movable-view>
</movable-area>
</view>
</template><script>
export default {
methods: {
onTouchStart() {
console.log("touchstart");
},
onTouchMove() {
console.log("touchmove");
},
onTouchEnd() {
console.log("touchend");
},
onChange() {
console.log("change");
}
}
}
</script><style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
The above is the detailed teaching of Uniapp using the movable-area component, I hope it will be helpful to everyone.