用movable-view实现可拖拽的列表元素

wxml: 


    
        ....
    

    ......

wxss:

.outer{
    width:100%;
    height:100%;
    padding: 0 8px;
}
.inner{
    display:inline-block;
    position:relative;
    width:unset;
    height:unset;
    margin:2px 1px 2px 2px;
}

效果类似于:

用movable-view实现可拖拽的列表元素_第1张图片

这样可以使元素不堆叠。 再设置movable-view的bind:change, bind:touchstart, bind:touchend方法监听移动即可。有时移动后不刷新内容显示,可以修改sequence的长度进行强制刷新。

 

不过movable-view的上下padding在内容有margin的时候貌似计算不准确,比如如果把外层的padding改成8px,则出现以下情况:

用movable-view实现可拖拽的列表元素_第2张图片

最后一行出线了错位情况。。不知道是什么原因。

你可能感兴趣的:(微信小程序)