微信小程序移动拖拽视图-movable-view实例详解


Posted in Javascript onAugust 17, 2019

JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候。多个touch需要在

changedTouches

数组中查找

redclcik:function(sender){
  wx.showModal({
   title: '点击红色',
   content: '',
  })
  console.log(sender);
 },
 redmove:function(sender){
   console.log(sender);
  // console.log(sender.changedTouches[0].pageX);
  
 },

.wxss内容:

<view>移动视图控件</view>
<!-- 创建一个move-area -->
<movable-area style="width:100%;height:1000rpx;background:gray;">
 <!-- 可以移动view 黄色、宽高100rpx-->
 <movable-view style='background:yellow;width:100rpx;height:100rpx;' direction="all">
 </movable-view>
 <!-- 可以移动view 红色、宽高100rpx-->
 <movable-view style='background:red;width:100rpx;height:100rpx;' direction="all" bindtap='redclcik' bindtouchmove='redmove'>
 </movable-view>
</movable-area>

视图效果:

微信小程序移动拖拽视图-movable-view实例详解

总结

以上所述是小编给大家介绍的微信小程序移动拖拽视图-movable-view实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
微信小程序框架的页面布局代码
Aug 17 #Javascript
vue实现滑动到底部加载更多效果
Oct 27 #Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php 魔术方法使用说明
2009/10/20 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python:slice与indices的用法
2019/11/25 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
《分一分》教学反思
2014/04/13 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang