微信小程序移动拖拽视图-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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
react-intl实现React国际化多语言的方法
Sep 27 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中的超全局变量
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python断言assert的用法代码解析
2018/02/03 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
python中使用np.delete()的实例方法
2021/02/01 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
大学生心理活动总结
2014/07/04 职场文书
个人合伙协议书范本
2014/10/14 职场文书
先进个人申报材料
2014/12/30 职场文书