movable-view

最新推荐文章于 2025-05-26 20:09:54 发布

原创

最新推荐文章于 2025-05-26 20:09:54 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

movable-view 是一款可移动的视图容器，适用于移动端，允许用户在页面中进行拖拽滑动操作。它必须放置在 scroll-view 组件内作为其直接子节点才能生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

movable-view

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

属性名	作用	默认值
direction	设置movable-view的移动方向	属性值有all、vertical、horizontal、none
inertia	movable-view是否带有惯性	true/false 默认是false
out-of-bounds	超过可移动区域后，movable-view是否还可以移动	true/false 默认是false
x	定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画	number
y	定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画	number
damping	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	number 默认是20
friction	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	number默认是2
bindchange	拖动过程中触发的事件，event.detail = {x, y, source}

例子：

<view class='title-line'>movable</view>

<movable-area class="moveArea">
  <movable-view class='moveView' 
                x="{
   
   {x}}" 
                y="{
   
   {y}}" 
                damping="40"<