微信小程序移动拖拽视图-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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
js解决movebox移动问题
Mar 29 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
vue路由跳转传参数的方法
May 06 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python获取网页状态码示例
2014/03/30 Python
python下10个简单实例代码
2017/11/15 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
selenium+python环境配置教程详解
2019/05/28 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
自我介绍演讲稿
2014/01/15 职场文书
保密普查工作实施方案
2014/02/25 职场文书
会计岗位说明书
2014/07/29 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年工商所工作总结
2015/05/21 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android