微信小程序新增的拖动组件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实现控制内容的向上向下滚动效果
Jun 26 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
js读写json文件实例代码
Oct 21 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
PHP 文件扩展名 获取函数
2009/06/03 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
详解webpack babel的配置
2018/01/09 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Python类的动态修改的实例方法
2017/03/24 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
什么是.net的Remoting技术
2016/07/08 面试题
幼儿园优秀教师事迹
2014/02/13 职场文书
买卖车协议书
2014/04/21 职场文书
土建施工员岗位职责
2014/07/16 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
迎新生标语大全
2014/10/06 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Hive日期格式转换方法总结
2022/06/25 数据库