一、movable-view 初体验 1.1 项目展示 movable-view,从字面意思上就可以理解,可以移动的组件,具体是什么样的呢,看下面的效果图 这是微信独有的一个模块,标签有两类 movable-area 是父容器 movable-view 是子容器 并且,子容器必须在父容器当中,否则不能移动 1.2 项目源码 index.wxml 代码语言:javascript 复制 <...
小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图组件的功能。 此次的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用。简单来说,它就是一个支持在指定区域内可以拖动内容的容器。
微信小程序movable-view组件官方文档传送门 Learn 一、moveable-view组件 一、movable-view组件 direction:movable-view的移动方向,属性值有all、vertical、horizontal、none【默认值none】 使用<movable-view>组件时必须和<movable-area>组件一起用,<movable-area>规定了可移动组件移动的范围 index.wxml index.css inerti...
direction是movable-view的移动方向,属性值默认的是none,属性值有all,vertical,horizontal等,inertia是movable-view是否带有惯性,即在拖动事件取消后是否还会往取消前的方向滑动一小段,out-of-bounds指的是当拖拽的元素超过移动的区域后,movable-view是否还可以移动。 movable-area指的是当里面的movable-view设置为支持双...
先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注: "当movable-view小于movable-area时,movable-view的移动范围是在movab...
简介: 【微信小程序-原生开发】列表 - 拖拽排序(官方组件 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开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址: https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注: "当movable-view小于movable-area时,movable-view的移动范围是在mov...
微信小程序 – 基于 movable-view 实现拖拽排序 项目基于colorui样式组件ColorUI组件库 (color-ui.com) 1.实现效果 2. 设计思路 movable-view 绑定块移动事件的 块ID,块移动的坐标 移动结束后触发moveEnd事件,根据Y坐标对对象数组进行排序 根据排序结果重置块位置 ...
微信小程序 movable-view movable-view 是一个可移动的视图容器,在页面中可以拖拽滑动。 1.属性: 2.用法: 简单示例1: [html]view plaincopy <movable-areastyle="height: 300rpx;width: 300rpx;background: blue;"> <movable-viewdirection="all"style="height: 100rpx; width: 100rpx; background: yellow;...
一个简单的小程序图片裁剪页面,以实现按照指定比例裁剪图片等功能。 需要做一个页面以实现图片按照指定比例缩放和裁切的功能。然后发现微信小程序刚好自带 movable-area/movable-view 组件,可以实现缩放和平移等功能。 以受控方式使用 movable-view 组件是真的坑。但终于成功了… 先放一下图片裁剪界面截图。实现了拖动...