微信小程序移动拖拽视图-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 Prototype 对象扩展
May 15 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
详解vue-cli3使用
2018/08/14 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python callable内置函数原理解析
2020/03/05 Python
django 多数据库及分库实现方式
2020/04/01 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python Matplotlib模块的使用
2020/09/16 Python
用python对excel查重
2020/12/07 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
小小商店教学反思
2014/04/27 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
个园导游词
2015/02/04 职场文书
社会实践单位意见
2015/06/05 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python