feat: 修改样式

src/mixins/index.js

@@ -8,6 +8,19 @@ import {
 import wx from 'weixin-js-sdk'
 // #endif
 
+// 插入样式
+function loadStyleString(css) {
+  var style = document.createElement("style");
+  style.type = "text/css";
+  try {
+    style.appendChild(document.createTextNode(css));
+  } catch (ex) {
+    style.styleSheet.cssText = css;
+  }
+  var head = document.getElementsByTagName('head')[0];
+  head.appendChild(style);
+}
+
 // 存放页面公用数据、方法...
 export default {
   data() {
@@ -32,7 +45,9 @@ export default {
         uni_tabbar_bottom[0].remove()
         var uni_page_wrapper = document.getElementsByTagName("uni-page-wrapper")
         if (uni_page_wrapper.length) {
-          uni_page_wrapper[0].setAttribute('style', 'height: calc(100% - env(safe-area-inset-bottom)) !important')
+          loadStyleString(
+            "uni-page-wrapper{height: calc(100% - env(safe-area-inset-bottom)) !important} uni-page-wrapper::after{height: env(safe-area-inset-bottom) !important}"
+          );
         }
       }
     }
@@ -92,4 +107,4 @@ export default {
       console.log('mixins');
     }
   }
-}
+}

src/pages/message/index.vue

@@ -1,31 +1,38 @@
 <template>
   <!-- #ifdef H5 -->
-  <view class="message_user">
+  <view class="message_view_page">
+    <!-- 横幅 -->
     <view class="gonggao">
       <view>防骗手册，为您保驾护航</view>
       <text class="iconfont icon-jinru"></text>
     </view>
-    <view class="message_user_aview" v-for="(item,index) in 5" :key="index" @click="goMsgView">
-      <view class="message_user_a">
-        <view class="message_user_info">
-          <!-- 头像 -->
-          <view class="user_head">
-
-          </view>
-          <view class="user_info">
-            <!-- 姓名 -->
-            <view class="user_name">张锋</view>
-            <!-- 聊天信息最后一条 -->
-            <view class="user_goods">商品很nice</view>
-            <!-- 聊天信息最后一条的时间 -->
-            <view class="user_time">2023-10-21 12：20：21</view>
-          </view>
-          <!-- 商品图片 -->
-          <view class="goods_img">
-
+    <!-- 聊天内容 -->
+    <view class="message_view">
+      <scroll-view class="message_view_scroll" :scroll-y="true" :scroll-top="scrollTop" @scrolltoupper="upper"
+        @scrolltolower="lower" @scroll="scroll">
+        <view class="message_user_aview" v-for="(item,index) in 15" :key="index" @click="goMsgView">
+          <view class="message_user_a">
+            <view class="message_user_info">
+              <!-- 头像 -->
+              <view class="user_head">
+
+              </view>
+              <view class="user_info">
+                <!-- 姓名 -->
+                <view class="user_name">{{item}}张锋</view>
+                <!-- 聊天信息最后一条 -->
+                <view class="user_goods">商品很nice</view>
+                <!-- 聊天信息最后一条的时间 -->
+                <view class="user_time">2023-10-21 12：20：21</view>
+              </view>
+              <!-- 商品图片 -->
+              <view class="goods_img">
+
+              </view>
+            </view>
           </view>
         </view>
-      </view>
+      </scroll-view>
     </view>
   </view>
   <!-- #endif -->
@@ -52,32 +59,22 @@
 </script>
 
 <style lang="scss" scoped>
-  .message_user {
-    width: 100%;
-    box-sizing: border-box;
-    padding-top: 80rpx;
-
-    .gonggao {
-      position: absolute;
-      width: 100%;
-      height: 80rpx;
-      background: #fff2d4;
-      top: 0;
-      z-index: 999;
-      left: 0;
-      right: 0;
-      box-sizing: border-box;
-      padding: 0 20rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 24rpx;
-      color: rgb(230, 138, 19);
+  page {
+    height: 100%;
+    overflow: hidden;
+  }
 
-      view {
-        color: rgb(230, 138, 19);
-      }
-    }
+  .message_view_page {
+    overflow: hidden;
+    width: 100%;
+    /* #ifdef H5 */
+    height: 100%;
+    /* #endif */
+    /* #ifndef H5 */
+    height: 100vh;
+    /* #endif */
+    display: flex;
+    flex-direction: column;
 
     .message_user_aview {
       width: 100%;
@@ -159,5 +156,100 @@
         }
       }
     }
+
+    .goods_info {
+      width: 100%;
+      height: auto;
+      padding: 20rpx;
+      box-sizing: border-box;
+      background: #fff;
+      display: flex;
+
+      .goods_img {
+        width: 100rpx;
+        height: 100rpx;
+      }
+
+      .goods_text {
+        flex: 1;
+        min-height: 100rpx;
+        height: auto;
+        box-sizing: border-box;
+        padding-left: 16rpx;
+
+        .goods_name {
+          width: 100%;
+          margin-bottom: 10rpx;
+          font-size: 28rpx;
+          font-weight: bold;
+          overflow: hidden;
+          /*超出部分隐藏*/
+          white-space: nowrap;
+          /*禁止换行*/
+          text-overflow: ellipsis;
+          /*省略号*/
+        }
+
+        .goods_jiag {
+          font-size: 26rpx;
+          color: red;
+        }
+
+        .goods_fuwu {
+          font-size: 24rpx;
+          color: #aaa;
+        }
+
+        .goods_pon {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .go_goods_btn {
+            width: auto;
+            height: auto;
+            box-sizing: border-box;
+            padding: 14rpx 28rpx;
+            border-radius: 10rpx;
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #fff;
+            background: rgb(250, 42, 42);
+          }
+        }
+      }
+    }
+
+    .message_view {
+      width: 100%;
+      flex: 1;
+      position: relative;
+
+      .message_view_scroll {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+
+    .gonggao {
+      width: 100%;
+      height: 80rpx;
+      background: #fff2d4;
+      box-sizing: border-box;
+      padding: 0 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 24rpx;
+      color: rgb(230, 138, 19);
+
+      view {
+        color: rgb(230, 138, 19);
+      }
+    }
   }
 </style>