movable-view 滑到指定位置回弹原位
时间: 2023-09-30 13:10:02 浏览: 197
可以使用小程序的 `animation` 功能来实现 `movable-view` 滑到指定位置后回弹原位的效果。具体实现步骤如下:
1. 在 `movable-view` 上绑定 `bindchange` 事件,用于监听 `movable-view` 的位置变化。
2. 在 `bindchange` 事件中获取 `movable-view` 的当前位置并通过 `animation` 创建一个动画实例。
3. 使用 `animation.translateX()` 或 `animation.translateY()` 方法将 `movable-view` 移动到指定位置。
4. 使用 `animation.step()` 方法将动画添加到动画队列中。
5. 在动画完成后使用 `animation.translateX()` 或 `animation.translateY()` 方法将 `movable-view` 移回原位。
6. 使用 `animation.step()` 方法将回弹动画添加到动画队列中。
7. 在回弹动画完成后使用 `this.setData()` 方法更新 `movable-view` 的位置,使其回到原位。
下面是一个简单的示例代码:
```
// wxml
<view class="wrapper">
<movable-view class="item" direction="horizontal" x="{{x}}" y="{{y}}" bindchange="onChange"></movable-view>
</view>
// js
Page({
data: {
x: 0,
y: 0
},
onChange: function (e) {
// 获取当前位置
let x = e.detail.x
// 创建动画实例
let animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease'
})
// 移动到指定位置
animation.translateX(300).step()
// 回弹回原位
animation.translateX(0).step()
// 更新 movable-view 的位置
this.setData({
x: x
})
// 播放动画
this.setData({
animation: animation.export()
})
}
})
```
以上示例中的 `animation` 实例是通过 `wx.createAnimation()` 方法创建的,`animation.translateX()` 方法用于移动 `movable-view` 的位置,`animation.step()` 方法用于将动画添加到动画队列中,`animation.export()` 方法用于导出动画数据。
阅读全文