更改功德箱未显示完

src/App.vue

@@ -17,13 +17,12 @@
 <script>
 import { tabbar } from '../src/router';
 import safeAreaInsets from 'safe-area-insets';
-console.log('底部安全区：', window.screen.availHeight, safeAreaInsets.bottom)
 export default {
     name: 'App',
     data() {
         return {
             active: '3',
-            minHeight: window.innerHeight - safeAreaInsets.bottom,
+            minHeight: 0,
             tabbar,
             tabHeight: 0,
         };
@@ -34,7 +33,8 @@ export default {
             refs: this.$refs,
             safeAreaInsetBottom: safeAreaInsets.bottom,
             screenHeight: window.innerHeight - safeAreaInsets.bottom,
-            parentHeight: this.minHeight - this.tabHeight
+            parentHeight: this.minHeight - this.tabHeight,
+            minHeight: this.minHeight,
         };
     },
     watch: {
@@ -58,6 +58,12 @@ export default {
     mounted(){
         console.log('launch', this.$route.query)
         this.$store.commit('SET_LAUNCH', this.$route.query)
+
+        console.log( safeAreaInsets.bottom)
+        setTimeout(() => {
+            console.log( safeAreaInsets.bottom)
+            this.minHeight = window.innerHeight - safeAreaInsets.bottom;
+        }, 30)
     },
     computed: {
         showTabbar() {
@@ -101,4 +107,38 @@ export default {
         bottom: 0;
     }
 }
+.loadmore{
+    font-size: .4rem;
+    text-align: center;
+    color: #888;
+    padding: .4rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon{
+        width: .6rem;
+        vertical-align: middle;
+        margin-right: .2rem;
+        animation: loading 3s linear infinite;
+    }
+}
+
+.no-more{
+    font-size: .4rem;
+    text-align: center;
+    color: #888;
+    padding: .4rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@keyframes loading {
+    from{
+        transform: rotateZ(0);
+    }
+    to{
+        transform: rotateZ(-360deg);
+    }
+}
 </style>

src/pages/merit-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="merit-box" :style="{height: screenHeight - root.tabHeight + 'px'}">
+	<div class="merit-box" :style="{height: root.minHeight + 'px'}">
 		<van-nav-bar
 			left-arrow
 			v-if="$route.meta.showNavBar"
@@ -8,7 +8,7 @@
 			:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
 		/>
 		<div class="merit-container">
-			<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" :src="info.merit_box_cover" alt="">
+			<img class="goods-picture" :style="{width: width + 'px', height: width / 2 + 'px'}" :src="info.merit_box_cover" alt="">
 			<div class="merit-rank-container">
 				<div class="head">
 					<span class="title">
@@ -19,20 +19,24 @@
 						<span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{n.title}}</span>
 					</div>
 				</div>
-				<div class="body">
+				<div class="body" ref="swiper">
-					<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @swiper="onSwiper" @slideChange="onSlideChange">
-						<swiper-slide v-for="swipe in nav" :key="swipe.id">
                     <scroll-view
+                        ref="scrollView"
                         :height="containerHeight - 20"
                         pulldown
                         pullup
                         @pulldown="refresh"
                         @pullup="loadMore"
                     >
-								<user-merit v-for="(merit, _index) in swipe.list" :key="_index" :data="merit"></user-merit>
+                        <user-merit v-for="(merit, _index) in list" :key="_index" :data="merit"></user-merit>
+                        <div class="loadmore" v-if="!noMore">
+                            <img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJ1BMVEUAAACHh4eHh4eIiIiJiYmJiYmIiIiIiIiHh4eIiIiJiYmIiIiIiIhR8CECAAAADHRSTlMAQFW/f6qekV+Hc2n78NS+AAAB3klEQVR42uzXv0lDYRiF8Rv/gKhF3CADWAgu4ACOYOEIDpLCQRzBSlAJnKECKd7mgTfc76QIyTnt5eN5f+WdsizLsizLsiw7li2ed1tOzfyIdkskkWlKJJFETiKymhO5Gmtc/8yJvH4ORd5UFEQI0WYIIhUFEUKkjyGIioIIIdL/EERFYYQQ6X0IUhRGCJH+RiBFYYSQjtJDisIIIdLvvMaFRAojBeFJHPeId4gAUhc5FEYIcSmMEGJTGCHEpTBCiE1hhBCXwgghNoURQlwKI4TYFEYIcSmMEOJT+GNKiE/BCPEpGCE+xYA4FEJ8Sg/xKF3EhhSlOfbLhRSlOfbWhhSlOfbbhRSlOfbOhhSlOXbtQorSHHtjQ4rSHLt2IUVZtd+yLMvOYosHbHnwN/fCXvZFLoU9JZJIItv2zdgGQBgGggsyDIMxAsMhhGhD7IA4R3eti++Q+L8Y8nLI/x9IEZFpePjFrlMWDNYe4wXOft6qVFGtUm27bjXqwVbRudy3CpVtZ/nMr9G7BwH6tBEYadhzU2g4I0+AwTGTO8uGB2bqVJ4Y/Zn6QkrEIColOTmGqPnkhCWiepWUyL7X4Vam2JdQFKmyZVgb5QqwE/nChhhiiCGGwB7oiYiIiIhIiAOEKKREjkzh3gAAAABJRU5ErkJggg==" alt="">
+                            正在加载更多数据...
+                        </div>
+                        <div class="loadmore" v-if="noMore">
+                            没有更多了
+                        </div>
                     </scroll-view>
-						</swiper-slide>
-					</swiper>
 				</div>
 			</div>
 			<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
@@ -46,14 +50,9 @@
 
 <script>
 import { getMeritBox,  } from '@/api';
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
 import { mapState } from 'vuex';
 
 export default {
-    components: {
-        swiper,
-        swiperSlide
-    },
     inject: ['screenHeight', 'root'],
 	data(){
         const { query } = this.$route;
@@ -72,29 +71,18 @@ export default {
             tabHeight: 0,
 			info: {},
 			list: [],
+            loading: true,
 			total: 0,
-			SwiperOption: {
-				autoplay: false,
-				onSlideChangeEnd: swiper => {
-					console.log(swiper.realIndex)
-					const current = this.nav[swiper.realIndex];
-					this.type_id = current.id;
-					if(current.list.length === 0){
-						this.getMeritBox();
-					}
-				}
-			}
 		}
 	},
     computed: {
         ...mapState(['temple_merit_id']),
-        swiper(){
+        noMore(){
-            return this.$refs.swiper.swiper;
+            return this.list.length === this.total;
         }
     },
 	mounted(){
 		this.width = window.innerWidth;
-		this.containerHeight = this.$refs.swiper.$el.offsetHeight;
 		this.getMeritBox();
         if(this.query.open_box){
             this.openBox()
@@ -107,22 +95,15 @@ export default {
         openBox(){
             this.randVisible = true
         },
-        onSwiper(swiper){
-            console.log('on swiper', swiper)
-        },
-        onSlideChange(){
-            const { activeIndex } = this.swiper;
-            const { id } = this.nav[activeIndex];
-            this.type_id = id;
-            this.getMeritBox()
-        },
-
 		async getMeritBox(){
-			const current = this.nav.find(item => item.id === this.type_id);
+			const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', this.type_id, this.page, 10);
-			const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', current.id, current.page, current.size);
+            // this.loading = false;
+            if(this.page === 1){
+                this.list = [];
+            }
 			this.info = res.merit_box_info;
 			this.total = res.merit_box_order.total;
-			current.list = res.merit_box_order.list
+			this.list = this.list.concat(res.merit_box_order.list)
 
             const query =  this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id });
             if(!this.$route.query.temple_id){
@@ -136,23 +117,33 @@ export default {
                 link: location.href
             })
 
+            this.$nextTick(() => {
+                this.containerHeight = this.$refs.swiper.offsetHeight;
+                this.$refs.scrollView.refresh();
+            })
+
 		},
 
-        onListBy(n, index){
+        onListBy(n){
             this.type_id = n.id;
-            this.swiper.slideTo(index, 300, false)
+            this.page = 1;
+            this.total = 0;
+            this.list = [];
+            this.getMeritBox();
         },
 		loadMore(){
-            console.log('加载更多')
+            if(this.noMore) return;
-			const current = this.nav.find(item => item.id === this.type_id);
+            this.loading = true;
-			current.page += 1;
+            this.page += 1;
 			this.getMeritBox();
         },
         refresh(){
             console.log('refresh')
+            this.page = 1;
+            this.total = 0;
+            this.getMeritBox();
         },
 		onRandNext(obj){
-			console.log(obj)
 			this.$router.push({
 				name: 'pay',
 				query: {
@@ -191,7 +182,7 @@ export default {
 		border-top-left-radius: 10px;
 		border-top-right-radius: 10px;
         margin-top: 5rem;
-        height: 65vh;
+        height: 61vh;
 		.head{
 			padding: .53rem .4rem;
 			padding-bottom: .13rem;
@@ -224,7 +215,8 @@ export default {
 			}
 		}
 		.body{
-            height: 10rem;
+            height: calc(100% - 1.16rem);
+            overflow: hidden;
 			.swiper-container{
 				height: 100%;
 			}
@@ -238,7 +230,7 @@ export default {
 		right: 0;
 		background: white;
 		padding-top: .2rem;
-		padding-bottom: calc(.2rem + env(safe-area-inset-bottom));
+		padding-bottom: calc(.2rem );
 		border-top: .01rem solid #ddd;
         display: flex;
         padding-left: .4rem;