From a80f1bc960efc94e3f375bc881aa4c495042c10c Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Fri, 17 Nov 2023 16:52:58 +0800 Subject: [PATCH] 首页导航组件显示微调 --- plugins/infiniteScroll/CInfiniteScroll.vue | 97 +++++++++++++++++++++++++++--------------------- 1 files changed, 54 insertions(+), 43 deletions(-) diff --git a/plugins/infiniteScroll/CInfiniteScroll.vue b/plugins/infiniteScroll/CInfiniteScroll.vue index 9792580..c822664 100644 --- a/plugins/infiniteScroll/CInfiniteScroll.vue +++ b/plugins/infiniteScroll/CInfiniteScroll.vue @@ -5,14 +5,15 @@ <template> <scroll-view + :id="elmId" class="c-infinite-scroll" :scrollY="true" + lowerThreshold="100" @scroll="evt=>onScroll(evt)" @touchstart="evt=>onTouch(evt)" @touchmove="evt=>onTouch(evt)" @touchend="evt=>onTouch(evt)" @scrollToLower="evt=>onScrollToLower(evt)" - lowerThreshold="100" > <view class="c-infinite-top" @@ -60,7 +61,9 @@ </template> <script> +import Taro from '@tarojs/taro'; import { AtActivityIndicator } from 'taro-ui-vue'; +import { Tools } from '@components/common/Tools'; import './cInfiniteScroll.scss'; export default { @@ -85,6 +88,7 @@ }, data() { return { + elmId: 'cis-' + Tools.createGUID(), // 初始化状态 inital: false, // 当前页面 @@ -126,47 +130,49 @@ // 开始加载 this.inital = true; this.loading = true; - this.onLoadMore({ - current: this.current, - next: this.current + 1, - // 加载成功 - success: options => { - setTimeout(() => { - this.loading = false; - // 没有数据 - if (!options.pageTotal || options.pageTotal <= 0) { - this.ending = true; - } - // 有数据 - else { - this.pageTotal = options.pageTotal; - this.current = this.current + 1; - // 已到最后一页 - if (this.current >= this.pageTotal) { + setTimeout(() => { + this.onLoadMore({ + current: this.current, + next: this.current + 1, + // 加载成功 + success: options => { + this.$nextTick(() => { + this.loading = false; + // 没有数据 + if (!options.pageTotal || options.pageTotal <= 0) { this.ending = true; } - } - // 还原下拉 + // 有数据 + else { + this.pageTotal = options.pageTotal; + this.current = this.current + 1; + // 已到最后一页 + if (this.current >= this.pageTotal) { + this.ending = true; + } + } + // 如果下拉刷新,还原下拉 + if (this.touch.dargState === 2) { + this.touch.driftTop = 0; + setTimeout(() => { + this.touch.dargState = 0; + }, 300); + } + }); + }, + // 加载失败 + fail: () => { + this.loading = false; + // 如果下拉刷新,还原下拉 if (this.touch.dargState === 2) { this.touch.driftTop = 0; setTimeout(() => { this.touch.dargState = 0; }, 300); } - }, 100); - }, - // 加载失败 - fail: () => { - this.loading = false; - // 还原下拉 - if (this.touch.dargState === 2) { - this.touch.driftTop = 0; - setTimeout(() => { - this.touch.dargState = 0; - }, 300); - } - }, - }); + }, + }); + }, 100); }, onScroll(evt) { // 已经滚动(滚动后禁止下拉刷新) @@ -195,14 +201,6 @@ // 小程序中滚动到底部 onScrollToLower() { if (process.env.TARO_ENV !== 'weapp') { - return; - } - this.hanldeLoadMore(); - }, - // 初始加载 - initScroll() { - // 已初始化,跳过 - if (this.inital) { return; } this.hanldeLoadMore(); @@ -292,7 +290,20 @@ } } }, - refresh() { + // 初始加载 + $initScroll() { + // 已初始化,跳过 + if (this.inital) { + return; + } + this.hanldeLoadMore(); + }, + // 刷新加载 + $refresh() { + Taro.pageScrollTo({ + selector: '#' + this.elmId, + scrollTop: 0, + }); this.ending = false; this.current = 0; this.hanldeLoadMore(); -- Gitblit v1.9.1