wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复寺庙列表加载更多

Browse Source
This commit is contained in:
wenfp
2022-04-02 10:02:37 +08:00
parent 804efb793b
commit 2857087d3c
4 changed files with 63 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/detail-content-expand/index.vue
+6 -5
View File
@@ -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
+55 -30
View File
@@ -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
class="temple-container content"
:height="containerHeight - 20"
ref="scroll"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMore"
>
<!-- <scroll-view -->
<!-- class="temple-container content"-->
<!-- :height="containerHeight - 20" -->
<!-- ref="scroll"-->
<!-- pulldown -->
<!-- pullup-->
<!-- @pulldown="refresh"-->
<!-- @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: '',
lat: '',
lng: '106.45233',
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 = res.results;
} else {
this.templeList = this.templeList.concat(res.results);
this.noMore = res.results.length < 10;
this.templeList = [];
}
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) => {
console.log(a)
}).catch(() => {
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;
this.getTempleList();
},
refresh(){
console.log('refresh')
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.page += 1;
this.getTempleList()
}, 300)
},
}
}
@@ -239,6 +261,9 @@ export default {
height: 100%;
background: #f5f5f5;
}
.temple-container{
overflow: scroll;
}
}
}