v2.7.12-在聊天记录模式中，点击返回顶部按钮调整为点击返回底部

SmileZXLee · Sep 21, 2024 · 910ae19 · 910ae19
1 parent f2eb429
commit 910ae19
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 12 deletions.
diff --git a/demo/z-paging-demo/uni_modules/z-paging/components/z-paging/css/z-paging-main.css b/demo/z-paging-demo/uni_modules/z-paging/components/z-paging/css/z-paging-main.css
@@ -193,6 +193,10 @@
 	z-index: 999;
 }
 
+.zp-back-to-top-img-inversion {
+	transform: rotate(180deg);
+}
+
 .zp-empty-view {
 	/* #ifdef APP-NVUE */
 	height: 100%;

diff --git a/demo/z-paging-demo/uni_modules/z-paging/components/z-paging/js/modules/back-to-top.js b/demo/z-paging-demo/uni_modules/z-paging/components/z-paging/js/modules/back-to-top.js
@@ -89,10 +89,10 @@ export default {
 				!callbacked && this._handleToTop();
 			})
 		},
-		// 处理滚动到顶部
+		// 处理滚动到顶部（聊天记录模式中为滚动到底部）
 		_handleToTop() {
 			!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
-			this.scrollToTop(this.backToTopWithAnimate);
+			!this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate);
 		},
 		// 判断是否要显示返回顶部按钮
 		_checkShouldShowBackToTop(scrollTop) {

diff --git a/demo/z-paging-demo/uni_modules/z-paging/components/z-paging/z-paging.vue b/demo/z-paging-demo/uni_modules/z-paging/components/z-paging/z-paging.vue
@@ -170,7 +170,7 @@ by ZXLee
 		<!-- 点击返回顶部view -->
 		<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
 			<slot v-if="zSlots.backToTop" name="backToTop" />
-			<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
+			<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
 		</view>
 		<!-- 全屏Loading(铺满z-paging并固定) -->
 		<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
@@ -298,7 +298,7 @@ by ZXLee
 		<!-- 点击返回顶部view -->
 		<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
 			<slot v-if="zSlots.backToTop" name="backToTop" />
-			<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
+			<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
 		</view>
 		<!-- 全屏Loading(铺满z-paging并固定) -->
 		<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">

diff --git a/demo/z-paging-vue3-demo/uni_modules/z-paging/components/z-paging/css/z-paging-main.css b/demo/z-paging-vue3-demo/uni_modules/z-paging/components/z-paging/css/z-paging-main.css
@@ -193,6 +193,10 @@
 	z-index: 999;
 }
 
+.zp-back-to-top-img-inversion {
+	transform: rotate(180deg);
+}
+
 .zp-empty-view {
 	/* #ifdef APP-NVUE */
 	height: 100%;

diff --git a/demo/z-paging-vue3-demo/uni_modules/z-paging/components/z-paging/js/modules/back-to-top.js b/demo/z-paging-vue3-demo/uni_modules/z-paging/components/z-paging/js/modules/back-to-top.js
@@ -89,10 +89,10 @@ export default {
 				!callbacked && this._handleToTop();
 			})
 		},
-		// 处理滚动到顶部
+		// 处理滚动到顶部（聊天记录模式中为滚动到底部）
 		_handleToTop() {
 			!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
-			this.scrollToTop(this.backToTopWithAnimate);
+			!this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate);
 		},
 		// 判断是否要显示返回顶部按钮
 		_checkShouldShowBackToTop(scrollTop) {

diff --git a/demo/z-paging-vue3-demo/uni_modules/z-paging/components/z-paging/z-paging.vue b/demo/z-paging-vue3-demo/uni_modules/z-paging/components/z-paging/z-paging.vue
@@ -170,7 +170,7 @@ by ZXLee
 		<!-- 点击返回顶部view -->
 		<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
 			<slot v-if="zSlots.backToTop" name="backToTop" />
-			<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
+			<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
 		</view>
 		<!-- 全屏Loading(铺满z-paging并固定) -->
 		<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
@@ -298,7 +298,7 @@ by ZXLee
 		<!-- 点击返回顶部view -->
 		<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
 			<slot v-if="zSlots.backToTop" name="backToTop" />
-			<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
+			<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
 		</view>
 		<!-- 全屏Loading(铺满z-paging并固定) -->
 		<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">

diff --git a/z-paging/components/z-paging/css/z-paging-main.css b/z-paging/components/z-paging/css/z-paging-main.css
@@ -193,6 +193,10 @@
 	z-index: 999;
 }
 
+.zp-back-to-top-img-inversion {
+	transform: rotate(180deg);
+}
+
 .zp-empty-view {
 	/* #ifdef APP-NVUE */
 	height: 100%;

diff --git a/z-paging/components/z-paging/js/modules/back-to-top.js b/z-paging/components/z-paging/js/modules/back-to-top.js
@@ -89,10 +89,10 @@ export default {
 				!callbacked && this._handleToTop();
 			})
 		},
-		// 处理滚动到顶部
+		// 处理滚动到顶部（聊天记录模式中为滚动到底部）
 		_handleToTop() {
 			!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
-			this.scrollToTop(this.backToTopWithAnimate);
+			!this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate);
 		},
 		// 判断是否要显示返回顶部按钮
 		_checkShouldShowBackToTop(scrollTop) {

diff --git a/z-paging/components/z-paging/z-paging.vue b/z-paging/components/z-paging/z-paging.vue
@@ -170,7 +170,7 @@ by ZXLee
 		<!-- 点击返回顶部view -->
 		<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
 			<slot v-if="zSlots.backToTop" name="backToTop" />
-			<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
+			<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
 		</view>
 		<!-- 全屏Loading(铺满z-paging并固定) -->
 		<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
@@ -298,7 +298,7 @@ by ZXLee
 		<!-- 点击返回顶部view -->
 		<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
 			<slot v-if="zSlots.backToTop" name="backToTop" />
-			<image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
+			<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
 		</view>
 		<!-- 全屏Loading(铺满z-paging并固定) -->
 		<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">