简介: 【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法) index.wxml <movable-area style="width: 100%;height:{{(dataList.length)*60}}px;"> <movable-view class="itemBox" style="z-index:{{index == moveId ? 2 : 1}}" wx:for="{{dataList}}" ...
4.参考文档 movable-view | 微信开放文档 (qq.com) 优化了一下代码,表现更顺滑一些。 index.wxml // index.wxml<viewclass="container"><movable-areaclass="area"style="height:{{AREA_HEIGHT}}px;"><movable-viewclass="item"style="height:{{ITEM_HEIGHT}}px; z-index:{{index == moveId ? 2...
优化前通过setState来动态更新x,y坐标值,从而利用movable-view达到拖拽效果。 进行优化 首先需要去除掉movable-view组件,因为无法使用movable-view和WXS来达到减少数据传输经过的路径次数,其次movable-view是用CSS做的动画,我们可以用position:absolute来代替,在WXS中动态设置top&left的值,达到movable-view的效果。 其次在...
<movable-area style="width: 100%;height:{{(dataList.length)*60}}px;"> <movable-view class="itemBox" style="z-index:{{index == moveId ? 2 : 1}}" wx:for="{{dataList}}" wx:key="index" y="{{item.y}}" direction="all" bind:change="moving" bind:touchend='moved' data-move...
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 ...
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 ...
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 ...
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 ...