Browse Source

浮动按钮

zhaoxiaohai 3 years ago
parent
commit
2d298a7357

+ 31 - 0
pages/threadedTree/modules/FloatingButton/index.js

@@ -0,0 +1,31 @@
+Component({
+    data: {
+        top: "550px",
+        left: "345px",
+        viewHeight: null
+    },
+    lifetimes: {
+        attached: function () {
+            let that = this;
+            wx.getSystemInfo({
+                success: (res => that.setData({
+                    viewHeight: res.windowHeight
+                }))
+            });
+        },
+    },
+    methods: {
+        viewTouchMove(e) {
+            let left = e.touches[0].pageX;
+            if (left > 375) left = 375;
+            if (left < 0) left = 0;
+            let top = e.touches[0].pageY;
+            if (top < 0) top = 0;
+            if (top > this.data.viewHeight) top = this.data.viewHeight;
+            this.setData({
+                left: left + 'px',
+                top: top + 'px'
+            })
+        }
+    }
+})

+ 4 - 0
pages/threadedTree/modules/FloatingButton/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

+ 4 - 0
pages/threadedTree/modules/FloatingButton/index.scss

@@ -0,0 +1,4 @@
+.float-box{
+    position: absolute;
+    z-index: 9999999999;
+}

+ 3 - 0
pages/threadedTree/modules/FloatingButton/index.wxml

@@ -0,0 +1,3 @@
+<view class="float-box" style="top: {{top}}; left: {{left}};" bindtouchmove="viewTouchMove">
+    <slot></slot>
+</view>