添加到顶部和评论惰性渲染

Author: flytam

README.md

@@ -41,18 +41,22 @@ npm run dev
 
 目前存在的问题
 
-～～小程序无法动态插入dom，markdwon的解析有点问题， [wemark](https://github.com/TooBug/wemark)在mpvue上使用需要改造下。已封装[mpvue-wemark](https://github.com/673800357/mpvue-wemark)解决
+小程序无法动态插入dom，markdwon的解析有点问题， [wemark](https://github.com/TooBug/wemark)在mpvue上使用需要改造下。已封装[mpvue-wemark](https://github.com/673800357/mpvue-wemark)解决
 
 
 todo
 
   - 帖子收藏和取消收藏功能
   - 评论点赞和收藏的UI同步 // 好像后端有bug
-  - 帖子详情页加载评论时惰性渲染和回到顶部
   - 编辑自己发过的主题
   - 展示未读消息数和消息已读
-  - 部分页面添加下拉刷新
-  - 请求失败状态码非200会抛异常，如何统一优雅处理
+
+
+优化 
+ - 请求失败状态码非200会抛异常，如何统一优雅处理
+ - 部分页面添加下拉刷新
+ - 到顶部代码不清真。
+  
 后话：
 
 这个项目没有涉及到太多复杂的部分，主要到是业务逻辑的开发，对于作为一个vue和mpvue小程序入门项目是非常合适的。由于开发时间短，部分代码质量和交互做得不太好。对于未完成的部分和部分未知bug欢迎各位star、提issue、提pr一起来玩2333.

src/pages/detail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='container'>
+  <div  class='container'>
     <div v-if='sendVisible'>
       <sendReply  @close-modal='closeModal' @reply-success='replySuccess' :content='content' :topicId='id' :replyId='replyId'></sendReply>
     </div>
@@ -11,7 +11,8 @@
         </div>
         <span>楼主</span>
       </div>
-      <div class='body'>
+
+      <scroll-view class='body' scroll-y='true'  :scroll-top="top" enable-back-to-top='true' @scrolltolower='getMore'>
         <div class='title'>
           <p class='big'>{{detailData.title}}</p>
           <div class='time-info'>
@@ -20,6 +21,7 @@
             <span>评论:{{detailData.reply_count}}</span>
           </div>
         </div>
+        <img class='up-png' src="../../../static/up.png" mode='widthFix' @click.stop="goTop">
         <div v-if='!sendVisible' class='reply-buton' @click.stop="showReplyModal">评论</div>
         <div class='content'>
           <wemark :mdData='detailData.content'></wemark>
@@ -43,7 +45,7 @@
             </div>
           </div>
         </div>
-      </div>
+      </scroll-view>
     </div>
   </div>
 </template>
@@ -66,18 +68,12 @@ export default {
       return passTime(this.detailData.create_at);
     },
     formatReplies() {
-      return (
-        this.detailData &&
-        this.detailData.replies &&
-        this.detailData.replies
-          .map(_ => {
-            return {
-              ..._,
-              create_at: passTime(_.create_at)
-            };
-          })
-          .reverse()
-      );
+      return this.currentReplies.map(_ => {
+        return {
+          ..._,
+          create_at: passTime(_.create_at)
+        };
+      });
     }
   },
 
@@ -93,10 +89,35 @@ export default {
       wx.hideLoading();
       if (res.data.success) {
         this.detailData = res.data.data;
+        this.currentReplies = res.data.data.replies.reverse().splice(0, 10);
+        this.remainReplies = res.data.data.replies;
         //this.article = res.data.content;
       } else {
       }
     },
+    goTop() {
+      console.log(11);
+      setTimeout(() => (this.top = 0));
+      this.top = 1;
+      // wx.pageScrollTo({
+      //   scrollTop: 500,
+      //   duration: 300
+      // });
+    },
+    getMore() {
+      if (this.remainReplies.length > 0) {
+        this.currentReplies = [
+          ...this.currentReplies,
+          ...this.remainReplies.splice(0, 10)
+        ];
+      } else {
+        wx.showToast({
+          title: "无更多数据",
+          icon: "none",
+          duration: 2000
+        });
+      }
+    },
     async upOrCancel(e) {
       // / todo 防抖
       // console.log(e);
@@ -161,10 +182,13 @@ export default {
   data() {
     return {
       detailData: {},
+      remainReplies: [],
+      currentReplies: [],
       content: "",
       sendVisible: false,
       id: "",
-      replyId: ""
+      replyId: "",
+      top: 0
     };
   }
 };
@@ -173,7 +197,7 @@ export default {
 <style lang='scss' scoped>
 $color: rgb(65, 184, 131);
 .container {
-  min-height: 100vh;
+  height: 100vh;
   background-color: rgb(245, 245, 239);
   .header {
     display: flex;
@@ -191,6 +215,9 @@ $color: rgb(65, 184, 131);
       }
     }
   }
+  .body {
+    height: 90vh;
+  }
   .title {
     background-color: white;
     margin-bottom: 20rpx;
@@ -216,6 +243,12 @@ $color: rgb(65, 184, 131);
     left: 81vw;
     color: white;
   }
+  .up-png {
+    width: 100rpx;
+    top: 75vh;
+    left: 81vw;
+    position: fixed;
+  }
   .content {
     background-color: white;
     margin-bottom: 20rpx;