在uniapp 项目中使用 movable-area 组件非常简单,只需要在页面的 .vue 文件中引入并使用该组件即可。通常,你会将 movable-area 组件作为父容器,包裹 movable-view 组件,然后通过设置 movable-view 组件的样式或属性来控制其移动行为。 4. 提供movable-area组件的常用属性和事件 常用属性 scale-area:是否缩放可移动...
movable-area: 可拖动区域。即手指/鼠标按住 movable-view拖动或双指缩放,但拖不出 movable-area规定的范围。 movable-area 必须设置width,height属性,如果不设置的话默认为 10px。 scale-area默认值为false,当里面的movable-view设置支持双指缩放时,设置此值可将手势生效区域修改为整个 movable-area。 movable-view...
</movable-view> </movable-area> data(){return{ movableHeight:1000, windowHeight:0, initY:0, dragY:0} }, onLoad() {this.windowHeight =uni.getSystemInfoSync().windowHeight;this.movableHeight = (this.windowHeight) *2; }, methods:{ movableChange(e) { let y=e.detail.y;this.dragY =y; }...
<view class="uni-title uni-common-mt">示例 1<text>\nmovable-view 区域小于 movable-area</text></view><movable-area><movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view></movable-area><view @tap="tap" class="uni-link uni-center uni-common-mt">点击...
简介: uniapp中movable-area放大缩小页面demo效果(整理) <template> <view class=""> <!-- 这个可以独立写-设置宽高就行 --> <movable-area scale-area style="width: 375rpx; height: 730rpx;"> <movable-view direction="all" out-of-bounds scale scale-min="1" scale-max="10"> <image mode=...
今天客户提了一个需求,想做一个页面,页面中放一张底图,可以滑动这张底图,也可以放大显示这个底图,形式上类似百度地图的操作一样。找了找资料,发现使用movable-area和movable-view配合起来使用能实现这样的效果。示例代码如下: 一、代码: <template><viewclass="my-page-wrap"><movable-areaclass="map-area-wrap"...
.movable-area{position:fixed;top:0;left:0;width:100%;height:100%;}.movable-view{color:#F00;position:relative;width:auto;height:auto;display:inline-block;} 可以看到,area 将整个页面都遮住了,现在出问题了,就是点击的时候,页面上的其他元素点不到,只能点到 area 上,这时候你能想到的估计就是 事件...
movable-area指代可拖动的范围,在其中内嵌movable-view组件用于指示可拖动的区域。 即手指/鼠标按住movable-view拖动或双指缩放,但拖不出movable-area规定的范围。 当然也可以不拖动,而使用代码来触发movable-view在movable-area里的移动缩放。 movable-view的规范另见下文。
可移动的视图容器,在页面中可以拖拽滑动或双指缩放。 movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。 引入组件即可 <template> <view> <TC-movable-area-view></TC-movable-area-view> </view> </template> 1. 2.
一,代码: <template><view><movable-areastyle="width:750rpx;height:750rpx;background: #ffff00;"><movable-viewstyle="width:120rpx;height:120rpx;border-radius:20rpx; background: #ff0000;":x= x:y=ydirection="all"@change="onChange"></movable-view></movable-area><buttonstyle="width:700rpx...