Skip to content

T
tl_estate
Commit 6c2fd7dd authored by xishifeng's avatar xishifeng
Browse files
Options

分页优化

parent 3352f2ba
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 60 deletions
public/appnew/src/assets/js/public.js
View file @ 6c2fd7dd
...@@ -214,5 +214,5 @@ export default { ...@@ -214,5 +214,5 @@ export default {
console.log("other device"); console.log("other device");
obj.fn(); obj.fn();
}; };
} },
}; };
\ No newline at end of file
public/appnew/src/components/businessCollege/articleList.vue
View file @ 6c2fd7dd
...@@ -13,16 +13,16 @@ ...@@ -13,16 +13,16 @@
<div class="nav-seat" :style="'height: '+seatH+'rem;'"></div> <div class="nav-seat" :style="'height: '+seatH+'rem;'"></div>
</nav> </nav>
<main> <main>
<section v-for="(item, index) in mainData" v-show="index === initTabNumMain"> <pagination-load :canload="!mainData[initTabNumMain].isStop" :distance="30" @load="getList">
<pagination-load :canload="!item.isStop" :distance="30" @load="getList"> <section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
<ul> <ul>
<li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li> <li is="self-defined-li" v-for="(item2, index2) in item.dataList" :data="item2" :dataindex="index2"></li>
</ul> </ul>
</pagination-load> <div class="no-data-block" v-show="item.noDataFlag">暂无数据</div>
<div class="no-data-block" v-show="item.noDataFlag">暂无数据</div> <div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div>
<div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div> <div class="loading-gif-block" v-show="isLoading">正在加载...</div>
<div class="loading-gif-block" v-show="isLoading">正在加载...</div> </section>
</section> </pagination-load>
</main> </main>
</div> </div>
</template> </template>
......
public/appnew/src/components/publicEg/paginationLoad.vue
View file @ 6c2fd7dd
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
*/ */
canload: { canload: {
type: Boolean, type: Boolean,
default: true, default: true
}, },
/** /**
...@@ -34,16 +34,19 @@ ...@@ -34,16 +34,19 @@
*/ */
distance: { distance: {
type: Number, type: Number,
default: 100, default: 20,
}, },
}, },
data() { data() {
return { return {
dom: null, // 外部容器dom dom: null, // 外部容器dom
timer: false,
} }
}, },
mounted() { mounted() {
let _this = this;
if(this.container !== global) { if(this.container !== global) {
this.dom = document.querySelector(this.container) this.dom = document.querySelector(this.container)
} else { } else {
...@@ -52,7 +55,12 @@ ...@@ -52,7 +55,12 @@
if(!this.dom) { if(!this.dom) {
return return
} }
this.dom.addEventListener('scroll', this.scroll, false) let timer = false;//定义计时器
this.dom.addEventListener('scroll', ()=>{
timer && clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
timer = setTimeout(_this.scroll, 200);
}, false);
}, },
methods: { methods: {
...@@ -71,9 +79,8 @@ ...@@ -71,9 +79,8 @@
parentNode = this.$el.parentNode parentNode = this.$el.parentNode
} }
if(parentNode) { if(parentNode) {
//const rect = parentNode.getBoundingClientRect(); const rect = parentNode.getBoundingClientRect();
//if((rect.bottom <= viewHeight + this.distance)) { if((rect.bottom <= viewHeight + this.distance)) {
if((this.getScrollTop() + this.getClientHeight() + this.distance >= this.getScrollHeight())) {
//DOM 更新循环结束之后执行 //DOM 更新循环结束之后执行
this.$nextTick(() => { this.$nextTick(() => {
this.load() this.load()
...@@ -81,30 +88,6 @@ ...@@ -81,30 +88,6 @@
} }
} }
}, },
//获取滚动条当前的位置
getScrollTop() {
let scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if(document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
//获取当前可视范围的高度
getClientHeight() {
let clientHeight = 0;
if(document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
},
//获取文档完整的高度
getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
},
/** /**
* 加载一组数据的方法 * 加载一组数据的方法
*/ */
...@@ -112,6 +95,11 @@ ...@@ -112,6 +95,11 @@
this.$emit('load') this.$emit('load')
}, },
}, },
watch: {
canload(newValue, oldVal) {
this.canload = newValue;//当父组件传入的canload更新时，把src改为新值
}
},
beforeDestroy() { beforeDestroy() {
if(this.dom) { if(this.dom) {
this.dom.removeEventListener('scroll', this.scroll, false) this.dom.removeEventListener('scroll', this.scroll, false)
......
public/appnew/src/components/shop/shopList.vue
View file @ 6c2fd7dd
...@@ -26,27 +26,27 @@ ...@@ -26,27 +26,27 @@
<div class="nav-seat"></div> <div class="nav-seat"></div>
</nav> </nav>
<main class="main-content"> <main class="main-content">
<section v-for="(item, index) in mainData" v-show="index === initTabNumMain"> <pagination-load :canload="!mainData[initTabNumMain].isStop" :distance="10" @load="getList">
<pagination-load :canload="!item.isStop" :distance="10" @load="getList"> <section v-for="(item, index) in mainData" v-show="index === initTabNumMain">
<ul> <ul>
<li class="main-sec-li" v-for="(item2, index2) in item.dataList" @click="toShopDetail(item2.id)"> <li class="main-sec-li" v-for="(item2, index2) in item.dataList" @click="toShopDetail(item2.id)">
<div class="shop-list-img shop-list"> <div class="shop-list-img shop-list">
<img-error :datasrc="selesctImg(item2)" :imgtype="'house'"></img-error> <img-error :datasrc="selesctImg(item2)" :imgtype="'house'"></img-error>
</div> </div>
<div class="shop-list-con shop-list"> <div class="shop-list-con shop-list">
<p class="shop-title shop-list-top">{{item2.title}}</p> <p class="shop-title shop-list-top">{{item2.title}}</p>
<p class="shop-rent shop-list-top">{{selesctRent(item2)}}</p> <p class="shop-rent shop-list-top">{{selesctRent(item2)}}</p>
<p class="shop-list-top"> <p class="shop-list-top">
<span v-for="(item3, index3) in item2.shop_sign.split(',').splice(0, 3)" class="shop-lable">{{item3}}</span> <span v-for="(item3, index3) in item2.shop_sign.split(',').splice(0, 3)" class="shop-lable">{{item3}}</span>
</p> </p>
</div> </div>
</li> </li>
</ul> </ul>
</pagination-load> <div class="no-data-block" v-show="item.noDataFlag">暂无数据</div>
<div class="no-data-block" v-show="item.noDataFlag">暂无数据</div> <div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div>
<div class="no-more-block" v-show="!item.noDataFlag&&item.isStop">没有更多了...</div> <div class="loading-gif-block" v-show="isLoading">正在加载...</div>
<div class="loading-gif-block" v-show="isLoading">正在加载...</div> </section>
</section> </pagination-load>
</main> </main>
<div class="mark-shop-choose" v-for="(item, index) in mainDataChoose" :key="item.title" v-show="(initTabNumMainChoose == index) && item.isShow"> <div class="mark-shop-choose" v-for="(item, index) in mainDataChoose" :key="item.title" v-show="(initTabNumMainChoose == index) && item.isShow">
<div v-show="index == 0"> <div v-show="index == 0">
...@@ -109,7 +109,8 @@ ...@@ -109,7 +109,8 @@
'page': 1,//页码 'page': 1,//页码
'isLoadOnce': false,//是否请求过一次数据 'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕 'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据 'noDataFlag': false,//是否是无数据,
'scrollHeight': 0,//距离文档顶部的高度
}, },
{ {
'title': '商场', 'title': '商场',
...@@ -118,6 +119,7 @@ ...@@ -118,6 +119,7 @@
'isLoadOnce': false,//是否请求过一次数据 'isLoadOnce': false,//是否请求过一次数据
'isStop': false,//是否所有页的数据加载完毕 'isStop': false,//是否所有页的数据加载完毕
'noDataFlag': false,//是否是无数据 'noDataFlag': false,//是否是无数据
'scrollHeight': 0,//距离文档顶部的高度
} }
],//请求返回的数据体集合 ],//请求返回的数据体集合
pageSize: 15, pageSize: 15,
...@@ -269,6 +271,10 @@ ...@@ -269,6 +271,10 @@
}, },
tabMain(index) { tabMain(index) {
let _this = this; let _this = this;
_this.mainData[_this.initTabNumMain].scrollHeight = document.body.scrollTop;//记录切换时的高度
window.scrollTo(0,_this.mainData[index].scrollHeight);//滚动到指定位置
_this.initTabNumMain = index; _this.initTabNumMain = index;
if(!_this.mainData[index].isLoadOnce) { if(!_this.mainData[index].isLoadOnce) {
_this.getList(); _this.getList();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment