收藏
回答

多个 movable-view 删除赋值JSON元素后导致问题

使用 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
})

效果图:


回答关注问题邀请回答
收藏

2 个回答

  • LastLeaf
    LastLeaf
    2017-07-10

    你好,这种情况是因为你没有在wx:for的节点中指定wx:key。请尝试一下指定有效的wx:key,如果还有问题,可以在下面反馈,谢谢!

    2017-07-10
    有用
    回复 7
    • shy
      shy
      2018-05-26

      但我们按照上面这种写法实现时,移动某个元素,手指松开后小程序会自动一直触发change。而且,moveable-area上面的元素会不定时的自己移动变换位置,请问这个是什么原因啊

      2018-05-26
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-05-29回复shy

      能否提供一下代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)?我们这边看下是什么原因

      2018-05-29
      回复
    • 是诗闻呀
      是诗闻呀
      2018-05-30回复小程序技术专员-june

      你好!我是上面哪位同学的同事。因为我们的应用是嵌入在一个大的系统内的,出问题的代码要依赖于整个系统环境才可以运行,所以没有办法压缩到100K以下。我简述一下实现思路,我们就是根据一个数组动态渲染出很多个movable-view,然后当我们更改其中一个对象的某个属性时,再调用setData时,就会出现连续触发几百次change事件的情况。

      2018-05-30
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2018-05-30回复是诗闻呀

      修改了位置的话,movable-view有移动,那是会触发change事件,这是正常的。

      2018-05-30
      回复
    • 是诗闻呀
      是诗闻呀
      2018-05-31回复小程序技术专员-june

      嗨,你好!经过我们的调试,我们认为这是小程序框架触发change事件的机制有问题,是不是存在着某种队列机制:当我们在rotation事件处理函数里调用setData去改变数据的时候,在触摸动作发生时,只有rotate事件被触发,当停止触摸动作的时候,相应的change事件才会被依次触发。我们考虑,这可能是框架为了性能优化而采取的措施,但是这确实会导致某些场景下出现问题。

      2018-05-31
      回复
    查看更多(2)
  • Constexpr
    Constexpr
    2020-05-02

    2020年了解决了吗……

    我用的是Taro,指定了key还是有这个bug

    2020-05-02
    有用
    回复 1
    • 小迅
      小迅
      2021-07-03
      请问后来咋解决的啊?
      2021-07-03
      回复
登录 后发表内容