讲述小程序之组件视图容器之movable-area与movable-view

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 讲述小程序之组件视图容器之movable-area与movable-view

movable-area(可移动、放大区域,父组件)

image.png

·scale-area (默认值:false)解释:当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area

movable-view(可移动、放大区域,子组件)

image.png

常用的几个属性

·direction                解释:movable-view的移动方向,属性值有all、vertical、horizontal、none

·inertia  (默认值:false)                    解释:movable-view是否带有惯性

·scale        (默认值:false)                解释:是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内


wxml:

<movable-areaclass="lqj5"><movable-viewdirection="all"out-of-bounds="true"scale="true"></movable-view></movable-area>

wxss:

movable-view{
height: 200rpx;
width: 200rpx;
background-color: darkorange;
}
.lqj5{
background-color: darkmagenta;
width: 500rpx;
height: 500rpx;
}

展示效果:

23.gif
















目录
相关文章
|
22天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
2月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
2月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
2月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
2月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
2月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
【微信小程序】-- 自定义组件 - 数据监听器 (三十四)
|
2月前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
|
2月前
|
小程序
【微信小程序】-- 其它常用组件介绍 -- button & image(八)
【微信小程序】-- 其它常用组件介绍 -- button & image(八)