微信小程序移动拖拽视图-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下过滤数组重复值的代码
Sep 10 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
vue element el-transfer增加拖拽功能
Jan 15 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
python获取磁盘号下盘符步骤详解
2019/06/19 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python+pygame实现坦克大战
2019/09/10 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python super函数使用方法详解
2020/02/14 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
接受捐赠答谢词
2014/01/27 职场文书
工地安全检查制度
2014/02/04 职场文书
创业计划书如何编写
2014/02/06 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
防暑降温通知书
2015/04/27 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书