修复寺庙列表加载更多

src/components/detail-content-expand/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="detail-content-expand">
        <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
-            <div ref="content">
+            <div ref="content" class="ref-content">
                 <slot></slot>
             </div>
         </div>
@@ -37,13 +37,15 @@ export default {
             }
         }
     },
-    updated() {
+    watch: {
-
+        '$slots'(val){
+            console.log('slots val',val)
+        }
     },
     mounted(){
         this.wrapperHeight = this.$refs.wrapper.offsetHeight
-        this.contentHeight = this.$refs.content.offsetHeight
         this.$nextTick(() => {
+            this.contentHeight = this.$refs.content.offsetHeight
             this.wrapperContainerHeight = this.wrapperHeight;
             this.refresh();
         })
@@ -58,7 +60,6 @@ export default {
                 this.defaultContentHeight = 100;
                 return
             }
-            console.log('selector', selector)
             this.defaultContentHeight = selector.offsetHeight / (4/1)
         }
     }

src/pages/temple-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="temple-list" :style="{height: root.minHeight + 'px'}">
+    <div class="temple-list" :style="{height: root.minHeight - root.tabHeight + 'px'}">
         <div class="topbar" ref="topbar">
             <van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
             <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
@@ -29,17 +29,22 @@
         <div  >
 
             <div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
-                <scroll-view 
+<!--                <scroll-view -->
-                    class="temple-container content"
+<!--                    class="temple-container content"-->
-                    :height="containerHeight - 20" 
+<!--                    :height="containerHeight - 20" -->
-                    ref="scroll"
+<!--                    ref="scroll"-->
-                    pulldown 
+<!--                    pulldown -->
-                    pullup
+<!--                    pullup-->
-                    @pulldown="refresh"
+<!--                    @pulldown="refresh"-->
-                    @pullup="loadMore"
+<!--                    @pullup="loadMore"-->
-                >
+<!--                >-->
+<!--                    <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>-->
+<!--                </scroll-view>-->
+                <div class="temple-container content" :style="{height: containerHeight+'px'}" @scroll="onScroll">
                     <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
-                </scroll-view>
+                    <div v-if="loading" class="no-more">正在加载...</div>
+                    <div class="no-more" v-if="!loading && noMore">没有更多了</div>
+                </div>
             </div>
             <div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
                 <div id="container" style="height: 100%"></div>
@@ -62,11 +67,13 @@ export default {
             mode: 'list',
             page: 1,
             templeList: [],
-            lng: '',
+            lng: '106.45233',
-            lat: '',
+            lat: '29.507471',
             map: null,
             positioning: false,
             noMore: false,
+            timer: null,
+            loading: false
         }
     },
     inject: ['root', 'parentHeight'],
@@ -92,6 +99,19 @@ export default {
         this.wechatReady()
     },
     methods: {
+        onScroll(e){
+            const scrollTop = e.target.scrollTop;
+            const scrollHeight = e.target.offsetHeight;
+            const windowHeight = this.templeList.length * 220;
+            if(scrollTop === 0){
+                this.page = 1;
+                this.getTempleList()
+                return
+            }
+            if(((scrollTop + scrollHeight) / windowHeight) > 0.9){
+                this.loadMore()
+            }
+        },
         initMap(){
             TMAPLoader.load({
                 key: process.env.VUE_APP_TMAP_KEY
@@ -120,35 +140,37 @@ export default {
             this.markers = markers;
         },
         async getTempleList(){
+            this.loading = true;
             const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
+            this.loading = false;
+            this.total = res.total;
             if(this.page === 1){
-                this.total = res.total;
+                this.templeList = [];
-                this.templeList = res.results;
-            } else {
-                this.templeList = this.templeList.concat(res.results);
-                this.noMore = res.results.length < 10;
             }
+            this.templeList = this.templeList.concat(res.results);
+            this.noMore = res.results.length < 10;
             if(this.mode === 'map'){
                 this.setMarker();
             }
-            this.$nextTick(() => {
-                this.scroll.refresh();
-            })
         },
-        onGetLocation(){
+        async onGetLocation(){
             this.positioning = true;
+            console.log(getLocation)
             getLocation().then(res => {
-                console.log(res)
                 this.positioning = false
                 this.lng = res.longitude;
                 this.lat = res.latitude;
                 this.page = 1;
+                this.templeList = [];
                 this.getTempleList();
-            }).catch((a) => {
+            }).catch(() => {
-                console.log(a)
                 this.positioning = false;
             })
         },
+        refresh(){
+            this.page = 1;
+            this.getTempleList()
+        },
         onLocationTo(data){
             openLocation({
                 longitude: data.lng,
@@ -173,11 +195,11 @@ export default {
         },
         loadMore(){
             if(this.noMore) return;
-            this.page += 1;
+            clearTimeout(this.timer)
-            this.getTempleList();
+            this.timer = setTimeout(() => {
-        },
+                this.page += 1;
-        refresh(){
+                this.getTempleList()
-            console.log('refresh')
+            }, 300)
         },
     }
 }
@@ -239,6 +261,9 @@ export default {
             height: 100%;
             background: #f5f5f5;
         }
+        .temple-container{
+            overflow: scroll;
+        }
     }
 }
 

vue.config.js

@@ -7,6 +7,7 @@ module.exports = {
     filenameHashing: true,
     devServer: {
         // https:true,
+        host: '0.0.0.0',
         disableHostCheck: false,
         proxy: {
             '/api': {