z-paging.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. <!-- _
  2. ____ _ __ __ _ __ _(_)_ __ __ _
  3. |_ /____| '_ \ / _` |/ _` | | '_ \ / _` |
  4. / /_____| |_) | (_| | (_| | | | | | (_| |
  5. /___| | .__/ \__,_|\__, |_|_| |_|\__, |
  6. |_| |___/ |___/
  7. v2.4.8 (2022-11-03)
  8. by ZXLee
  9. -->
  10. <!-- API文档地址:https://z-paging.zxlee.cn -->
  11. <!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
  12. <!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
  13. <!-- 反馈QQ群:790460711 -->
  14. <template name="z-paging">
  15. <!-- #ifndef APP-NVUE -->
  16. <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]">
  17. <!-- #ifndef APP-PLUS -->
  18. <view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view>
  19. <!-- #endif -->
  20. <!-- 顶部固定的slot -->
  21. <slot v-if="!usePageScroll&&$slots.top" name="top" />
  22. <view class="zp-page-top" v-else-if="usePageScroll&&$slots.top" :style="[{'top':`${windowTop}px`,'z-index':topZIndex}]">
  23. <slot name="top" />
  24. </view>
  25. <view :class="{'zp-view-super':true,'zp-scroll-view-super':!usePageScroll}" :style="[finalScrollViewStyle]">
  26. <view v-if="$slots.left" :class="{'zp-page-left':true,'zp-absoulte':finalIsOldWebView}">
  27. <slot name="left" />
  28. </view>
  29. <view :class="{'zp-scroll-view-container':true,'zp-absoulte':finalIsOldWebView}" :style="[scrollViewContainerStyle]">
  30. <scroll-view
  31. ref="zp-scroll-view" :class="{'zp-scroll-view':true,'zp-scroll-view-absolute':!usePageScroll,'zp-scroll-view-hide-scrollbar':!showScrollbar}"
  32. :scroll-top="scrollTop" :scroll-x="scrollX"
  33. :scroll-y="scrollable&&!usePageScroll&&scrollEnable&&(refresherCompleteScrollable?true:refresherStatus!==R.Complete)" :enable-back-to-top="finalEnableBackToTop"
  34. :show-scrollbar="showScrollbar" :scroll-with-animation="finalScrollWithAnimation"
  35. :scroll-into-view="scrollIntoView" :lower-threshold="finalLowerThreshold" :upper-threshold="5"
  36. :refresher-enabled="finalRefresherEnabled&&!useCustomRefresher" :refresher-threshold="finalRefresherThreshold"
  37. :refresher-default-style="finalRefresherDefaultStyle" :refresher-background="refresherBackground"
  38. :refresher-triggered="finalRefresherTriggered" @scroll="_scroll" @scrolltolower="_onLoadingMore('toBottom')"
  39. @scrolltoupper="_scrollToUpper" @refresherrestore="_onRestore" @refresherrefresh="_onRefresh(true)"
  40. >
  41. <view class="zp-paging-touch-view"
  42. <!-- #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
  43. @touchstart="_refresherTouchstart" @touchmove="_refresherTouchmove" @touchend="_refresherTouchend" @touchcancel="_refresherTouchend"
  44. <!-- #endif -->
  45. <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
  46. @touchstart="pagingWxs.touchstart" @touchmove="pagingWxs.touchmove" @touchend="pagingWxs.touchend" @touchcancel="pagingWxs.touchend"
  47. @mousedown="pagingWxs.mousedown" @mousemove="pagingWxs.mousemove" @mouseup="pagingWxs.mouseup" @mouseleave="pagingWxs.mouseleave"
  48. <!-- #endif -->
  49. >
  50. <view v-if="finalRefresherFixedBacHeight>0" class="zp-fixed-bac-view" :style="[{'background': refresherFixedBackground,'height': `${finalRefresherFixedBacHeight}px`}]"></view>
  51. <view class="zp-paging-main" :style="[scrollViewInStyle,{'transform': finalRefresherTransform,'transition': refresherTransition}]"
  52. <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
  53. :change:prop="pagingWxs.propObserver" :prop="wxsPropType"
  54. :data-refresherThreshold="finalRefresherThreshold" :data-isIos="isIos"
  55. :data-loading="loading||isRefresherInComplete" :data-useChatRecordMode="useChatRecordMode"
  56. :data-refresherEnabled="refresherEnabled" :data-useCustomRefresher="useCustomRefresher" :data-pageScrollTop="wxsPageScrollTop"
  57. :data-scrollTop="wxsScrollTop" :data-refresherMaxAngle="refresherMaxAngle"
  58. :data-refresherAecc="refresherAngleEnableChangeContinued" :data-usePageScroll="usePageScroll" :data-watchTouchDirectionChange="watchTouchDirectionChange"
  59. :data-oldIsTouchmoving="isTouchmoving" :data-refresherOutRate="finalRefresherOutRate" :data-refresherPullRate="finalRefresherPullRate" :data-hasTouchmove="hasTouchmove"
  60. <!-- #endif -->
  61. <!-- #ifdef APP-VUE || H5 -->
  62. :change:renderPropIsIosAndH5="pagingRenderjs.renderPropIsIosAndH5Change" :renderPropIsIosAndH5="isIosAndH5"
  63. <!-- #endif -->
  64. >
  65. <view v-if="showRefresher" class="zp-custom-refresher-view" :style="[{'margin-top': `-${finalRefresherThreshold}px`,'background': refresherBackground,'opacity': isTouchmoving ? 1 : 0}]">
  66. <view class="zp-custom-refresher-container" :style="[{'height': `${finalRefresherThreshold}px`,'background': refresherBackground}]">
  67. <!-- 下拉刷新view -->
  68. <view class="zp-custom-refresher-slot-view">
  69. <slot v-if="!($slots.refresherComplete&&refresherStatus===R.Complete)" :refresherStatus="refresherStatus" name="refresher" />
  70. </view>
  71. <slot v-if="$slots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
  72. <z-paging-refresh ref="refresh" v-else-if="!showCustomRefresher" :style="[{'height': `${finalRefresherThreshold}px`}]" :status="refresherStatus"
  73. :defaultThemeStyle="finalRefresherThemeStyle" :defaultText="finalRefresherDefaultText"
  74. :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText"
  75. :defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg"
  76. :showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
  77. :imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" />
  78. </view>
  79. </view>
  80. <view class="zp-paging-container">
  81. <slot v-if="useChatRecordMode&&$slots.chatLoading&&loadingStatus!==M.NoMore&&realTotalData.length" name="chatLoading" />
  82. <view v-else-if="useChatRecordMode&&loadingStatus!==M.NoMore&&realTotalData.length" class="zp-chat-record-loading-container">
  83. <text v-if="loadingStatus!==M.Loading" @click="_scrollToUpper()"
  84. :class="defaultThemeStyle==='white'?'zp-loading-more-text zp-loading-more-text-white':'zp-loading-more-text zp-loading-more-text-black'">{{chatRecordLoadingMoreText}}</text>
  85. <image v-else :src="base64Flower" class="zp-chat-record-loading-custom-image" />
  86. </view>
  87. <!-- 全屏Loading -->
  88. <slot v-if="showLoading&&$slots.loading&&!loadingFullFixed" name="loading" />
  89. <!-- 主体内容 -->
  90. <view class="zp-paging-container-content" :style="[{transform:virtualPlaceholderTopHeight>0?`translateY(${virtualPlaceholderTopHeight}px)`:'none'},finalPagingContentStyle]">
  91. <slot />
  92. <!-- 内置列表&虚拟列表 -->
  93. <template v-if="finalUseInnerList">
  94. <slot name="header"/>
  95. <view class="zp-list-container" :style="[innerListStyle]">
  96. <template v-if="finalUseVirtualList">
  97. <view class="zp-list-cell" :style="[innerCellStyle]" :id="`zp-id-${item['zp_index']}`" v-for="(item,index) in virtualList" :key="item['zp_unique_index']" @click="_innerCellClick(item,virtualTopRangeIndex+index)">
  98. <view v-if="useCompatibilityMode">使用兼容模式请在组件源码z-paging.vue第99行中注释这一行,并打开下面一行注释</view>
  99. <!-- <zp-public-virtual-cell v-if="useCompatibilityMode" :extraData="extraData" :item="item" :index="virtualTopRangeIndex+index" /> -->
  100. <slot v-else name="cell" :item="item" :index="virtualTopRangeIndex+index"/>
  101. </view>
  102. </template>
  103. <template v-else>
  104. <view class="zp-list-cell" v-for="(item,index) in realTotalData" :key="index" @click="_innerCellClick(item,index)">
  105. <slot name="cell" :item="item" :index="index"/>
  106. </view>
  107. </template>
  108. </view>
  109. <slot name="footer"/>
  110. </template>
  111. <view v-if="useVirtualList" class="zp-virtual-placeholder" :style="[{height:virtualPlaceholderBottomHeight+'px'}]"/>
  112. <!-- 上拉加载更多view -->
  113. <!-- #ifndef MP-ALIPAY -->
  114. <slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" />
  115. <slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" />
  116. <slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" />
  117. <slot v-else-if="showLoadingMoreFail" name="loadingMoreFail" />
  118. <z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMoreCustom" :config="zLoadMoreConfig" />
  119. <!-- #endif -->
  120. <!-- #ifdef MP-ALIPAY -->
  121. <slot v-if="loadingStatus===M.Default&&$slots.loadingMoreDefault&&showLoadingMore&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreDefault" />
  122. <slot v-else-if="loadingStatus===M.Loading&&$slots.loadingMoreLoading&&showLoadingMore&&loadingMoreEnabled" name="loadingMoreLoading" />
  123. <slot v-else-if="loadingStatus===M.NoMore&&$slots.loadingMoreNoMore&&showLoadingMore&&showLoadingMoreNoMoreView&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreNoMore" />
  124. <slot v-else-if="loadingStatus===M.Fail&&$slots.loadingMoreFail&&showLoadingMore&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreFail" />
  125. <z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMore&&showDefaultLoadingMoreText&&!(loadingStatus===M.NoMore&&!showLoadingMoreNoMoreView)&&loadingMoreEnabled&&!useChatRecordMode" :config="zLoadMoreConfig" />
  126. <!-- #endif -->
  127. <view v-if="safeAreaInsetBottom && useSafeAreaPlaceholder" class="zp-safe-area-placeholder" :style="[{height:safeAreaBottom+'px'}]" />
  128. </view>
  129. <!-- 空数据图 -->
  130. <view :class="{'zp-empty-view':true,'zp-empty-view-center':emptyViewCenter}" :style="[{emptyViewSuperStyle}]" v-if="showEmpty">
  131. <slot v-if="$slots.empty" name="empty" />
  132. <z-paging-empty-view v-else :emptyViewImg="finalEmptyViewImg" :emptyViewText="finalEmptyViewText" :showEmptyViewReload="finalShowEmptyViewReload"
  133. :emptyViewReloadText="finalEmptyViewReloadText" :isLoadFailed="isLoadFailed" :emptyViewStyle="emptyViewStyle" :emptyViewTitleStyle="emptyViewTitleStyle"
  134. :emptyViewImgStyle="emptyViewImgStyle" :emptyViewReloadStyle="emptyViewReloadStyle" :emptyViewZIndex="emptyViewZIndex" :emptyViewFixed="emptyViewFixed"
  135. @reload="_emptyViewReload" @viewClick="_emptyViewClick" />
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. </scroll-view>
  141. </view>
  142. <view v-if="$slots.right" :class="{'zp-page-right':true,'zp-absoulte zp-right':finalIsOldWebView}">
  143. <slot name="right" />
  144. </view>
  145. </view>
  146. <!-- 底部固定的slot -->
  147. <slot v-if="!usePageScroll&&$slots.bottom" name="bottom" />
  148. <view class="zp-page-bottom" v-else-if="usePageScroll&&$slots.bottom" :style="[{'bottom': `${windowBottom}px`}]">
  149. <slot name="bottom" />
  150. </view>
  151. <!-- 点击返回顶部view -->
  152. <view v-if="showBackToTopClass" :class="backToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
  153. <slot v-if="$slots.backToTop" name="backToTop" />
  154. <image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
  155. </view>
  156. <!-- 全屏Loading(铺满z-paging并固定) -->
  157. <view v-if="showLoading&&$slots.loading&&loadingFullFixed" class="zp-loading-fixed">
  158. <slot name="loading" />
  159. </view>
  160. </view>
  161. <!-- #endif -->
  162. <!-- #ifdef APP-NVUE -->
  163. <component :is="finalNvueSuperListIs" :style="[finalPagingStyle]" :class="{'z-paging-content-fixed':fixed&&!usePageScroll}" :scrollable="false">
  164. <!-- 顶部固定的slot -->
  165. <view ref="zp-page-top" v-if="$slots.top" :class="{'zp-page-top':usePageScroll}" :style="[usePageScroll?{'top':`${windowTop}px`,'z-index':topZIndex}:{}]">
  166. <slot name="top" />
  167. </view>
  168. <component :is="finalNvueSuperListIs" class="zp-n-list-container" :scrollable="false">
  169. <view v-if="$slots.left" class="zp-page-left">
  170. <slot name="left" />
  171. </view>
  172. <component :is="finalNvueListIs" ref="zp-n-list" :id="nvueListId" :style="[{'flex': 1,'top':isIos?'0px':'-1px'},usePageScroll?scrollViewStyle:{},nChatRecordRotateStyle]" :alwaysScrollableVertical="true"
  173. :fixFreezing="nFixFreezing" :show-scrollbar="showScrollbar&&!useChatRecordMode" :loadmoreoffset="finalLowerThreshold" :enable-back-to-top="enableBackToTop"
  174. :scrollable="scrollable&&scrollEnable&&(refresherCompleteScrollable?true:refresherStatus!==R.Complete)" :bounce="nvueBounce" :column-count="nWaterfallColumnCount" :column-width="nWaterfallColumnWidth"
  175. :column-gap="nWaterfallColumnGap" :left-gap="nWaterfallLeftGap" :right-gap="nWaterfallRightGap" :pagingEnabled="nvuePagingEnabled" :offset-accuracy="offsetAccuracy"
  176. @loadmore="_nOnLoadmore" @scroll="_nOnScroll">
  177. <refresh v-if="($slots.top?cacheTopHeight!==-1:true)&&finalNvueRefresherEnabled" class="zp-n-refresh" :style="[nvueRefresherStyle]" :display="nRefresherLoading?'show':'hide'" @refresh="_nOnRrefresh" @pullingdown="_nOnPullingdown">
  178. <view ref="zp-n-refresh-container" class="zp-n-refresh-container" :style="[{background:refresherBackground,width:nRefresherWidth}]" id="zp-n-refresh-container">
  179. <!-- 下拉刷新view -->
  180. <slot v-if="$slots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
  181. <slot v-else-if="(nScopedSlots?nScopedSlots:$slots).refresher" :refresherStatus="refresherStatus" name="refresher" />
  182. <z-paging-refresh ref="refresh" v-else :status="refresherStatus" :defaultThemeStyle="finalRefresherThemeStyle"
  183. :defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText"
  184. :defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg"
  185. :showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
  186. :imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" />
  187. </view>
  188. </refresh>
  189. <component :is="nViewIs" v-if="isIos&&!useChatRecordMode?oldScrollTop>10:true" ref="zp-n-list-top-tag" class="zp-n-list-top-tag" style="margin-top: -1rpx;" :style="[{height:finalNvueRefresherEnabled?'0px':'1px'}]"></component>
  190. <component :is="nViewIs" v-if="nShowRefresherReveal" ref="zp-n-list-refresher-reveal" :style="[{transform:`translateY(-${nShowRefresherRevealHeight}px)`},{background:refresherBackground}]">
  191. <!-- 下拉刷新view -->
  192. <slot v-if="$slots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
  193. <slot v-else-if="(nScopedSlots?nScopedSlots:$slots).refresher" :refresherStatus="R.Loading" name="refresher" />
  194. <z-paging-refresh ref="refresh" v-else :status="R.Loading" :defaultThemeStyle="finalRefresherThemeStyle"
  195. :defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText"
  196. :defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg"
  197. :showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
  198. :imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" />
  199. </component>
  200. <template v-if="finalUseInnerList">
  201. <component :is="nViewIs">
  202. <slot name="header"/>
  203. </component>
  204. <component :is="nViewIs" class="zp-list-cell" v-for="(item,index) in realTotalData" :key="finalCellKeyName.length?item[finalCellKeyName]:index">
  205. <slot name="cell" :item="item" :index="index"/>
  206. </component>
  207. <component :is="nViewIs">
  208. <slot name="footer"/>
  209. </component>
  210. </template>
  211. <template v-else>
  212. <slot />
  213. </template>
  214. <!-- 全屏Loading -->
  215. <component :is="nViewIs" v-if="showLoading&&$slots.loading&&!loadingFullFixed" :class="{'z-paging-content-fixed':usePageScroll}" style="flex: 1;" :style="[nChatRecordRotateStyle]">
  216. <slot name="loading" />
  217. </component>
  218. <!-- 空数据图 -->
  219. <component :is="nViewIs" v-if="showEmpty" :class="{'z-paging-content-fixed':usePageScroll}" :style="[{flex:emptyViewCenter?1:0},emptyViewSuperStyle,nChatRecordRotateStyle]">
  220. <view :class="{'zp-empty-view':true,'zp-empty-view-center':emptyViewCenter}">
  221. <slot v-if="$slots.empty" name="empty" />
  222. <z-paging-empty-view v-else :emptyViewImg="finalEmptyViewImg" :emptyViewText="finalEmptyViewText" :showEmptyViewReload="finalShowEmptyViewReload"
  223. :emptyViewReloadText="finalEmptyViewReloadText" :isLoadFailed="isLoadFailed" :emptyViewStyle="emptyViewStyle" :emptyViewTitleStyle="emptyViewTitleStyle"
  224. :emptyViewImgStyle="emptyViewImgStyle" :emptyViewReloadStyle="emptyViewReloadStyle" :emptyViewZIndex="emptyViewZIndex" :emptyViewFixed="emptyViewFixed"
  225. @reload="_emptyViewReload" @viewClick="_emptyViewClick" />
  226. </view>
  227. </component>
  228. <component is="header" v-if="!hideNvueBottomTag" ref="zp-n-list-bottom-tag" class="zp-n-list-bottom-tag"></component>
  229. <!-- 上拉加载更多view -->
  230. <component :is="nViewIs" v-if="!refresherOnly&&loadingMoreEnabled">
  231. <view v-if="useChatRecordMode">
  232. <view v-if="loadingStatus!==M.NoMore&&realTotalData.length">
  233. <slot v-if="$slots.chatLoading" name="chatLoading" />
  234. <view v-else class="zp-chat-record-loading-container">
  235. <text v-if="loadingStatus!==M.Loading" @click="_scrollToUpper()"
  236. :class="defaultThemeStyle==='white'?'zp-loading-more-text zp-loading-more-text-white':'zp-loading-more-text zp-loading-more-text-black'">{{chatRecordLoadingMoreText}}</text>
  237. <view>
  238. <loading-indicator v-if="loadingStatus===M.Loading" class="zp-line-loading-image" animating />
  239. </view>
  240. </view>
  241. </view>
  242. </view>
  243. <view :style="nLoadingMoreFixedHeight?{height:loadingMoreCustomStyle&&loadingMoreCustomStyle.height?loadingMoreCustomStyle.height:'80rpx'}:{}">
  244. <slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" />
  245. <slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" />
  246. <slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" />
  247. <slot v-else-if="showLoadingMoreFail" name="loadingMoreFail" />
  248. <z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMoreCustom" :config="zLoadMoreConfig" />
  249. <view v-if="safeAreaInsetBottom && useSafeAreaPlaceholder" class="zp-safe-area-placeholder" :style="[{height:safeAreaBottom+'px'}]" />
  250. </view>
  251. </component>
  252. </component>
  253. <view v-if="$slots.right" class="zp-page-right">
  254. <slot name="right" />
  255. </view>
  256. </component>
  257. <!-- 底部固定的slot -->
  258. <slot name="bottom" />
  259. <!-- 点击返回顶部view -->
  260. <view v-if="showBackToTopClass" :class="backToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
  261. <slot v-if="$slots.backToTop" name="backToTop" />
  262. <image v-else class="zp-back-to-top-img" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
  263. </view>
  264. <!-- 全屏Loading(铺满z-paging并固定) -->
  265. <view v-if="showLoading&&$slots.loading&&loadingFullFixed" class="zp-loading-fixed">
  266. <slot name="loading" />
  267. </view>
  268. </component>
  269. <!-- #endif -->
  270. </template>
  271. <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 -->
  272. <script src="./wxs/z-paging-wxs.wxs" module="pagingWxs" lang="wxs"></script>
  273. <!-- #endif -->
  274. <script module="pagingRenderjs" lang="renderjs">
  275. import pagingRenderjs from './wxs/z-paging-renderjs.js';
  276. /**
  277. * z-paging 分页组件
  278. * @description 高性能,全平台兼容。支持虚拟列表,支持nvue、vue3
  279. * @tutorial https://z-paging.zxlee.cn
  280. * @notice 以下仅为部分常用属性、方法和事件,完整文档请查阅z-paging官网
  281. * @property {Number|String} default-page-no 自定义初始的pageNo,默认为1
  282. * @property {Number|String} default-page-size 自定义pageSize,默认为10
  283. * @property {Object} paging-style 设置z-paging的style,部分平台(如微信小程序)无法直接修改组件的style,可使用此属性代替
  284. * @property {String} height z-paging的高度,优先级低于pagingStyle中设置的height,传字符串,如100px、100rpx、100%
  285. * @property {String} width z-paging的宽度,优先级低于pagingStyle中设置的width,传字符串,如100px、100rpx、100%
  286. * @property {String} bg-color z-paging的背景色,优先级低于pagingStyle中设置的background。传字符串,如"#ffffff"
  287. * @property {Boolean} use-page-scroll 使用页面滚动,默认为否
  288. * @property {Boolean} use-virtual-list 是否使用虚拟列表,默认为否
  289. * @property {Boolean} fixed z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认为100%,默认为是(当使用内置scroll-view滚动时有效)
  290. * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区域适配,默认为否
  291. * @property {Boolean} auto [z-paging]mounted后是否自动调用reload方法(mounted后自动调用接口),默认为是
  292. * @property {Boolean} show-refresher-when-reload 列表刷新时是否自动显示下拉刷新view,默认为否
  293. * @property {Boolean} loading-more-enabled 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据),默认为是
  294. * @property {String|Object} empty-view-text 空数据图描述文字,默认为“没有数据哦~”
  295. * @property {String} empty-view-img 空数据图图片,默认使用z-paging内置的图片
  296. * @property {Boolean} auto-show-back-to-top 自动显示点击返回顶部按钮,默认为否
  297. * @property {Boolean} show-refresher-update-time 是否显示上次下拉刷新更新时间,默认为否
  298. * @property {Boolean} use-chat-record-mode 使用聊天记录模式,默认为否
  299. * @property {String} nvue-list-is nvue中修改列表类型,可选值有list、waterfall和scroller,默认为list
  300. * @event {Function} query 下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止,请设置:auto="false")。pageNo和pageSize会自动计算好,直接传给服务器即可。
  301. * @example <z-paging ref="paging" v-model="dataList" @query="queryList"></z-paging>
  302. */
  303. export default {
  304. name:"z-paging",
  305. // #ifdef APP-VUE || H5
  306. mixins: [pagingRenderjs],
  307. // #endif
  308. }
  309. </script>
  310. <script src="./js/z-paging-main.js" />
  311. <style scoped>
  312. @import "./css/z-paging-main.css";
  313. @import "./css/z-paging-static.css";
  314. </style>