微信小程序移动拖拽视图-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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
浅谈Vue数据响应
Nov 05 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
编写一个javascript元循环求值器的方法
Apr 14 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
php分割合并两个字符串的函数实例
2015/06/19 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python中global用法实例分析
2015/04/30 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
DNA测试:Orig3n
2019/03/01 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
J2EE系统只能是基于web
2015/09/08 面试题
工厂门卫岗位职责范本
2014/04/04 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android