微信小程序新增的拖动组件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 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
第八节--访问方式
2006/11/16 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python模块之re正则表达式详解
2017/02/03 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python常用编译器原理及特点解析
2020/03/23 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
腾讯广告词
2014/03/19 职场文书
师德建设实施方案
2014/03/21 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
调任通知
2015/04/21 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
Django显示可视化图表的实践
2021/05/10 Python
python基础之错误和异常处理
2021/10/24 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery