Merge pull request #27 from TencentCloudBase/luke--refactor-scroll

Luke  refactor scroll

Author: Mrjing

apps/miniprogram-agent-ui/miniprogram/app.js

@@ -9,7 +9,7 @@ App({
         //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
         //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
         //   如不填则使用默认环境（第一个创建的环境）
-        env: "lowcode-1gm3ep4m027742a2",
+        env: "luke-agent-dev-7g1nc8tqc2ab76af",
         traceUser: true,
       });
     }

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.js

@@ -43,42 +43,14 @@ Component({
         showFeatureList: showWebSearchSwitch,
       });
     },
-    showTools: function (isShow) {
-      // console.log('showTools', isShow)
-      if (isShow) {
-        this.setData({
-          footerHeight: this.data.footerHeight + 80,
-        });
-      } else {
-        this.setData({
-          footerHeight: this.data.footerHeight - 80,
-        });
-      }
+    showTools: function () {
+      wx.nextTick(() => this.calcScrollHeight())
     },
-    showFileList: function (isShow) {
-      console.log("showFileList", isShow);
-      if (isShow) {
-        this.setData({
-          footerHeight: this.data.footerHeight + 80,
-        });
-      } else {
-        this.setData({
-          footerHeight: this.data.footerHeight - 80,
-        });
-      }
+    showFileList: function () {
+      wx.nextTick(() => this.calcScrollHeight())
     },
-    showFeatureList: function (isShow) {
-      console.log("showFeatureList", isShow);
-      if (isShow) {
-        this.setData({
-          footerHeight: this.data.footerHeight + 30,
-        });
-      } else {
-        const subHeight = this.data.footerHeight - 30;
-        this.setData({
-          footerHeight: subHeight >= 80 ? subHeight : 80,
-        });
-      }
+    showFeatureList: function () {
+      wx.nextTick(() => this.calcScrollHeight())
     },
   },
 
@@ -90,10 +62,8 @@ Component({
     inputValue: "",
     output: "",
     chatRecords: [],
-    scrollTop: 0,
     setPanelVisibility: false,
     questions: [],
-    scrollTop: 0,
     scrollTop: 0, // 文字撑起来后能滚动的最大高度
     viewTop: 0, // 根据实际情况，可能用户手动滚动，需要记录当前滚动的位置
     scrollTo: "", // 快速定位到指定元素，置底用
@@ -103,7 +73,6 @@ Component({
     showFileList: false, // 展示输入框顶部文件行
     showTopBar: false, // 展示顶部bar
     sendFileList: [],
-    footerHeight: 73,
     lastScrollTop: 0,
     showUploadFile: true,
     showUploadImg: true,
@@ -123,8 +92,8 @@ Component({
     feedbackRecordId: "",
     feedbackType: "",
     textareaHeight: 50,
-    curLineCount: 1,
     defaultErrorMsg: "网络繁忙，请稍后重试!",
+    curScrollHeight: 0
   },
   attached: async function () {
     const chatMode = this.data.chatMode;
@@ -182,8 +151,30 @@ Component({
     this.setData({
       contentHeightInScrollViewTop: topHeight,
     });
+    this.calcScrollHeight()
   },
   methods: {
+    calcScrollHeight: async function () {
+      // windowHeight - topHeight - footerHeight
+      const topAndFooterHeight = await new Promise((resolve) => {
+        const query = wx.createSelectorQuery().in(this);
+        query
+          .selectAll(".agent-ui >>> .navBar, .agent-ui >>> .footer")
+          .boundingClientRect((rects) => {
+            let totalHeight = 0;
+            rects.forEach((rect) => {
+              totalHeight += rect.height;
+            });
+            // console.log('top height', totalHeight);
+            resolve(totalHeight);
+          })
+          .exec();
+      });
+      // console.log('this.data.windowInfo.windowHeight - topAndFooterHeight', this.data.windowInfo.windowHeight - topAndFooterHeight)
+      this.setData({
+        curScrollHeight: this.data.windowInfo.windowHeight - topAndFooterHeight
+      })
+    },
     showErrorMsg: function (e) {
       const { content } = e.currentTarget.dataset;
       console.log("content", content);
@@ -201,19 +192,10 @@ Component({
         .select(".foot_function")
         .boundingClientRect(function (res) {
           if (res) {
-            if (res.height < self.data.textareaHeight) {
-              self.setData({
-                footerHeight: self.data.footerHeight - (self.data.textareaHeight - res.height),
-              });
-            }
-            if (res.height > self.data.textareaHeight) {
-              self.setData({
-                footerHeight: self.data.footerHeight + (res.height - self.data.textareaHeight),
-              });
-            }
             self.setData({
               textareaHeight: res.height,
             });
+            self.calcScrollHeight()
           } else {
             console.log("未找到指定元素");
           }
@@ -333,12 +315,10 @@ Component({
       });
     },
     autoToBottom: function () {
-      // console.log("autoToBottom");
       this.setData({
         manualScroll: false,
         scrollTo: "scroll-bottom",
       });
-      // console.log('scrollTop', this.data.scrollTop);
     },
     bindInputFocus: function (e) {
       this.setData({
@@ -1019,8 +999,9 @@ Component({
       }
 
       // 只有当内容高度接近scroll 区域视口高度时才开始增加 scrollTop
-      const clientHeight =
-        this.data.windowInfo.windowHeight - this.data.footerHeight - (this.data.chatMode === "bot" ? 40 : 0); // 视口高度
+      // const clientHeight =
+      //   this.data.windowInfo.windowHeight - this.data.footerHeight - (this.data.chatMode === "bot" ? 40 : 0); // 视口高度
+      const clientHeight = this.data.curScrollHeight
       const contentHeight =
         (await this.calculateContentHeight()) +
         (this.data.contentHeightInScrollViewTop || (await this.calculateContentInTop())); // 内容总高度

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.wxml

@@ -7,7 +7,7 @@
     </view>
   </view>
   <!-- 聊天对话区 -->
-  <scroll-view bindwheel="onWheel" enhanced="{{true}}" bindscroll="onScroll" binddragstart="handleScrollStart" class="main" style="height: {{windowInfo.windowHeight-footerHeight-(chatMode === 'bot' ? 40 : 0)}}px;" scroll-y="{{true}}" scroll-top="{{viewTop}}" scroll-into-view="{{ scrollTo }}" lower-threshold="1" bindscrolltolower="handleScrollToLower" show-scrollbar="{{false}}" refresher-enabled="{{showPullRefresh}}" refresher-threshold="{{80}}" bindrefresherrefresh="handelRefresh" refresher-triggered="{{triggered}}" bounces="{{false}}">
+  <scroll-view bindwheel="onWheel" enhanced="{{true}}" bindscroll="onScroll" binddragstart="handleScrollStart" class="main" style="height: {{curScrollHeight}}px;" scroll-y="{{true}}" scroll-top="{{viewTop}}" scroll-into-view="{{ scrollTo }}" lower-threshold="1" bindscrolltolower="handleScrollToLower" show-scrollbar="{{false}}" refresher-enabled="{{showPullRefresh}}" refresher-threshold="{{80}}" bindrefresherrefresh="handelRefresh" refresher-triggered="{{triggered}}" bounces="{{false}}">
     <view wx:if="{{chatMode === 'bot' && showPullRefresh}}" class="tips">
       {{refreshText}}
     </view>

apps/miniprogram-agent-ui/miniprogram/components/agent-ui/index.wxss

@@ -3,6 +3,9 @@
   width: 750rpx;
   height: 100vh;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow:hidden;
 }
 
 .nav {
@@ -11,6 +14,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .navBar {
@@ -88,6 +92,7 @@
 .main {
   background-color: #fff;
   /* padding-top:10px; */
+  flex: 1;
 }
 
 .share_btn {
@@ -122,9 +127,10 @@
   width: 100%;
   min-height: 80px;
   max-height: 380px;
+  flex-shrink: 0;
   /* background-color: aquamarine; */
-  position: absolute;
-  bottom: 0;
+  /* position: absolute; */
+  /* bottom: 0; */
 }
 
 .foot_function {

apps/miniprogram-agent-ui/miniprogram/pages/chatBot/chatBot.js

@@ -4,7 +4,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-    chatMode: "model", // bot 表示使用agent，model 表示使用大模型
+    chatMode: "bot", // bot 表示使用agent，model 表示使用大模型
     showBotAvatar: true, // 是否在对话框左侧显示头像
     agentConfig: {
       botId: "bot-db3cab4a", // agent id,