收藏
回答

this.setData更新movable-view数据,组件位置重置

问题模块 框架类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 movable-view 工具 6.6.5 1.9.93




Bug

* Bug 表现是什么?预期表现是什么?

this.setData更新movable-view数据,movable-view组件位置重置(并没有修改x,y值);预期表示是this.setData更新movable-view数据,组件的位置不会改变

* 如何复现?

.wxml

<movable-area style="height: 1000rpx; width: 100%; background: red;" scale-area>

<block wx:for="{{imgsk}}" wx:key>

<movable-view style="width:{{item.width}};height:{{item.height}};background:{{item.bgcolor}};"x="{{item.x}}" y="{{item.y}}" direction="all"  damping="99999999999" data-ind="{{item.ind}}">

movable-view>

block>

movable-area>

<view style="width:120rpx;height:60rpx;background:yellow" catchtap="more">

<text>点我text>

view>


.js

Page({

data:{

imgsk: [

{

img_src: '/images/yizi.png',

x: 200,

y: 120,

width: '80rpx',

height: '80rpx',

bgcolor: 'blue'

},

{

img_src: '/images/yizi.png',

x: 100,

y: 400,

width: '80rpx',

height: '80rpx',

bgcolor: 'green'

}

]

},

more:function(){

// var inde = this.data.imgsk.length

// this.data.imgsk.push({

//   img_src: '/images/yizi.png',

//   x: 10,

//   y: 10,

//   width: '80rpx',

//   height: '80rpx',

//   bgcolor: 'black'

// });

var imgskc = this.data.imgsk;

this.setData({

imgsk: imgskc

});

}


})




* 解决方式


修改.wxml为以下代码

<movable-area style="height: 1000rpx; width: 100%; background: red;" scale-area>

<block wx:for="{{imgsk}}" wx:key>

<movable-view style="width:{{item.width}};height:{{item.height}};background:{{item.bgcolor}};transform: translateX({{item.x+'px'}}) translateY({{item.y+'px'}}) translateZ(0px) scale(1); transform-origin: center center 0px;"x="{{item.x}}" y="{{item.y}}" direction="all"  damping="99999999999" data-ind="{{item.ind}}">

movable-view>

block>

movable-area>

<view style="width:120rpx;height:60rpx;background:yellow" catchtap="more">

<text>点我text>

view>


说明:

位置信息最终是通过transform: translateX({{item.x+'px'}}) translateY({{item.y+'px'}}) translateZ(0px) scale(1); transform-origin: center center 0px;来确定的,因此添加这些属性且设置对应值就能解决之前的问题







最后一次编辑于  2018-03-16  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

1 个回答

  • NANA
    NANA
    2018-03-16

    今天仔细看了setData前后,WXML前后的差别,发现movable-view实际上位置是通过transform: translateX(100px) translateY(400px) translateZ(0px) scale(1); transform-origin: center center 0px;这么一句话来控制的,因此在模板中我添加了这样的一句话,于是位置信息不会重置。具体代码见解决方案。


    2018-03-16
    赞同 11
    回复