微信小程序 拖拽监听功能:
在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下。
需要做个浮在scroll-view之上的button.尝试了一下.
上GIF:
Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.
1.index.wxml
../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent"> </image>
简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置
2.index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { ballBottom: 240, ballRight: 120, screenHeight: 0, screenWidth: 0, }, onLoad: function () { [javascript] view plain copy <span style="white-space:pre"> </span>//获取屏幕宽高 var _this = this; wx.getSystemInfo({ success: function (res) { _this.setData({ screenHeight: res.windowHeight, screenWidth: res.windowWidth, }); } }); }, ballMoveEvent: function (e) { console.log('我被拖动了....') var touchs = e.touches[0]; var pageX = touchs.pageX; var pageY = touchs.pageY; console.log('pageX: ' + pageX) console.log('pageY: ' + pageY)
//防止坐标越界,view宽高的一般 if (pageX < 30) return; if (pageX > this.data.screenWidth - 30) return; if (this.data.screenHeight - pageY <= 30) return; if (pageY <= 30) return;
//这里用right和bottom.所以需要将pageX pageY转换 var x = this.data.screenWidth - pageX - 30; var y = this.data.screenHeight - pageY - 30; console.log('x: ' + x) console.log('y: ' + y) this.setData({ ballBottom: y, ballRight: x }); },
//点击事件 ballClickEvent: function () { console.log('点击了....') } })
3.index.wxss
这里需要设置z-index
.image-style{ position: absolute; bottom: 240px; right: 100px; width: 60px; height: 60px; z-index: 100; }
本文向大家介绍微信小程序实现拖拽功能,包括了微信小程序实现拖拽功能的使用技巧和注意事项,需要的朋友参考一下 总结 以上所述是小编给大家介绍的微信小程序实现拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文向大家介绍微信小程序移动拖拽视图-movable-view实例详解,包括了微信小程序移动拖拽视图-movable-view实例详解的使用技巧和注意事项,需要的朋友参考一下 JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候。多个touch需要在 changedTouches 数组中查找 .wxss内容: 视图效果: 总结 以上所述是小编给大家介绍的微信小程序
本文向大家介绍微信小程序 flex实现导航实例详解,包括了微信小程序 flex实现导航实例详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序 flex实现导航实例详解 实现示意: 1.链接顶部内边距,留出圆形图标的位置。 2.伪元素:before绘制圆形。 3.圆形中添加图标。 4.左右外边距控制间距,及促使在需要的地方换行。 wxml: wxss: 如果需要字数限制的话: 感谢阅读,希望
本文向大家介绍微信小程序 Image组件实例详解,包括了微信小程序 Image组件实例详解的使用技巧和注意事项,需要的朋友参考一下 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定。 重点属性: 三种缩放模式 九种剪切方式 wxml 相关文章: hello WeApp
本文向大家介绍微信小程序 navigation API实例详解,包括了微信小程序 navigation API实例详解的使用技巧和注意事项,需要的朋友参考一下 演示效果也看到了小程序也就提供这几个处理导航控制。值得注意的是只能同时导航五个页面 主要属性: 导航条一些方法 wx.setNavigationBarTitle(object) 设置导航条的Title 导航标题可以通过三种方式设置,第一种是
本文向大家介绍微信小程序 实战小程序实例,包括了微信小程序 实战小程序实例的使用技巧和注意事项,需要的朋友参考一下 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块。这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start。 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading