微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 3.实现代码 代码已经进行了最简化处理
简介: 【微信小程序-原生开发】列表 - 拖拽排序(官方组件 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}}" ...
微信小程序 -- 基于 movable-view 实现拖拽排序 项目基于colorui样式组件ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 3.实现代码 代码已经进行了最简化处理 图中效果实现...
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法),实现逻辑详见代码的注释。
// 2.拖拽时,更换位置(重新计算-高度累积计算) // 注意点(总高度不够时,会乱排序) // 初始化 this.list = [{ id: 0, y: 0, itemHeight: 100, data: [{ name: '测试0-1' }, { name: '测试0-2' } ] }, { id: 1, y: 100, ...
小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图组件的功能。 此次的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用。简单来说,它就是一个支持在指定区域内可以拖动内容的容器...
背景: 最近项目中使用到movable-view来做一个拖拽排序的功能,等到功能都实现完成后到真机测试发现,拖拽动画在Android端存在严重的卡顿掉帧,及其不跟手,但是在IOS端却挺流畅。查阅Google发现也有相同的小伙伴有类似问题:小程序的移动拖动图片安卓太过卡顿如何解决 ...
拖拽组件在屏幕中移动的实现拖拽组件效果可通过 movable-area 可移动视图区域实现,具体参考 小程序实现拖拽排序。 大纲 movable-area组件是否支持scale-area 拖拽组件在屏幕中移动的实现 上一篇 cover-view、cover-image组件常见问题 下一篇 swiper-item组件点击事件不生效 ...
文章 2024-07-04 来自:开发者社区 【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法) index.wxml <movable-area style="width: 100%;height:{{(dataList.length)*60}}px;"> <movable-view class="itemBox" style="z-index:{{inde... ...
微信小程序的UI精讲 一、布局和样式基础 格子与格子之间的距离 二、组件使用 1.试图容器: cover-image:覆盖在原生组件之上的图片视图 cover-view:覆盖在原生组件之上的文本视图 movable-view:可移动的视图容器,在页面中可以拖拽滑动。注:movable-view必须在 movable-area组件中,并且必须是直接子节点,否则不能移动。