微信小程序移动拖拽视图-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 表单之间的数据传递代码
Dec 04 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
简单的分页代码js实现
May 17 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
webpack3+React 的配置全解
Aug 21 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
js实现计算器功能
Aug 10 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 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 Memcache 中实现消息队列
2009/11/24 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
Python实现处理管道的方法
2015/06/04 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
详解Python3注释知识点
2019/02/19 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Django中间件基础用法详解
2019/07/18 Python
python numpy中cumsum的用法详解
2019/10/17 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python中return函数返回值实例用法
2020/11/19 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
会计岗位描述
2014/02/22 职场文书
历史学专业求职信
2014/06/19 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
2014年个人售房协议书
2014/10/30 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js