手机端页面

src/App.vue

@@ -221,6 +221,7 @@ export default {
         && this.$route.name !== 'loginStandDetails' && this.$route.name !== 'error'
         && this.$route.name !== 'phoneHome'&& this.$route.name !== 'databaseSearch'
         && this.$route.name !== 'standDynamics' && this.$route.name !== 'domesticStand'
+        && this.$route.name !== 'domesticDetails'
         && this.$route.name !== 'OtherStandardExternalDetails' && this.$route.name !== 'OtherStandardExternalDetails') {
         this.isBoolean = true
       } else {

src/pages/phone/databaseSearch.vue

@@ -17,11 +17,11 @@
       </template>
     </van-search>
   </div>
-  <div class="card-box">
+  <div class="card-box" ref="cardBox" @scroll="scrool">
     <div v-if="loading">
       <van-loading size="24px" color="#3170A8">加载中...</van-loading>
     </div>
-    <div v-else-if="!loading && standList.length" class="card-content" v-for="item in standList" :key="item.id">
+    <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.title}}</div>
       </div>
@@ -46,23 +46,45 @@ export default {
   name: "databaseSearch",
   data(){
     return{
+      scrolled: '',
+      moreFlag: false,
       searchKey: '',
       standList: [],
       loading: true,
+      page: 1,
     }
   },
   methods: {
+    scrool(){
+      let scrolled = this.$refs.cardBox.scrollTop
+      //获得可视区的高度
+      const windowHeight = this.$refs.cardBox.clientHeight
+      //获取滚动条的总高度
+      const scrollHeight = this.$refs.cardBox.scrollHeight
+      let windowScrolled  = scrolled + windowHeight
+      this.scrolled = scrolled
+      if(scrollHeight - windowScrolled < 600 ){
+        //把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
+        this.moreFlag = true
+        this.page++
+      }
+    },
     onSearch(){
+      this.moreFlag = false
       this.$http.post('search/searchCenter/searchSarBykey',{
         selectIndex: 'fulltextserch',
         selectValue: this.searchKey,
         selectType: 'titleSearch',
-        page: 1,
+        page: this.page,
         pageSize: 20
       },{
         _this: this,
       }, res => {
-        this.standList = res.data.list
+        if(this.standList.length){
+          this.standList =  this.standList.concat(res.data.list)
+        }else{
+          this.standList = res.data.list
+        }
         console.log(this.standList);
         this.loading = false
       }, e => {
@@ -73,11 +95,21 @@ export default {
     back(){
       this.$router.push('/phoneHome')
     },
+    jumpDetails(item){
+      this.$router.push({
+        name: 'domesticDetails',
+        query: {
+          id: item.id,
+          pageType: 'INLAND_STAND'
+        }
+      })
+    },
   },
   mounted(){
     this.searchKey = this.$route.query.searchKey
     this.onSearch()
-  }
+    this.$refs.cardBox.addEventListener('scroll', this.scrool);
+  },
 };
 </script>
 
@@ -85,7 +117,6 @@ export default {
 #database-search{
   width: 100%;
   height: 100%;
-  overflow: auto;
   margin: 0;
   padding: 0;
   background: #F6F6F6;
@@ -130,8 +161,9 @@ export default {
     }
   }
   .card-box{
-    height: 100%;
+    height: 85%;
     position: relative;
+    overflow-y: scroll;
     top: 100px;
   }
   .card-content{