2112

components/share-popup/share-popup.vue

@@ -256,6 +256,7 @@
 <template>
   <uni-popup
     ref="refPopup"
+    safeArea
     type="bottom"
     background-color="#ffffff"
     borderRadius="16rpx 16rpx 0 0"
@@ -279,17 +280,21 @@
         {{ isMultiple ? '关闭' : '取消' }}
       </text>
       <text class="text">选择聊天</text>
-      <text
-        v-if="isMultiple"
-        :class="{ 'on-btn': !selectedList.length > 0 }"
-        class="multiple-btn"
-        @click="onConfirm(1)"
-      >
-        {{
-          `下一步 ${selectedList.length > 0 ? selectedList.length : ''}`
-        }}
-      </text>
-      <text v-else class="multiple" @click="isMultiple = true">多选</text>
+      <view>
+        <text
+          v-if="isMultiple"
+          :class="{ 'on-btn': !selectedList.length > 0 }"
+          class="multiple-btn"
+          @click="onConfirm(1)"
+        >
+          {{
+            `下一步 ${selectedList.length > 0 ? selectedList.length : ''}`
+          }}
+        </text>
+        <view v-else class="multiple" @click="isMultiple = true">
+          多选
+        </view>
+      </view>
     </view>
     <!-- 选项数据 -->
     <view v-if="selectedList.length > 0" class="option-box">
@@ -310,12 +315,8 @@
       </view>
     </view>
 
-
     <!-- 列表 -->
-    <view class="list-box">
-      <!-- 群聊列表 ================ -->
-      {{ groupList.length }} == {{ friendList.length }}
-    
+    <view scroll-y="true" class="list-box">
       <view
         v-for="(item, index) in groupList"
         :key="index"
@@ -410,6 +411,13 @@
     .close {
       font-size: 28rpx;
     }
+    .text {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 32rpx;
+      font-weight: 500;
+    }
     .multiple {
       font-size: 28rpx;
     }
@@ -425,19 +433,11 @@
     .on-btn {
       background: #b7b7b7;
     }
-    .text {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      font-size: 32rpx;
-      font-weight: 500;
-    }
   }
 
   .list-box {
     padding: 22rpx 24rpx;
     height: 46vh;
-    background: red;
     overflow-y: auto;
     .item-box + .item-box {
       margin-top: 12rpx;