使用 json 生成多个 movable-view, delete 某一个 json 元素后,导致这一个 json 元素后的 movable-view 定位出现问题。
js:
contentData = {id0: {id: "id0" ,x:1, y:2}} // 数据是类似这样的一个json |
wxml:
< movable-area class = "moveArea" style = "height: {{windowHeight}}px;width: {{windowWidth}}px;background: #ff0;" > < block wx:for = "{{contentData}}" wx:for-item = "i" > < movable-view class = "moveview" id = "{{i.id}}" x = "{{i.x}}" y = "{{i.y}}" >{{i.id}}</ movable-view > </ block > </ movable-area > |
效果图:
删除一个 json 元素后 id33 替代了原来 id32的位置,id34 替代了 id35的位置,以此类推
在 控制台的 wxml 中看见 movable-view 的 x 和 y 属性都没变了,但是自动生成的 style 却变成继承上一个元素的 style 了。
js:
delete this .data.contentData[e.target.id]; this .setData({ contentData: this .data.contentData }) |
效果图:
你好,这种情况是因为你没有在wx:for的节点中指定wx:key。请尝试一下指定有效的wx:key,如果还有问题,可以在下面反馈,谢谢!
但我们按照上面这种写法实现时,移动某个元素,手指松开后小程序会自动一直触发change。而且,moveable-area上面的元素会不定时的自己移动变换位置,请问这个是什么原因啊
能否提供一下代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)?我们这边看下是什么原因
你好!我是上面哪位同学的同事。因为我们的应用是嵌入在一个大的系统内的,出问题的代码要依赖于整个系统环境才可以运行,所以没有办法压缩到100K以下。我简述一下实现思路,我们就是根据一个数组动态渲染出很多个movable-view,然后当我们更改其中一个对象的某个属性时,再调用setData时,就会出现连续触发几百次change事件的情况。
修改了位置的话,movable-view有移动,那是会触发change事件,这是正常的。
嗨,你好!经过我们的调试,我们认为这是小程序框架触发change事件的机制有问题,是不是存在着某种队列机制:当我们在rotation事件处理函数里调用setData去改变数据的时候,在触摸动作发生时,只有rotate事件被触发,当停止触摸动作的时候,相应的change事件才会被依次触发。我们考虑,这可能是框架为了性能优化而采取的措施,但是这确实会导致某些场景下出现问题。
2020年了解决了吗……
我用的是Taro,指定了key还是有这个bug