movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。 属性说明 除了基本事件外,movable-view提供了两个特殊事件 movable-view 必须设置width和height属性,不设置默认为10px movable-view 默认为绝对定位,top和left属性为0px 当movable-view小于movable-area时,movable-view的移动范围是在movable-...
movable-area: 可拖动区域。即手指/鼠标按住 movable-view拖动或双指缩放,但拖不出 movable-area规定的范围。 movable-area 必须设置width,height属性,如果不设置的话默认为 10px。 scale-area默认值为false,当里面的movable-view设置支持双指缩放时,设置此值可将手势生效区域修改为整个 movable-area。 movable-view...
缩放是根据movable-view的中心开始缩放的 ,所以每次移动 图片位置之后 中心点就会改变 但是缩放的偏移量 就是(最新的宽高 - 上一次缩放过的宽高)/ 2 //偏移量letoffsetX=((initialWidth*scale)-(initialWidth*this.scale))/2;letoffsetY=((initialHeight*scale)-(initialHeight*this.scale))/2; 初始的x,y...
使用uniapp过程中发现movable-area/movable-view配合是极好的,可以做可拖动控件,免去自己做触摸事件的麻烦。 希望提供的能力 movable-area/movable-view的原生实现
今天客户提了一个需求,想做一个页面,页面中放一张底图,可以滑动这张底图,也可以放大显示这个底图,形式上类似百度地图的操作一样。找了找资料,发现使用movable-area和movable-view配合起来使用能实现这样的效果。示例代码如下: 一、代码: <template><viewclass="my-page-wrap"><movable-areaclass="map-area-wrap"...
简介: 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{// 可移动的范围height:100vh;width:750rpx;top:0;position:fixed;pointer-events:none;//鼠标事件可以渗透}.movable-view{width:140rpx;// 按钮大小height:140rpx;pointer-events:auto;//恢复鼠标事件}.float-btn{width:140rpx;height:140rpx;line-height:140rpx;text-align:center;background:...