微信小程序多个view上有同一个方法,点击这个方法对应view会向上平移
时间: 2023-08-22 15:09:33 浏览: 129
可以通过 `event.currentTarget` 获取当前触发事件的组件,然后在事件处理函数中根据当前组件的位置进行平移。
以下是一个示例代码,实现了多个view上有同一个方法,点击这个方法对应view会向上平移的效果:
```html
<view class="container">
<view class="box" bindtap="moveUp">我是第一个view</view>
<view class="box" bindtap="moveUp">我是第二个view</view>
<view class="box" bindtap="moveUp">我是第三个view</view>
</view>
```
```javascript
Page({
moveUp: function(event) {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
})
var currentTarget = event.currentTarget
var offsetTop = currentTarget.offsetTop // 获取当前组件的上边界距离父容器顶部的距离
animation.translateY(-offsetTop).step() // 向上平移
currentTarget.animation = animation.export() // 将动画对象保存到当前组件的属性中
this.setData({
['boxs[' + event.currentTarget.dataset.index + '].animation']: animation.export() // 更新对应组件的动画状态
})
},
data: {
boxs: [
{
animation: {}
},
{
animation: {}
},
{
animation: {}
}
]
}
})
```
在上面的示例代码中,我们将所有的view都设置了相同的类名 `.box`,并在每个view上绑定了 `bindtap` 事件。在事件处理函数中,通过 `event.currentTarget` 获取当前触发事件的组件,然后根据当前组件的位置进行平移。同时,我们将每个组件的动画对象保存在 `boxs` 数组中,并在 `setData` 方法中更新对应组件的动画状态。
在 CSS 中,同样需要设置 `.box` 元素的 `position` 属性为 `absolute` 或 `fixed`,并且需要设置 `top` 和 `left` 属性来确定元素在页面中的位置。
```css
.container {
position: relative;
height: 100vh;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
```
阅读全文