|
@@ -4,7 +4,7 @@
|
|
|
/ /_____| |_) | (_| | (_| | | | | | (_| |
|
|
|
/___| | .__/ \__,_|\__, |_|_| |_|\__, |
|
|
|
|_| |___/ |___/
|
|
|
-v2.7.5 (2024-01-23)
|
|
|
+v2.7.12 (2024-09-22)
|
|
|
by ZXLee
|
|
|
-->
|
|
|
<!-- 文档地址:https://z-paging.zxlee.cn -->
|
|
@@ -14,10 +14,14 @@ by ZXLee
|
|
|
|
|
|
<template name="z-paging">
|
|
|
<!-- #ifndef APP-NVUE -->
|
|
|
- <view :class="{'z-paging-content':true,'z-paging-content-fixed':!usePageScroll&&fixed,'z-paging-content-page':usePageScroll,'z-paging-reached-top':renderPropScrollTop<1}" :style="[finalPagingStyle]">
|
|
|
+ <view :class="{'z-paging-content':true,'z-paging-content-full':!usePageScroll,'z-paging-content-fixed':!usePageScroll&&fixed,'z-paging-content-page':usePageScroll,'z-paging-reached-top':renderPropScrollTop<1,'z-paging-use-chat-record-mode':useChatRecordMode}" :style="[finalPagingStyle]">
|
|
|
<!-- #ifndef APP-PLUS -->
|
|
|
<view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view>
|
|
|
<!-- #endif -->
|
|
|
+ <!-- 二楼view -->
|
|
|
+ <view v-if="showF2 && showRefresherF2" @touchmove.stop.prevent class="zp-f2-content" :style="[{'transform': f2Transform, 'transition': `transform .2s linear`, 'height': superContentHeight + 'px', 'z-index': f2ZIndex}]">
|
|
|
+ <slot name="f2"/>
|
|
|
+ </view>
|
|
|
<!-- 顶部固定的slot -->
|
|
|
<slot v-if="!usePageScroll&&zSlots.top" name="top" />
|
|
|
<view class="zp-page-top" @touchmove.stop.prevent v-else-if="usePageScroll&&zSlots.top" :style="[{'top':`${windowTop}px`,'z-index':topZIndex}]">
|
|
@@ -31,7 +35,7 @@ by ZXLee
|
|
|
<scroll-view
|
|
|
ref="zp-scroll-view" :class="{'zp-scroll-view':true,'zp-scroll-view-absolute':!usePageScroll,'zp-scroll-view-hide-scrollbar':!showScrollbar}" :style="[chatRecordRotateStyle]"
|
|
|
:scroll-top="scrollTop" :scroll-x="scrollX"
|
|
|
- :scroll-y="scrollable&&!usePageScroll&&scrollEnable&&(refresherCompleteScrollable?true:refresherStatus!==R.Complete)" :enable-back-to-top="finalEnableBackToTop"
|
|
|
+ :scroll-y="finalScrollable" :enable-back-to-top="finalEnableBackToTop"
|
|
|
:show-scrollbar="showScrollbar" :scroll-with-animation="finalScrollWithAnimation"
|
|
|
:scroll-into-view="scrollIntoView" :lower-threshold="finalLowerThreshold" :upper-threshold="5"
|
|
|
:refresher-enabled="finalRefresherEnabled&&!useCustomRefresher" :refresher-threshold="finalRefresherThreshold"
|
|
@@ -52,7 +56,7 @@ by ZXLee
|
|
|
<view class="zp-paging-main" :style="[scrollViewInStyle,{'transform': finalRefresherTransform,'transition': refresherTransition}]"
|
|
|
<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
|
|
|
:change:prop="pagingWxs.propObserver" :prop="wxsPropType"
|
|
|
- :data-refresherThreshold="finalRefresherThreshold" :data-isIos="isIos"
|
|
|
+ :data-refresherThreshold="finalRefresherThreshold" :data-refresherF2Enabled="refresherF2Enabled" :data-refresherF2Threshold="finalRefresherF2Threshold" :data-isIos="isIos"
|
|
|
:data-loading="loading||isRefresherInComplete" :data-useChatRecordMode="useChatRecordMode"
|
|
|
:data-refresherEnabled="refresherEnabled" :data-useCustomRefresher="useCustomRefresher" :data-pageScrollTop="wxsPageScrollTop"
|
|
|
:data-scrollTop="wxsScrollTop" :data-refresherMaxAngle="refresherMaxAngle" :data-refresherNoTransform="refresherNoTransform"
|
|
@@ -61,7 +65,6 @@ by ZXLee
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef APP-VUE || H5 -->
|
|
|
:change:renderPropIsIosAndH5="pagingRenderjs.renderPropIsIosAndH5Change" :renderPropIsIosAndH5="isIosAndH5"
|
|
|
- :change:renderPropUseChatRecordMode="pagingRenderjs.renderPropUseChatRecordModeChange" :renderPropUseChatRecordMode="useChatRecordMode"
|
|
|
<!-- #endif -->
|
|
|
>
|
|
|
<view v-if="showRefresher" class="zp-custom-refresher-view" :style="[{'margin-top': `-${finalRefresherThreshold+refresherThresholdUpdateTag}px`,'background': refresherBackground,'opacity': isTouchmoving ? 1 : 0}]">
|
|
@@ -69,12 +72,13 @@ by ZXLee
|
|
|
<view v-if="useRefresherStatusBarPlaceholder" class="zp-custom-refresher-status-bar-placeholder" :style="[{'height': `${statusBarHeight}px`}]" />
|
|
|
<!-- 下拉刷新view -->
|
|
|
<view class="zp-custom-refresher-slot-view">
|
|
|
- <slot v-if="!(zSlots.refresherComplete&&refresherStatus===R.Complete)" :refresherStatus="refresherStatus" name="refresher" />
|
|
|
+ <slot v-if="!(zSlots.refresherComplete&&refresherStatus===R.Complete)&&!(zSlots.refresherF2&&refresherStatus===R.GoF2)" :refresherStatus="refresherStatus" name="refresher" />
|
|
|
</view>
|
|
|
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
|
|
+ <slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
|
|
<z-paging-refresh ref="refresh" v-else-if="!showCustomRefresher" class="zp-custom-refresher-refresh" :style="[{'height': `${finalRefresherThreshold - finalRefresherThresholdPlaceholder}px`}]" :status="refresherStatus"
|
|
|
:defaultThemeStyle="finalRefresherThemeStyle" :defaultText="finalRefresherDefaultText"
|
|
|
- :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText"
|
|
|
+ :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
|
|
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
|
|
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
|
|
:imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" :unit="unit" />
|
|
@@ -92,7 +96,7 @@ by ZXLee
|
|
|
<view class="zp-list-container" :style="[innerListStyle]">
|
|
|
<template v-if="finalUseVirtualList">
|
|
|
<view class="zp-list-cell" :style="[innerCellStyle]" :id="`zp-id-${item[virtualCellIndexKey]}`" v-for="(item,index) in virtualList" :key="item['zp_unique_index']" @click="_innerCellClick(item,virtualTopRangeIndex+index)">
|
|
|
- <view v-if="useCompatibilityMode">使用兼容模式请在组件源码z-paging.vue第95行中注释这一行,并打开下面一行注释</view>
|
|
|
+ <view v-if="useCompatibilityMode">使用兼容模式请在组件源码z-paging.vue第99行中注释这一行,并打开下面一行注释</view>
|
|
|
<!-- <zp-public-virtual-cell v-if="useCompatibilityMode" :extraData="extraData" :item="item" :index="virtualTopRangeIndex+index" /> -->
|
|
|
<slot v-else name="cell" :item="item" :index="virtualTopRangeIndex+index"/>
|
|
|
</view>
|
|
@@ -106,7 +110,7 @@ by ZXLee
|
|
|
<slot name="footer"/>
|
|
|
</template>
|
|
|
<!-- 聊天记录模式加载更多loading -->
|
|
|
- <template v-if="useChatRecordMode&&(loadingStatus!==M.NoMore||zSlots.chatNoMore)&&(realTotalData.length||(showChatLoadingWhenReload&&showLoading))">
|
|
|
+ <template v-if="useChatRecordMode&&realTotalData.length>=defaultPageSize&&(loadingStatus!==M.NoMore||zSlots.chatNoMore)&&(realTotalData.length||(showChatLoadingWhenReload&&showLoading))&&!isFirstPageAndNoMore">
|
|
|
<view :style="[chatRecordRotateStyle]">
|
|
|
<slot v-if="loadingStatus===M.NoMore&&zSlots.chatNoMore" name="chatNoMore" />
|
|
|
<template v-else>
|
|
@@ -166,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">
|
|
@@ -175,7 +179,11 @@ by ZXLee
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef APP-NVUE -->
|
|
|
- <component :is="finalNvueSuperListIs" :style="[finalPagingStyle]" :class="{'z-paging-content-fixed':fixed&&!usePageScroll}" :scrollable="false">
|
|
|
+ <component ref="z-paging-content" :is="finalNvueSuperListIs" :style="[finalPagingStyle]" :class="{'z-paging-content-fixed':fixed&&!usePageScroll}" :scrollable="false">
|
|
|
+ <!-- 二楼view -->
|
|
|
+ <view v-if="showF2 && showRefresherF2" ref="zp-n-f2" class="zp-f2-content" @touchmove.stop.prevent :style="[{'height': superContentHeight + 'px', 'width': nRefresherWidth + 'px', 'opacity': nF2Opacity}]">
|
|
|
+ <slot name="f2"/>
|
|
|
+ </view>
|
|
|
<!-- 顶部固定的slot -->
|
|
|
<view ref="zp-page-top" v-if="zSlots.top" :class="{'zp-page-top':usePageScroll}" :style="[usePageScroll?{'top':`${windowTop}px`,'z-index':topZIndex}:{}]">
|
|
|
<slot name="top" />
|
|
@@ -190,8 +198,8 @@ by ZXLee
|
|
|
<slot name="left" />
|
|
|
</view>
|
|
|
<component :is="finalNvueListIs" ref="zp-n-list" :id="nvueListId" :style="[{'flex': 1,'top':isIos?'0px':'-1px'},usePageScroll?scrollViewStyle:{},chatRecordRotateStyle]" :alwaysScrollableVertical="true"
|
|
|
- :fixFreezing="nFixFreezing" :show-scrollbar="showScrollbar&&!useChatRecordMode" :loadmoreoffset="finalLowerThreshold" :enable-back-to-top="enableBackToTop"
|
|
|
- :scrollable="scrollable&&scrollEnable&&(refresherCompleteScrollable?true:refresherStatus!==R.Complete)" :bounce="nvueBounce" :column-count="nWaterfallColumnCount" :column-width="nWaterfallColumnWidth"
|
|
|
+ :fixFreezing="nFixFreezing" :show-scrollbar="showScrollbar" :loadmoreoffset="finalLowerThreshold" :enable-back-to-top="enableBackToTop"
|
|
|
+ :scrollable="finalScrollable" :bounce="nvueBounce" :column-count="nWaterfallColumnCount" :column-width="nWaterfallColumnWidth"
|
|
|
:column-gap="nWaterfallColumnGap" :left-gap="nWaterfallLeftGap" :right-gap="nWaterfallRightGap" :pagingEnabled="nvuePagingEnabled" :offset-accuracy="offsetAccuracy"
|
|
|
@loadmore="_nOnLoadmore" @scroll="_nOnScroll" @scrollend="_nOnScrollend">
|
|
|
<refresh v-if="(zSlots.top?cacheTopHeight!==-1:true)&&finalNvueRefresherEnabled" class="zp-n-refresh" :style="[nvueRefresherStyle]" :display="nRefresherLoading?'show':'hide'" @refresh="_nOnRrefresh" @pullingdown="_nOnPullingdown">
|
|
@@ -199,9 +207,10 @@ by ZXLee
|
|
|
<view v-if="useRefresherStatusBarPlaceholder" class="zp-custom-refresher-status-bar-placeholder" :style="[{'height': `${statusBarHeight}px`}]" />
|
|
|
<!-- 下拉刷新view -->
|
|
|
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
|
|
+ <slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
|
|
<slot v-else-if="(nScopedSlots?nScopedSlots:zSlots).refresher" :refresherStatus="refresherStatus" name="refresher" />
|
|
|
<z-paging-refresh ref="refresh" v-else :status="refresherStatus" :defaultThemeStyle="finalRefresherThemeStyle"
|
|
|
- :defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText"
|
|
|
+ :defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
|
|
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
|
|
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
|
|
:imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" :unit="unit" />
|
|
@@ -212,9 +221,10 @@ by ZXLee
|
|
|
<view v-if="useRefresherStatusBarPlaceholder" class="zp-custom-refresher-status-bar-placeholder" :style="[{'height': `${statusBarHeight}px`}]" />
|
|
|
<!-- 下拉刷新view -->
|
|
|
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
|
|
+ <slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
|
|
<slot v-else-if="(nScopedSlots?nScopedSlots:$slots).refresher" :refresherStatus="R.Loading" name="refresher" />
|
|
|
<z-paging-refresh ref="refresh" v-else :status="R.Loading" :defaultThemeStyle="finalRefresherThemeStyle"
|
|
|
- :defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText"
|
|
|
+ :defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
|
|
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
|
|
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
|
|
:imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" :unit="unit" />
|
|
@@ -241,7 +251,7 @@ by ZXLee
|
|
|
<!-- 上拉加载更多view -->
|
|
|
<component :is="nViewIs" v-if="!refresherOnly&&loadingMoreEnabled&&!showEmpty">
|
|
|
<!-- 聊天记录模式加载更多loading(滚动到顶部加载更多或无更多数据时显示) -->
|
|
|
- <template v-if="useChatRecordMode&&(loadingStatus!==M.NoMore||zSlots.chatNoMore)">
|
|
|
+ <template v-if="useChatRecordMode&&realTotalData.length>=defaultPageSize&&(loadingStatus!==M.NoMore||zSlots.chatNoMore)&&realTotalData.length&&isChatRecordModeAndInversion">
|
|
|
<view :style="[chatRecordRotateStyle]">
|
|
|
<slot v-if="loadingStatus===M.NoMore&&zSlots.chatNoMore" name="chatNoMore" />
|
|
|
<template v-else>
|
|
@@ -251,7 +261,7 @@ by ZXLee
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
- <view :style="nLoadingMoreFixedHeight?{height:loadingMoreCustomStyle&&loadingMoreCustomStyle.height?loadingMoreCustomStyle.height:'80rpx'}:{}">
|
|
|
+ <view :style="nLoadingMoreFixedHeight?{height:loadingMoreCustomStyle&&loadingMoreCustomStyle.height?loadingMoreCustomStyle.height:loadingMoreFixedHeight}:{}">
|
|
|
<slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" />
|
|
|
<slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" />
|
|
|
<slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" />
|
|
@@ -288,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">
|