微信小程序移动拖拽视图-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 相关文章推荐
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 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
SONY SRF-40W电路分析
2021/03/02 无线电
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
javaScript语法总结
2016/11/25 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
在python中实现对list求和及求积
2018/11/14 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
猫咪家具:CatsPlay
2018/11/03 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
2016年寒假家长评语
2015/10/10 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书