动态弹窗算法

app.js

@@ -61,6 +61,9 @@ App({
   checkIsIos: function () {
     wx.getSystemInfo({
       success: (res) => {
+        // 设备显示区域的宽度，单位px
+        this.globalData.windowWidth = res.windowWidth
+        this.globalData.windowHeight = res.windowHeight
         if (res.system.search('iOS') != -1) {
           this.globalData.isIOS = true
         }
@@ -131,5 +134,7 @@ App({
     menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
     menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
     menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
+    windowWidth: 0,
+    windowHeight: 0
   }
 })

pages/message/index.js

@@ -1,9 +1,14 @@
 const app = getApp()
-
 Page({
   data: {
+    menu: {
+      show: true,
+      top: 0,
+      left: 0
+    }
   },
   onLoad(options) {
+
   },
   onShow() {
     if (typeof this.getTabBar === 'function') {
@@ -12,4 +17,24 @@ Page({
       })
     }
   },
+  onLongPress(e) {
+    console.log(e);
+    let {
+      currentTarget,
+      detail,
+      touches,
+      target
+    } = e
+    let remainingW = app.globalData.windowWidth - touches[0].clientX
+    let remainingH = app.globalData.windowHeight - touches[0].clientY
+    let wFlag = remainingW - 145 > 0
+    let hFlag = remainingH - 200 > 0
+    this.setData({
+      menu: {
+        show: true,
+        top: hFlag ? e.detail.y : e.detail.y - 100,
+        left: wFlag ? e.detail.x : e.detail.x - 135
+      }
+    })
+  }
 })

pages/message/index.less

@@ -106,5 +106,42 @@
         font-size: 24rpx;
       }
     }
+
+    .pressHover {
+      background-color: #f1f1f1;
+    }
+  }
+
+  .menu {
+    position: fixed;
+    width: 278rpx;
+    height: 180rpx;
+    padding: 0rpx 20rpx;
+    box-sizing: border-box;
+    border-radius: 24rpx;
+    background-color: white;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
+
+    view {
+      height: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon {
+      width: 30rpx;
+      height: 30rpx;
+      margin-right: 16rpx;
+    }
+
+    .menu-one {
+      border-bottom: 1rpx solid #D8D8D8;
+
+      .icon {
+        width: 22rpx;
+        height: 28rpx;
+      }
+    }
   }
 }

pages/message/index.wxml

@@ -1,10 +1,10 @@
 <navigationBar></navigationBar>
-<view class="messagePage" >
+<view class="messagePage">
   <view class="searchBox">
     <input class="input" maxlength="20" placeholder="查找昵称/学号/手机号" />
     <image src="/static/search-2.png" class="magnifier" />
   </view>
-  <scroll-view scroll-y="true" class="messageList">
+  <view class="messageList">
     <view class="base authority">
       <image src="/static/message3.png" class="avatar" />
       <view class="body">
@@ -31,7 +31,7 @@
         <view class="unread">10</view>
       </view>
     </view>
-    <view class="base user" wx:for="{{16}}" wx:key="index">
+    <view class="base user" wx:for="{{16}}" wx:key="index" bind:longpress="onLongPress" hover-class='pressHover'>
       <image src="/static/message3.png" class="avatar" />
       <view class="body">
         <view class="name textOver">帅气小男孩</view>
@@ -44,5 +44,14 @@
         <view class="unread">10</view>
       </view>
     </view>
-  </scroll-view>
+  </view>
+  <view class="menu" style="top:{{menu.top}}px;left:{{menu.left}}px">
+    <view class="menu-one">
+      <image src="/static/istop.png" class="icon" /> 置顶该聊天
+    </view>
+    <view>
+      <image src="/static/del.png" class="icon" />
+      删除该聊天
+    </view>
+  </view>
 </view>

pages/message/index.wxss

@@ -88,3 +88,34 @@
   color: #969696;
   font-size: 24rpx;
 }
+.messagePage .messageList .pressHover {
+  background-color: #f1f1f1;
+}
+.messagePage .menu {
+  position: fixed;
+  width: 278rpx;
+  height: 180rpx;
+  padding: 0rpx 20rpx;
+  box-sizing: border-box;
+  border-radius: 24rpx;
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
+}
+.messagePage .menu view {
+  height: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.messagePage .menu .icon {
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 16rpx;
+}
+.messagePage .menu .menu-one {
+  border-bottom: 1rpx solid #D8D8D8;
+}
+.messagePage .menu .menu-one .icon {
+  width: 22rpx;
+  height: 28rpx;
+}