微信小程序移动拖拽视图-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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 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
Yii框架form表单用法实例
2014/12/04 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python多进程并行代码实例
2019/09/30 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
python实现自动打卡的示例代码
2020/10/10 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
初中教师个人工作总结
2015/02/10 职场文书
暂住证证明
2015/06/19 职场文书
公司车辆管理制度
2015/08/04 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers