微信小程序移动拖拽视图-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 相关文章推荐
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery聚合函数实例
May 21 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
JavaScript字符串对象
Jan 14 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
js new Date()实例测试
Oct 31 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获取网址的顶级域名函数代码
2012/09/24 PHP
php导出excel格式数据问题
2014/03/11 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
django-filter和普通查询的例子
2019/08/12 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
税务干部鉴定材料
2014/02/11 职场文书
开学典礼策划方案
2014/05/28 职场文书
护理专业求职信
2014/06/15 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
公司员工培训管理制度
2015/08/04 职场文书
话题作文之诚信
2019/11/28 职场文书