movable-view
movable-view在拖动的时候，边拖动边动态设置x，y坐标，之后控件会自己位移一段距离。代码如下
<movable-area style="height: 400px;width: 100%;background: red;"> <block wx:for="{{list}}"> <movable-view data-index='{{index}}' bindchange='move' style="height: 50px; width: 50px; background: blue;"x="{{item.x}}" y="{{item.y}}" direction="all"> </movable-view> </block> </movable-area><button class="button-right" style="width:40%;" bindtap="tap">确认</button> |
Page({
/**
* 页面的初始数据
*/
data: {
list:[],
currentPage:0
},
move:function(e){
var dataset = e.target.dataset;
var Index = dataset.index;
this.data.list[Index].x = e.detail.x;
this.data.list[Index].y = e.detail.y;
this.setData({
list:this.data.list
})
console.log(this.data.list)
},
tap:function(e){
var sign = [
{
current:this.data.currentPage,
x:0,
y:0
}
]
this.setData({
list:this.data.list.concat(sign)
})
},
})
Page({ /** * 页面的初始数据 */ data: { list:[], currentPage:0 }, move:function(e){ var dataset = e.target.dataset; var Index = dataset.index; this.data.list[Index].x = e.detail.x; this.data.list[Index].y = e.detail.y; this.setData({ list:this.data.list }) console.log(this.data.list) }, tap:function(e){ var sign = [ { current:this.data.currentPage, x:0, y:0 } ] this.setData({ list:this.data.list.concat(sign) }) },}) |
强力驱动