我爱小程序
| 问题模块 | 框架类型 | 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;来确定的，因此添加这些属性且设置对应值就能解决之前的问题
网友回复
今天仔细看了setData前后，WXML前后的差别，发现movable-view实际上位置是通过transform: translateX(100px) translateY(400px) translateZ(0px) scale(1); transform-origin: center center 0px;这么一句话来控制的，因此在模板中我添加了这样的一句话，于是位置信息不会重置。具体代码见解决方案。