微信小程序新增的拖动组件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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python采集腾讯新闻实例
2014/07/10 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python装饰器用法实例总结
2018/02/07 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python实现学员管理系统
2019/02/26 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
元旦晚会邀请函
2014/01/27 职场文书
六一儿童节主持词
2014/03/21 职场文书
企业授权委托书范本
2014/04/02 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
员工教育培训协议书
2014/09/27 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang