基础库 1.2.0 开始支持,低版本需做兼容处理
movable-view
的可移动区域
注意:movable-area 必须设置width和height属性,不设置默认为10px
基础库 1.2.0 开始支持,低版本需做兼容处理
可移动的视图容器,在页面中可以拖拽滑动
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
direction | String | none | movable-view的移动方向,属性值有all、vertical、horizontal、none |
inertia | Boolean | false | movable-view是否带有惯性 |
out-of-bounds | Boolean | false | 超过可移动区域后,movable-view是否还可以移动 |
x | Number | 定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画 | |
y | Number | 定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画 | |
damping | Number | 20 | 阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快 |
friction | Number | 2 | 摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值 |
movable-view 必须设置width和height属性,不设置默认为10px
movable-view 默认为绝对定位,top和left属性为0px
当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)
注意:movable-view必须在<movable-area/>
组件中,并且必须是直接子节点,否则不能移动。
示例代码:
<view class="section">
<view class="section__title">movable-view区域小于movable-area</view>
<movable-area style="height: 200px;width: 200px;background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
</view>
<view class="section__title">movable-view区域大于movable-area</view>
<movable-area style="height: 100px;width: 100px;background: red;" direction="all">
<movable-view style="height: 200px; width: 200px; background: blue;">
</movable-view>
</movable-area>
</view>
Page({
data: {
x: 0,
y: 0
},
tap: function(e) {
this.setData({
x: 30,
y: 30
});
}
})
live-player基础库 1.7.0 开始支持,低版本需做兼容处理。实时音视频播放(v2.9.1 起支持同层渲染)。暂只针对国内主体如下类目...
ad-custom基础库 2.10.4 开始支持,低版本需做兼容处理。原生模板 广告。属性类型默认值必填说明最低版本unit-idstring是广告单...
UDPSocketwx.createUDPSocket()基础库 2.7.0 开始支持,低版本需做兼容处理。创建一个 UDP Socket 实例。使用前请注意阅读相关说...
关键词:状态机,售卖机有限状态机(Finite-StateMachine,FSM),简称状态机,是表示有限个状态以及在这些状态之间的转移和动作...
在本节中,我们将学习如何使用不同的传感器连接我们的Arduino板。我们将讨论以下传感器: 湿度传感器(DHT22)温度传感器(LM35...
desktopCapturer模块可用来获取可用资源,这个资源可通过getUserMedia捕获得到.// 在渲染进程中.var desktopCapturer = require(...
设备模式移动仿真随着移动用户的增长,移动端友好的响应式网站设计变得越来越重要。网页的内容要在不同的设备以及各种网络环境下...
凹凸图用于使用Measure值之一来比较两个尺寸。它们对于探索时间维度或地方维度或与分析相关的其他维度的值的变化非常有用。凹凸...
项目脚手架grunt-initgrunt-init是一个用于自动创建项目脚手架的工具。它会基于当前工作环境和你给出的一些配置选项构建一个完整...
grunt.optionGrunt的option API被用来在多个任务之间共享参数、访问命令行中设置的参数。一个简单的案例就是为一个目标(target...