传送门 一、movable-view 初体验 1.1 项目展示 movable-view,从字面意思上就可以理解,可以移动的组件,具体是什么样的呢,看下面的效果图 这是微信独有的一个模块,标签有两类 movable-area 是父容器 movable-view 是子容器 并且,子容器必须在父容器当中,否则不能移动 1.2 项目源码 index.wxml 代码语言:javascript...
movable-view 默认为绝对定位,top和left属性为0px 注意:movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。 #movable-area movable-view的可移动区域 属性名类型默认值说明最低版本 scale-areaBooleanfalse当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整...
视图容器,movable-view,movable-view,功能描述,属性说明,bindchange 返回的 source 表示产生移动的原因,Bug & Tip
Tip:movable-view 需要在 CSS 中设置 width 和 height 属性;若不设置,默认为 10px 。 Tip:movable-view 默认为绝对定位,top 和 left 属性为 0px 。 Tip:当 movable-view 的范围小于 movable-area 时,movable-view 的移动范围是在 movable-area 内。 Tip:当 movable-view 的范围大于 movable-area 时,movab...
可移动的视图容器,在页面中可以拖拽滑动.movable-view必须在 movable-area可移动视图区域 组件中,并且必须是直接子节点,否则不能移动. 重要 movable-view必须设置 width和 height属性,不设置默认为 10px. movable-view默认为绝对定位(请不要修改),top和 left属性为 0px. 当 movable-view小于 movable-area时,...
movable-view 可移动的视图容器,在页面中可以拖拽滑动 movable-view属性 注意:movable-view必须在组件中,并且必须是直接子节点,否则不能移动。 movable-area movable-view 的可移动区域 注意:movable-area 必须设置width和height属性,不设置默认为10px 当movable-view小于movable-area时,movable-view的移动范围是在movabl...
movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。 属性 名称 类型 默认值 必填 描述 direction string none 否 movable-view的移动方向,属性值有all、vertical、horizontal、none。 inertia boolean false 否 movable-view是否带有惯性。
此次的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用。简单来说,它就是一个支持在指定区域内可以拖动内容的容器。我们来看一个简单的示例: 代码语言:javascript 复制 <movable-area style="height: 200px;width: 200px;background: red;"><movable-view direction="...
movable-area表示元素可移动的区域,它决定元素移动的区域范围 movable-view表示可移动的视图容器,它决定了什么元素可以移动 使用上要求movable-view必须是movable-area的直接子节点,否则不能移动。 这两个组件对于比较常规的可拖拽移动产品需求可以轻松应对,但是针对一些稍微复杂的需求,可能需要对他们的用法原理要进一步掌握...
<movable-areaclass="myMovableStyle"><movable-viewclass="myMvableView"x="{{x}}"y="{{y}}"direction="all"out-of-bounds>movableView</movable-view></movable-area> 有惯性移动 效果图: .wxml 在movable-view里增加inertia实现 <movable-areaclass="myMovableStyle"><movable-viewclass="myMvableView...