需求场景
小程序在y轴方向 拖动 一小段距离
解决方案
1.监听 元素
2.绑定 点击 和 移动 事件
3.数据处理
代码
<view animation="{{item.animationData}}" wx:for="{{waitArr}}" wx:key="key" style='height: {{item.height}}px; {{item.width}}px;' class='item' id="{{index}}"> <view style='' data-id="{{index}}" bindtouchstart='waitAreaStart' bindtouchmove='waitAreaMove' bindmoveend="waitAreaMove"> </view> </view>
数据 循环渲染
点击 起始位置 获取 需要拖动 元素 id 进行识别
page.waitAreaStart = function(e) { _this.waitAreaMoveId = e.currentTarget.dataset.id _this.waitAreaMoveY = e.touches[0].pageY _this.waitAreaMoveState = true }
位移
不是 拖动 只是监听 手势
page.waitAreaMove = function(e) { if (!_this.waitAreaMoveState) { return false } let _id = _this.waitAreaMoveId let currentMoveY = e.touches[0].pageY if ((_this.waitAreaMoveY - currentMoveY) < 10) { return } let waitAreaArr = page.data.waitArr let puzzleArr = page.data.puzzleArr waitAreaArr[_id].y = (Math.random() * page.data.canvasWrapHeight).toFixed(2) waitAreaArr[_id].x = (Math.random() * page.data.canvasWrapWidth).toFixed(2) puzzleArr.push(waitAreaArr[_id]) waitAreaArr.splice(_id, 1) page.setData({ waitArr: waitAreaArr, puzzleArr: puzzleArr }) _this.waitAreaMoveState = false }
监听 y轴 偏移大小 判断
然后 数组 处理 把数组 中对应id 元素 删除
中间 遇到 一个 问题 是
bindtouchmove 事件 是 移动 一下 就 会 把 数组中对应的 元素 删除
所以 添加 了 一个 waitAreaMoveState 字段 监听 完成一次后 改变状态 不在 继续 向下执行