微信小程序移动拖拽视图-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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
学历公证书范本
2014/04/09 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书