fix:修复动态页面错误BUG

src/pages/phone/phoneHome.vue

@@ -57,12 +57,19 @@ export default {
       })
     },
     standChange(type){
-      this.$router.push({
+      if(type ==='DYNAMIC'){
-         name: 'domesticStand',
+        this.$router.push({
-        query:{
+          name: 'standDynamics'
-          standType: type,
+        })
-        }
+
-      })
+      }else{
+        this.$router.push({
+          name: 'domesticStand',
+          query:{
+            standType: type,
+          }
+        })
+      }
     },
   }
 };

src/pages/phone/standDynamics.vue

@@ -1,58 +1,72 @@
 <!--全库检索-->
 <template>
-  <div id="database-search">
+  <div id="standDynamics">
     <div class="search-head">
       <div class="head-title">
         <span class="left-title" @click="back"> < </span>
         <span class="right-title">标准化动态</span>
       </div>
-      <van-tabs active="active" @change="onChange">
+      <van-tabs active="active"  @change="onChange" >
         <van-tab name="ZYBZFG" title="在研标准入库">
-          <div v-if="loading">
+          <div class="card-box" ref="cardBoxOne" @scroll="scroolOne" >
-            <van-loading size="24px" color="#3170A8">加载中...</van-loading>
+            <div v-if="loading">
-          </div>
+              <van-loading size="24px" color="#3170A8">加载中...</van-loading>
-          <div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id" @click="jumpDetails(item)">
-            <div class="standTitle">
-              <div class="title">{{ item.standardName }}</div>
             </div>
-            <div class="standContent">
+            <div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id" >
-              <div class="standState">标准状态:
+              <div class="standTitle">
-                <span style="color: #98E165; padding-left: 5px;">
+                <div class="title">{{ item.standardName }}</div>
+              </div>
+              <div class="standContent">
+                <div class="standState">标准状态:
+                  <span style="color: #98E165; padding-left: 5px;">
                       {{ textStatusMap[item.textState] }}
                   </span></div>
-              <div class="standSubTime">发布日期:
+                <div class="standSubTime">发布日期:
-                <span style="padding-left: 5px;">
+                  <span style="padding-left: 5px;">
                        {{ item.releaseDate }}
                   </span>
+                </div>
               </div>
             </div>
+            <div v-else-if="!loading  && !standList.length">
+              <van-empty description="暂无数据" />
+            </div>
           </div>
-          <div v-else-if="!loading  && !standList.length">
+          <div v-if="moreFlag" class="bottom-box">
-            <van-empty description="暂无数据" />
+            <div v-if="listFlag && !loading" class="list-box">没有更多数据了...</div>
+            <div v-else-if="!listFlag && moreFlag"  @click="moreList" >点击加载更多</div>
+            <van-loading v-else size="24px" color="#3170A8">加载中...</van-loading>
           </div>
         </van-tab>
         <van-tab name="GNWBZFG" title="标准法规入库">
-          <div v-if="loading">
+          <div class="card-box"  ref="cardBoxTwo" @scroll="scroolTwo" >
-            <van-loading size="24px" color="#3170A8">加载中...</van-loading>
+            <div v-if="loading">
-          </div>
+              <van-loading size="24px" color="#3170A8">加载中...</van-loading>
-          <div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id">
-            <div class="standTitle">
-              <div class="title">{{ item.standardName }}</div>
             </div>
-            <div class="standContent">
+            <div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id">
-              <div class="standState">标准状态:
+              <div class="standTitle">
-                <span style="color: #98E165; padding-left: 5px;">
+                <div class="title">{{ item.standardName }}</div>
+              </div>
+              <div class="standContent">
+                <div class="standState">标准状态:
+                  <span style="color: #98E165; padding-left: 5px;">
                       {{ textStatusMap[item.textState] }}
                   </span></div>
-              <div class="standSubTime">发布日期:
+                <div class="standSubTime">发布日期:
-                <span style="padding-left: 5px;">
+                  <span style="padding-left: 5px;">
                        {{ item.releaseDate }}
                   </span>
+                </div>
               </div>
             </div>
+            <div v-else-if="!loading  && !standList.length">
+              <van-empty description="暂无数据" />
+            </div>
           </div>
-          <div v-else-if="!loading  && !standList.length">
+          <div v-if="moreFlag" class="bottom-box">
-            <van-empty description="暂无数据" />
+            <div v-if="listFlag && !loading" class="list-box">没有更多数据了...</div>
+            <div v-else-if="!listFlag && moreFlag"  @click="moreList" >点击加载更多</div>
+            <van-loading v-else size="24px" color="#3170A8">加载中...</van-loading>
           </div>
         </van-tab>
       </van-tabs>
@@ -68,9 +82,13 @@ export default {
       active: "",
       messageType: "ZYBZFG",
       standList: [],
+      page: 1,
       standStateOptions: [], //存放文本状态
       textStatusMap: {},// 文本状态id与name对应
-      loading: true
+      loading: true,
+      scrolled: '',
+      moreFlag: false,
+      listFlag: false
     };
   },
   methods: {
@@ -83,25 +101,78 @@ export default {
         }
       })
     },
+    scroolOne(){
+      this.scrolled = this.$refs.cardBoxOne.scrollTop
+      console.log(this.$refs.cardBoxOne.scrollTop)
+      //获得可视区的高度
+      const windowHeight = this.$refs.cardBoxOne.clientHeight
+      //获取滚动条的总高度
+      const scrollHeight = this.$refs.cardBoxOne.scrollHeight
+      let windowScrolled  = this.scrolled + windowHeight
+      if(scrollHeight - windowScrolled < 100 && this.scrolled !== 0){
+        //把距离顶部的距离加上可视区域的高度
+        this.moreFlag = true
+      }else{
+        this.moreFlag = false
+      }
+    },
+    scroolTwo(){
+      this.scrolled = this.$refs.cardBoxTwo.scrollTop
+      console.log(this.$refs.cardBoxTwo.scrollTop)
+      //获得可视区的高度
+      const windowHeight = this.$refs.cardBoxTwo.clientHeight
+      //获取滚动条的总高度
+      const scrollHeight = this.$refs.cardBoxTwo.scrollHeight
+      let windowScrolled  = this.scrolled + windowHeight
+      if(scrollHeight - windowScrolled < 100 && this.scrolled !== 0){
+        //把距离顶部的距离加上可视区域的高度
+        this.moreFlag = true
+      }else{
+        this.moreFlag = false
+      }
+    },
     //返回上一个页面
     back() {
       this.$router.push("/phoneHome");
     },
+    moreList(){
+      this.moreFlag = false
+      this.loadingFlag = true
+      this.page++
+      this.onDynamics()
+    },
     onChange(name) {
       this.messageType = name;
+      this.page = 1;
+      this.standList = []
       this.onDynamics();
     },
     onDynamics(){
       this.loading = true
       this.$http.get("/lawss/NewsFeed/getNewsFeed", {
         messageType: this.messageType,
-        page: 1,
+        page: this.page,
-        paeSize: 10
+        pageSize: 10
       }, {
         _this: this
       }, res => {
-        this.standList = res.data;
+        if(res.ok){
-        this.loading = false;
+          let msgList= res.data.records
+          if(msgList.length){
+            if(this.standList.length){
+              this.standList = this.standList.concat(msgList)
+            }else{
+              this.standList = msgList
+            }
+            this.loading = false
+          }else{
+            this.loading = false
+            this.listFlag = true
+          }
+        }else{
+          this.standList = []
+          this.loading = false;
+        }
       }, e => {
         console.log(e);
       });
@@ -127,13 +198,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#database-search {
+#standDynamics {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background: #F6F6F6;
-
   .search-head {
     width: 100%;
     height: 100px;
@@ -158,7 +228,10 @@ export default {
   .van-tabs {
     margin-top: 17px;
   }
-
+  /deep/ .van-tabs__content{
+    width: 100%;
+    height: 95%;
+  }
   .van-tab {
     color: #3170A8;
   }
@@ -167,12 +240,24 @@ export default {
     color: #3170A8;
     font-weight: 600;
   }
-
   /deep/ .van-tabs__line {
     width: 50%;
     background-color: #3170A8;
   }
+  /deep/ .van-tab__pane{
+    height: 95%;
+    position: fixed;
+    width: 100%;
+  }
 
+  .card-box{
+    height: 85%;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    top: 10px;
+
+  }
   .card-content {
     width: 95%;
     height: auto;
@@ -211,7 +296,21 @@ export default {
       }
     }
   }
-
+  .bottom-box{
+    height: 40px;
+    bottom: 0;
+    padding:40px;
+    text-align: center;
+    color: #3170A8;
+    .list-box{
+      color: #3170A8;
+      text-align: center;
+    }
+    .van-loading {
+      position: absolute;
+      left: 37%;
+    }
+  }
   .van-loading {
     position: absolute;
     top: 350px;