微信小程序移动拖拽视图-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压缩工具下载集合
Mar 06 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
ReactRouter的实现方法
Jan 25 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
微信小程序框架的页面布局代码
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 Session会话超时时间设置方法
2014/06/10 PHP
php实现简单文件下载的方法
2015/01/30 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Django中Model的使用方法教程
2018/03/07 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python文件选择对话框的操作方法
2019/06/27 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
个人求职简历的自我评价范文
2013/10/09 职场文书
上课迟到检讨书
2014/01/19 职场文书
2014年药店工作总结
2014/11/20 职场文书
聘任证明怎么写
2015/03/02 职场文书
运动会通讯稿100字
2015/07/20 职场文书
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android