手机端页面

src/pages/phone/databaseSearch.vue

@@ -23,7 +23,9 @@
     </div>
     <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 class="title">
+          <span v-html="item.title"></span>
+         </div>
       </div>
       <div class="standContent">
         <div class="standState">标准类别:
@@ -38,6 +40,12 @@
       <van-empty description="暂无数据" />
     </div>
   </div>
+  <div v-if="moreFlag" class="bottom-box">
+    <div v-if="listFlag && !loading" class="list-box">没有更多数据了...</div>
+    <div v-else-if="!listFlag && moreFlag"  @click="moreList" >点击加载更多</div>
+<!--    <van-button v-else-if="!listFlag && moreFlag"  @click="moreList" >加载新数据</van-button>-->
+    <van-loading v-else size="24px" color="#3170A8">加载中...</van-loading>
+  </div>
  </div>
 </template>
 
@@ -48,28 +56,48 @@ export default {
     return{
       scrolled: '',
       moreFlag: false,
+      loadingFlag: false,
       searchKey: '',
       standList: [],
       loading: true,
+      listFlag: false,
       page: 1,
+      addFlag: 0,
     }
   },
+  watch:{
+    scrolled:{
+      handler(val){
+        if(val === 0){
+          console.log('滚动条消失');
+        }
+      }
+    },
+  },
   methods: {
     scrool(){
-      let scrolled = this.$refs.cardBox.scrollTop
+      this.scrolled = this.$refs.cardBox.scrollTop
+      // console.log(this.scrolled);
       //获得可视区的高度
       const windowHeight = this.$refs.cardBox.clientHeight
       //获取滚动条的总高度
       const scrollHeight = this.$refs.cardBox.scrollHeight
-      let windowScrolled  = scrolled + windowHeight
-      this.scrolled = scrolled
-      if(scrollHeight - windowScrolled < 600 ){
-        //把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
+      let windowScrolled  = this.scrolled + windowHeight
+      if(scrollHeight - windowScrolled < 100 && this.scrolled !== 0){
+        //把距离顶部的距离加上可视区域的高度
         this.moreFlag = true
-        this.page++
+      }else{
+        this.moreFlag = false
       }
     },
-    onSearch(){
+    moreList(){
+      this.moreFlag = false
+      this.loadingFlag = true
+      this.page++
+      this.standSearch()
+    },
+    standSearch(){
+      this.listFlag = false
       this.moreFlag = false
       this.$http.post('search/searchCenter/searchSarBykey',{
         selectIndex: 'fulltextserch',
@@ -80,12 +108,36 @@ export default {
       },{
         _this: this,
       }, res => {
-        if(this.standList.length){
-          this.standList =  this.standList.concat(res.data.list)
+        if(res.data.list.length){
+          if(this.standList.length){
+            this.standList =  this.standList.concat(res.data.list)
+          }else{
+            this.standList = res.data.list
+          }
+          this.loading = false
         }else{
-          this.standList = res.data.list
+          this.listFlag = true
         }
-        console.log(this.standList);
+      }, e => {
+        console.log(e)
+      })
+    },
+    //点击搜索触发事件
+    onSearch(){
+      this.moreFlag = false
+      this.loading = true
+      this.standList = []
+      this.page = 1
+      this.$http.post('search/searchCenter/searchSarBykey',{
+        selectIndex: 'fulltextserch',
+        selectValue: this.searchKey,
+        selectType: 'titleSearch',
+        page: this.page,
+        pageSize: 20
+      },{
+        _this: this,
+      }, res => {
+        this.standList = res.data.list
         this.loading = false
       }, e => {
           console.log(e)
@@ -107,7 +159,7 @@ export default {
   },
   mounted(){
     this.searchKey = this.$route.query.searchKey
-    this.onSearch()
+    this.standSearch()
     this.$refs.cardBox.addEventListener('scroll', this.scrool);
   },
 };
@@ -205,5 +257,28 @@ export default {
     top: 40%;
     left: 37%;
   }
+  .bottom-box{
+    height: 40px;
+    width: 91%;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    color: #3170A8;
+    .list-box{
+      color: #3170A8;
+      text-align: center;
+    }
+    .van-loading {
+      position: absolute;
+      left: 37%;
+    }
+  }
+  .card-content:last-child{
+     margin-bottom: 30px;
+  }
+  .van-button--normal{
+    float: left;
+    margin-left: 35%;
+  }
 }
 </style>