微信小程序新增的拖动组件movable-view使用教程


Posted in Javascript onMay 20, 2017

前言

小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图组件的功能。

此次的更新中,也新增了一个UI组件,它就是视图组件movable-view,它需要配合movable-area来一起使用。简单来说,它就是一个支持在指定区域内可以拖动内容的容器。

我们来看一个简单的示例:

<movable-area style="height: 200px;width: 200px;background: red;">
 <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
 </movable-view>
</movable-area>

微信小程序新增的拖动组件movable-view使用教程

界面

我们用movable-area设定了一个200x200大小的一个可拖动区域(红色),然后在这个区域内放置了一个大小为50x50的可以拖动内容movable-view(蓝色),这个可拖动内容的direction设置为all,表示可以在任意方向上进行拖动。

微信小程序新增的拖动组件movable-view使用教程
拖动演示

在一个movable-area标签中,其实不止可以放一个movable-view,它支持放置多个movable-view,看以下例子:

<movable-area style="height: 200px;width: 200px;background: red;">

 <!--蓝色任意方向拖动的内容-->
 <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
 </movable-view>

 <!--黄色只能横向拖动的内容-->
 <movable-view direction="horizontal" style="height: 20px; width: 50px; background: yellow;">
 </movable-view>

</movable-area>

微信小程序新增的拖动组件movable-view使用教程

界面2

微信小程序新增的拖动组件movable-view使用教程

拖动演示2

movable-view的direction属性支持以下四个值:

  • all - 任意方向拖动
  • vertical - 纵向拖动
  • horizontal - 横向拖动
  • none - 不能拖动

前3个值好理解。如果direction设置为最后这个none,则只能依靠设置x,y属性值来为它进行在movable-area中的定位:

<movable-area style="height: 200px;width: 200px;background: red;">
 <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;">
 </movable-view>
</movable-area>

这段代码一运行,蓝色的movable-view就显示在了(50,50)的位置上了:

微信小程序新增的拖动组件movable-view使用教程

总结

好了,小程序的拖动组件的功能大致就这样简单的介绍一下,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
js 匿名调用实现代码
Jun 19 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
js简易版购物车功能
Jun 17 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vuex存值与取值的实例
Nov 06 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
深入理解Angularjs中$http.post与$.post
May 19 #Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 #Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 #Javascript
微信小程序表单验证错误提示效果
May 19 #Javascript
微信小程序实现滑动删除效果
May 19 #Javascript
You might like
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
详解jQuery中的事件
2016/12/14 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
js实现一个简易计算器
2020/03/30 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python用户管理系统
2018/03/13 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
基于FME使用Python过程图解
2020/05/13 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
函授药学自我鉴定
2014/02/07 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
党性分析自查总结
2014/10/14 职场文书
人与自然的观后感
2015/06/18 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
女性励志书籍推荐
2019/08/19 职场文书
Python Numpy库的超详细教程
2022/04/06 Python