需要做个浮在scroll-view之上的button.尝试了一下.
上GIF:
Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.
1.index.wxml
- <image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">
- </image>
简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置
2.index.js
-
-
- var app = getApp()
- Page({
- data: {
- ballBottom: 240,
- ballRight: 120,
- screenHeight: 0,
- screenWidth: 0,
- },
- onLoad: function () {
- <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)
-
- if (pageX < 30) return;
- if (pageX > this.data.screenWidth - 30) return;
- if (this.data.screenHeight - pageY <= 30) return;
- if (pageY <= 30) return;
-
- 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;
- }
http://blog.csdn.net/qq_31383345