From 1e5646aadae902d9f9043cc0d79395bf6b06a38c Mon Sep 17 00:00:00 2001 From: 曹睿 <360930172@qq.com> Date: 星期一, 21 四月 2025 14:46:59 +0800 Subject: [PATCH] feat: 完成框架 --- src/components/z-paging/i18n/zh-Hant.json | 23 src/components/z-paging/wxs/z-paging-wxs.wxs | 382 ++ src/components/z-paging/i18n/en.json | 23 src/pages/production/wire/selfInspect/index.vue | 4 src/components/z-paging/js/modules/back-to-top.js | 125 src/pages/production/detail/wireDetail.vue | 4 src/components/z-paging/z-paging.vue | 538 ++++ src/components/z-paging/js/modules/chat-record-mode.js | 149 + src/components/z-paging/components/z-paging-refresh.vue | 214 + src/components/z-paging/components/z-paging-load-more.vue | 182 + src/components/z-paging/config/index.js | 3 src/pages/production/wire/report/wire.vue | 23 src/components/z-paging-empty-view/z-paging-empty-view.vue | 209 + src/components/z-paging/js/z-paging-main.js | 515 +++ src/components/z-paging/js/modules/refresher.js | 831 ++++++ src/components/z-paging/js/z-paging-utils.js | 302 ++ src/components/z-paging/js/z-paging-interceptor.js | 97 src/pages/production/wire/backman/index.vue | 4 .env.development | 4 src/components/z-paging-swiper-item/z-paging-swiper-item.vue | 160 + src/hooks/useZebraScan.ts | 64 src/pages/production/wire/receive/index.vue | 8 src/components/z-paging/js/z-paging-constant.js | 19 src/components/card-title/index.vue | 9 src/pages/production/twist/receive/steelCore/index.vue | 2 src/components/z-paging/i18n/index.js | 8 src/pages.json | 2 src/components/z-paging/js/modules/load-more.js | 374 ++ src/components/z-paging/js/modules/data-handle.js | 736 +++++ src/pages/production/twist/receive/monofil.vue | 56 src/components/z-paging/js/z-paging-static.js | 13 src/components/z-paging/css/z-paging-static.css | 50 src/components/z-paging/js/z-paging-enum.js | 45 src/pages/production/twist/report/index.vue | 19 src/components/z-paging/js/modules/empty.js | 144 + src/components/z-paging/wxs/z-paging-renderjs.js | 67 src/components/z-paging/css/z-paging-main.css | 241 + src/components/z-paging/js/modules/common-layout.js | 152 + src/components/z-paging/js/modules/nvue.js | 268 ++ src/components/z-paging/js/modules/scroller.js | 550 ++++ src/components/z-paging/js/modules/loading.js | 95 src/api/auth/index.ts | 2 src/components/z-paging/js/hooks/useZPagingComp.js | 25 src/components/scan/index.vue | 15 src/components/z-paging/js/modules/virtual-list.js | 555 ++++ src/components/z-paging/js/hooks/useZPaging.js | 25 src/components/z-paging/js/modules/i18n.js | 113 src/components/z-paging-swiper/z-paging-swiper.vue | 176 + src/components/z-paging/i18n/zh-Hans.json | 23 src/pages/production/detail/twistDetail.vue | 4 src/components/z-paging-cell/z-paging-cell.vue | 47 src/components/z-paging/js/z-paging-mixin.js | 22 52 files changed, 7,669 insertions(+), 52 deletions(-) diff --git a/.env.development b/.env.development index ac161a7..c706c2c 100644 --- a/.env.development +++ b/.env.development @@ -4,7 +4,7 @@ VITE_APP_PORT = 4096 # API 鍩虹璺緞锛屽紑鍙戠幆澧冧笅鐨勮姹傚墠缂� -VITE_APP_BASE_API = '/dev-api' +VITE_APP_BASE_API = '/mes' # API 鏈嶅姟鍣ㄧ殑 URL -VITE_APP_API_URL = https://api.youlai.tech +VITE_APP_API_URL = 'http://114.132.189.42:7002' diff --git a/src/api/auth/index.ts b/src/api/auth/index.ts index 7f8ae3a..8a40613 100644 --- a/src/api/auth/index.ts +++ b/src/api/auth/index.ts @@ -11,7 +11,7 @@ login(data: LoginFormData): Promise<LoginResult> { console.log("data", data); return request<LoginResult>({ - url: "/api/v1/auth/login", + url: "/login", method: "POST", data: data, header: { diff --git a/src/components/card-title/index.vue b/src/components/card-title/index.vue index b18d1d4..c2ef243 100644 --- a/src/components/card-title/index.vue +++ b/src/components/card-title/index.vue @@ -1,6 +1,6 @@ <template> - <view class="flex items-center justify-between page"> - <view class="ml-3"> + <view :class="['flex', 'items-center', 'justify-between', 'page', full ? 'mx-3' : '']"> + <view> <text class="title">{{ title }}</text> </view> <view v-if="hideAction" class="flex justify-center"> @@ -13,6 +13,10 @@ </template> <script setup lang="ts"> defineProps({ + full: { + type: Boolean, + default: true, + }, title: String, hideAction: Boolean, }); @@ -26,7 +30,6 @@ <style lang="scss" scoped> .page { padding: 10px 0; - margin: 0 10px; .title { position: relative; margin-left: 10px; diff --git a/src/components/scan/index.vue b/src/components/scan/index.vue index f9b96c4..72b928f 100644 --- a/src/components/scan/index.vue +++ b/src/components/scan/index.vue @@ -47,7 +47,8 @@ //鏂戦┈ TC20 var banMaSacanInfo = intent.getStringExtra( "com.motorolasolutions.emdk.datawedge.data_string" - ); // callback(intent.getStringExtra('com.motorolasolutions.emdk.datawedge.data_string')); + ); + // callback(intent.getStringExtra('com.motorolasolutions.emdk.datawedge.data_string')); console.log("鏂戦┈鎵弿缁撴灉", banMaSacanInfo); // 浼犲叆鎺ユ敹鍒扮殑鍙傛暟 that.queryCode(banMaSacanInfo); @@ -84,6 +85,18 @@ }); // #endif }, + triggerScan() { + console.log("瑙﹀彂鎵弿"); + // 鑾峰彇Android鎰忓浘绫� + let Intent = plus.android.importClass("android.content.Intent"); + // 瀹炰緥鍖栨剰鍥� + let intent = new Intent(); + // 瀹氫箟鎰忓浘锛岀敱鍘傚晢鎻愪緵(姝ゅ璁剧疆涓轰笢澶х殑锛� 寮�濮嬫壂鎻忓箍鎾璫om.scan.onStartScan锛屽搴旂殑鍋滄鎵弿骞挎挱涓篶om.scan.onEndScan) + intent.setAction("com.symbol.datawedge.api.ACTION"); + intent.putExtra("com.symbol.datawedge.api.SOFT_SCAN_TRIGGER", "START_SCANNING"); + // 骞挎挱杩欎釜鎰忓浘 + main.sendBroadcast(intent); + }, }, }; </script> diff --git a/src/components/z-paging-cell/z-paging-cell.vue b/src/components/z-paging-cell/z-paging-cell.vue new file mode 100644 index 0000000..aaa1ab3 --- /dev/null +++ b/src/components/z-paging-cell/z-paging-cell.vue @@ -0,0 +1,47 @@ +<!-- z-paging --> +<!-- github鍦板潃:https://github.com/SmileZXLee/uni-z-paging --> +<!-- dcloud鍦板潃:https://ext.dcloud.net.cn/plugin?id=3935 --> +<!-- 鍙嶉QQ缇わ細790460711 --> + +<!-- z-paging-cell锛岀敤浜庡湪nvue涓娇鐢╟ell鍖呰9锛寁ue涓娇鐢╲iew鍖呰9 --> +<template> + <!-- #ifdef APP-NVUE --> + <cell :style="[cellStyle]" @touchstart="onTouchstart"> + <slot /> + </cell> + <!-- #endif --> + <!-- #ifndef APP-NVUE --> + <view :style="[cellStyle]" @touchstart="onTouchstart"> + <slot /> + </view> + <!-- #endif --> +</template> + +<script> + /** + * z-paging-cell 缁勪欢 + * @description 鐢ㄤ簬鍏煎 nvue 鍜� vue 涓殑 cell 娓叉煋銆傚洜涓哄湪 nvue 涓� z-paging 鍐呯疆鐨勬槸 list锛屽洜姝ゅ垪琛� item 蹇呴』浣跨敤 cell 鍖呬綇锛涘湪 vue 涓笉鑳戒娇鐢� cell锛屽惁鍒欎細鎶ョ粍浠舵壘涓嶅埌鐨勯敊璇�傛瀛愮粍浠朵负浜嗗吋瀹硅繖涓ょ鎯呭喌锛屽唴閮ㄤ綔浜嗘潯浠剁紪璇戝鐞嗐�� + * @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-cell閰嶇疆 + * @notice 浠ヤ笅涓� z-paging-cell 鐨勯厤缃」 + * @property {Object} cellStyle cell 鏍峰紡锛岄粯璁や负 {} + * @example <z-paging-cell :cellStyle="{ backgroundColor: '#f0f0f0' }"></z-paging-cell> + */ + export default { + name: "z-paging-cell", + props: { + //cellStyle + cellStyle: { + type: Object, + default: function() { + return {} + } + } + }, + methods: { + onTouchstart(e) { + this.$emit('touchstart', e); + } + } + } +</script> + diff --git a/src/components/z-paging-empty-view/z-paging-empty-view.vue b/src/components/z-paging-empty-view/z-paging-empty-view.vue new file mode 100644 index 0000000..b07a6c2 --- /dev/null +++ b/src/components/z-paging-empty-view/z-paging-empty-view.vue @@ -0,0 +1,209 @@ +<!-- z-paging --> +<!-- github鍦板潃:https://github.com/SmileZXLee/uni-z-paging --> +<!-- dcloud鍦板潃:https://ext.dcloud.net.cn/plugin?id=3935 --> +<!-- 鍙嶉QQ缇わ細790460711 --> + +<!-- 绌烘暟鎹崰浣峷iew锛屾缁勪欢鏀寔easycom瑙勮寖锛屽彲浠ュ湪椤圭洰涓洿鎺ュ紩鐢� --> +<template> + <view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]" @click="emptyViewClick"> + <view class="zp-main"> + <image v-if="!emptyViewImg.length" :class="{'zp-main-image-rpx':unit==='rpx','zp-main-image-px':unit==='px'}" :style="[emptyViewImgStyle]" :src="emptyImg" /> + <image v-else :class="{'zp-main-image-rpx':unit==='rpx','zp-main-image-px':unit==='px'}" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg" /> + <text class="zp-main-title" :class="{'zp-main-title-rpx':unit==='rpx','zp-main-title-px':unit==='px'}" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text> + <text v-if="showEmptyViewReload" :class="{'zp-main-error-btn':true,'zp-main-error-btn-rpx':unit==='rpx','zp-main-error-btn-px':unit==='px'}" :style="[emptyViewReloadStyle]" @click.stop="reloadClick">{{emptyViewReloadText}}</text> + </view> + </view> +</template> + +<script> + import zStatic from '../z-paging/js/z-paging-static' + + /** + * z-paging-empty-view 绌烘暟鎹粍浠� + * @description 閫氱敤鐨� z-paging 绌烘暟鎹粍浠� + * @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-empty-view閰嶇疆 + * @property {Boolean} emptyViewFixed 绌烘暟鎹浘鐗囨槸鍚﹂摵婊� z-paging锛岄粯璁や负 false銆傝嫢璁剧疆涓� true锛屽垯涓哄~鍏呮弧 z-paging 鐨勫墿浣欓儴鍒� + * @property {String} emptyViewText 绌烘暟鎹浘鎻忚堪鏂囧瓧锛岄粯璁や负 '娌℃湁鏁版嵁鍝' + * @property {String} emptyViewImg 绌烘暟鎹浘鍥剧墖锛岄粯璁や娇鐢� z-paging 鍐呯疆鐨勫浘鐗� (寤鸿浣跨敤缁濆璺緞锛屽紑澶翠笉瑕佹坊鍔� "@"锛岃浠� "/" 寮�澶�) + * @property {String} emptyViewReloadText 绌烘暟鎹浘鐐瑰嚮閲嶆柊鍔犺浇鏂囧瓧锛岄粯璁や负 '閲嶆柊鍔犺浇' + * @property {Object} emptyViewStyle 绌烘暟鎹浘鏍峰紡锛屽彲璁剧疆绌烘暟鎹� view 鐨� top 绛夛紝濡�: empty-view-style="{'top':'100rpx'}" (濡傛灉绌烘暟鎹浘涓嶆槸 fixed 甯冨眬锛屽垯姝ゅ鏄� margin-top)锛岄粯璁や负 {} + * @property {Object} emptyViewImgStyle 绌烘暟鎹浘 img 鏍峰紡锛岄粯璁や负 {} + * @property {Object} emptyViewTitleStyle 绌烘暟鎹浘鎻忚堪鏂囧瓧鏍峰紡锛岄粯璁や负 {} + * @property {Object} emptyViewReloadStyle 绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳鏍峰紡锛岄粯璁や负 {} + * @property {Boolean} showEmptyViewReload 鏄惁鏄剧ず绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳(鏃犳暟鎹椂)锛岄粯璁や负 false + * @property {Boolean} isLoadFailed 鏄惁鏄姞杞藉け璐ワ紝榛樿涓� false + * @property {String} unit 绌烘暟鎹浘涓竷灞�鐨勫崟浣嶏紝榛樿涓� 'rpx' + * @event {Function} reload 鐐瑰嚮浜嗛噸鏂板姞杞芥寜閽� + * @event {Function} viewClick 鐐瑰嚮浜嗙┖鏁版嵁鍥� view + * @example <z-paging-empty-view empty-view-text="鏆傛棤鏁版嵁" /> + */ + export default { + name: "z-paging-empty-view", + data() { + return { + + }; + }, + props: { + // 绌烘暟鎹弿杩版枃瀛� + emptyViewText: { + type: String, + default: '娌℃湁鏁版嵁鍝' + }, + // 绌烘暟鎹浘鐗� + emptyViewImg: { + type: String, + default: '' + }, + // 鏄惁鏄剧ず绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳 + showEmptyViewReload: { + type: Boolean, + default: false + }, + // 绌烘暟鎹偣鍑婚噸鏂板姞杞芥枃瀛� + emptyViewReloadText: { + type: String, + default: '閲嶆柊鍔犺浇' + }, + // 鏄惁鏄姞杞藉け璐� + isLoadFailed: { + type: Boolean, + default: false + }, + // 绌烘暟鎹浘鏍峰紡 + emptyViewStyle: { + type: Object, + default: function() { + return {} + } + }, + // 绌烘暟鎹浘img鏍峰紡 + emptyViewImgStyle: { + type: Object, + default: function() { + return {} + } + }, + // 绌烘暟鎹浘鎻忚堪鏂囧瓧鏍峰紡 + emptyViewTitleStyle: { + type: Object, + default: function() { + return {} + } + }, + // 绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳鏍峰紡 + emptyViewReloadStyle: { + type: Object, + default: function() { + return {} + } + }, + // 绌烘暟鎹浘z-index + emptyViewZIndex: { + type: Number, + default: 9 + }, + // 绌烘暟鎹浘鐗囨槸鍚︿娇鐢╢ixed甯冨眬骞堕摵婊-paging + emptyViewFixed: { + type: Boolean, + default: true + }, + // 绌烘暟鎹浘涓竷灞�鐨勫崟浣嶏紝榛樿涓簉px + unit: { + type: String, + default: 'rpx' + } + }, + computed: { + emptyImg() { + return this.isLoadFailed ? zStatic.base64Error : zStatic.base64Empty; + }, + finalEmptyViewStyle(){ + this.emptyViewStyle['z-index'] = this.emptyViewZIndex; + return this.emptyViewStyle; + } + }, + methods: { + // 鐐瑰嚮浜唕eload鎸夐挳 + reloadClick() { + this.$emit('reload'); + }, + // 鐐瑰嚮浜嗙┖鏁版嵁view + emptyViewClick() { + this.$emit('viewClick'); + } + } + } +</script> + +<style scoped> + .zp-container{ + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + align-items: center; + justify-content: center; + } + .zp-container-fixed { + /* #ifndef APP-NVUE */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + /* #endif */ + /* #ifdef APP-NVUE */ + flex: 1; + /* #endif */ + } + + .zp-main{ + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + align-items: center; + padding: 50rpx 0rpx; + } + + .zp-main-image-rpx { + width: 240rpx; + height: 240rpx; + } + .zp-main-image-px { + width: 120px; + height: 120px; + } + + .zp-main-title { + color: #aaaaaa; + text-align: center; + } + .zp-main-title-rpx { + font-size: 28rpx; + margin-top: 10rpx; + padding: 0rpx 20rpx; + } + .zp-main-title-px { + font-size: 14px; + margin-top: 5px; + padding: 0px 10px; + } + + .zp-main-error-btn { + border: solid 1px #dddddd; + color: #aaaaaa; + } + .zp-main-error-btn-rpx { + font-size: 28rpx; + padding: 8rpx 24rpx; + border-radius: 6rpx; + margin-top: 50rpx; + } + .zp-main-error-btn-px { + font-size: 14px; + padding: 4px 12px; + border-radius: 3px; + margin-top: 25px; + } +</style> diff --git a/src/components/z-paging-swiper-item/z-paging-swiper-item.vue b/src/components/z-paging-swiper-item/z-paging-swiper-item.vue new file mode 100644 index 0000000..bf40f14 --- /dev/null +++ b/src/components/z-paging-swiper-item/z-paging-swiper-item.vue @@ -0,0 +1,160 @@ +<!-- z-paging --> +<!-- github鍦板潃:https://github.com/SmileZXLee/uni-z-paging --> +<!-- dcloud鍦板潃:https://ext.dcloud.net.cn/plugin?id=3935 --> +<!-- 鍙嶉QQ缇わ細790460711 --> + +<!-- 婊戝姩鍒囨崲閫夐」鍗wiper-item锛屾缁勪欢鏀寔easycom瑙勮寖锛屽彲浠ュ湪椤圭洰涓洿鎺ュ紩鐢� --> +<template> + <view class="zp-swiper-item-container"> + <z-paging ref="paging" :fixed="false" + :auto="false" :useVirtualList="useVirtualList" :useInnerList="useInnerList" :cellKeyName="cellKeyName" :innerListStyle="innerListStyle" + :preloadPage="preloadPage" :cellHeightMode="cellHeightMode" :virtualScrollFps="virtualScrollFps" :virtualListCol="virtualListCol" + @query="_queryList" @listChange="_updateList"> + <slot /> + <template #header> + <slot name="header"/> + </template> + <template #cell="{item,index}"> + <slot name="cell" :item="item" :index="index"/> + </template> + <template #footer> + <slot name="footer"/> + </template> + </z-paging> + </view> +</template> + +<script> + import zPaging from '../z-paging/z-paging' + /** + * z-paging-swiper-item 缁勪欢 + * @description swiper+list鏋佺畝鍐欐硶涓娇鐢ㄥ埌锛屽疄闄呬笂灏辨槸瀵规櫘閫氱殑swiper+list涓璼wiper-item鐨勫寘瑁呭皝瑁咃紝鐢ㄤ互绠�鍖栧啓娉曪紝浣嗕釜鎬у寲閰嶇疆灞�闄愯緝澶� + * @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-swiper-item閰嶇疆 + * @notice 浠ヤ笅涓� z-paging-swiper-item 鐨勯厤缃」 + * @property {Number} tabIndex 褰撳墠缁勪欢鐨� index锛屼篃灏辨槸褰撳墠缁勪欢鏄� swiper 涓殑绗嚑涓紝榛樿涓� 0 + * @property {Number} currentIndex 褰撳墠 swiper 鍒囨崲鍒扮鍑犱釜 index锛岄粯璁や负 0 + * @property {Boolean} useVirtualList 鏄惁浣跨敤铏氭嫙鍒楄〃锛岄粯璁や负 false + * @property {Boolean} useInnerList 鏄惁鍦� z-paging 鍐呴儴寰幆娓叉煋鍒楄〃锛堝唴缃垪琛級锛岄粯璁や负 false銆傝嫢 useVirtualList 涓� true锛屽垯姝ら」鎭掍负 true + * @property {String} cellKeyName 鍐呯疆鍒楄〃 cell 鐨� key 鍚嶇О锛屼粎 nvue 鏈夋晥锛屽湪 nvue 涓紑鍚� useInnerList 鏃跺繀椤诲~姝ら」锛岄粯璁や负 '' + * @property {Object} innerListStyle innerList 鏍峰紡锛岄粯璁や负 {} + * @property {Number|String} preloadPage 棰勫姞杞界殑鍒楄〃鍙鑼冨洿锛堝垪琛ㄩ珮搴︼級椤垫暟锛岄粯璁や负 12銆傛鏁板�艰秺澶э紝鍒欒櫄鎷熷垪琛ㄤ腑鍔犺浇鐨� dom 瓒婂锛屽唴瀛樻秷鑰楄秺澶э紙浼氱淮鎸佸湪涓�涓ǔ瀹氬�硷級锛屼絾澧炲姞棰勫姞杞介〉闈㈡暟閲忓彲缂撹В蹇�熸粴鍔ㄧ煭鏆傜櫧灞忛棶棰� + * @property {String} cellHeightMode 铏氭嫙鍒楄〃 cell 楂樺害妯″紡锛岄粯璁や负 'fixed'锛屼篃灏辨槸姣忎釜 cell 楂樺害瀹屽叏鐩稿悓锛屽皢浠ョ涓�涓� cell 楂樺害涓哄噯杩涜璁$畻銆傚彲閫夊�笺�恉ynamic銆戯紝鍗充唬琛ㄩ珮搴︽槸鍔ㄦ�侀潪鍥哄畾鐨勶紝銆恉ynamic銆戞�ц兘浣庝簬銆恌ixed銆� + * @property {Number|String} virtualListCol 铏氭嫙鍒楄〃鍒楁暟锛岄粯璁や负 1銆傚父鐢ㄤ簬姣忚鏈夊鍒楃殑鎯呭喌锛屼緥濡傛瘡琛屾湁 2 鍒楁暟鎹紝闇�瑕佸皢姝ゅ�艰缃负 2 + * @property {Number|String} virtualScrollFps 铏氭嫙鍒楄〃 scroll 鍙栨牱甯х巼锛岄粯璁や负 60锛岃繃楂樺彲鑳藉嚭鐜板崱椤跨瓑闂 + * @example <z-paging-swiper-item ref="swiperItem" :tabIndex="index" :currentIndex="current" @query="queryList" @updateList="updateList"></z-paging-swiper-item> + */ + export default { + name: "z-paging-swiper-item", + components: { zPaging }, + data() { + return { + firstLoaded: false + } + }, + props: { + // 褰撳墠缁勪欢鐨刬ndex锛屼篃灏辨槸褰撳墠缁勪欢鏄痵wiper涓殑绗嚑涓� + tabIndex: { + type: Number, + default: function() { + return 0 + } + }, + // 褰撳墠swiper鍒囨崲鍒扮鍑犱釜index + currentIndex: { + type: Number, + default: function() { + return 0 + } + }, + // 鏄惁浣跨敤铏氭嫙鍒楄〃锛岄粯璁や负鍚� + useVirtualList: { + type: Boolean, + default: false + }, + // 鏄惁鍦▃-paging鍐呴儴寰幆娓叉煋鍒楄〃(鍐呯疆鍒楄〃)锛岄粯璁や负鍚︺�傝嫢use-virtual-list涓簍rue锛屽垯姝ら」鎭掍负true + useInnerList: { + type: Boolean, + default: false + }, + // 鍐呯疆鍒楄〃cell鐨刱ey鍚嶇О锛屼粎nvue鏈夋晥锛屽湪nvue涓紑鍚痷se-inner-list鏃跺繀椤诲~姝ら」 + cellKeyName: { + type: String, + default: '' + }, + // innerList鏍峰紡 + innerListStyle: { + type: Object, + default: function() { + return {}; + } + }, + // 棰勫姞杞界殑鍒楄〃鍙鑼冨洿(鍒楄〃楂樺害)椤垫暟锛岄粯璁や负12锛屽嵆棰勫姞杞藉綋鍓嶉〉鍙婁笂涓嬪悇12椤电殑cell銆傛鏁板�艰秺澶э紝鍒欒櫄鎷熷垪琛ㄤ腑鍔犺浇鐨刣om瓒婂锛屽唴瀛樻秷鑰楄秺澶�(浼氱淮鎸佸湪涓�涓ǔ瀹氬��)锛屼絾澧炲姞棰勫姞杞介〉闈㈡暟閲忓彲缂撹В蹇�熸粴鍔ㄧ煭鏆傜櫧灞忛棶棰� + preloadPage: { + type: [Number, String], + default: 12 + }, + // 铏氭嫙鍒楄〃cell楂樺害妯″紡锛岄粯璁や负fixed锛屼篃灏辨槸姣忎釜cell楂樺害瀹屽叏鐩稿悓锛屽皢浠ョ涓�涓猚ell楂樺害涓哄噯杩涜璁$畻銆傚彲閫夊�笺�恉ynamic銆戯紝鍗充唬琛ㄩ珮搴︽槸鍔ㄦ�侀潪鍥哄畾鐨勶紝銆恉ynamic銆戞�ц兘浣庝簬銆恌ixed銆戙�� + cellHeightMode: { + type: String, + default: 'fixed' + }, + // 铏氭嫙鍒楄〃鍒楁暟锛岄粯璁や负1銆傚父鐢ㄤ簬姣忚鏈夊鍒楃殑鎯呭喌锛屼緥濡傛瘡琛屾湁2鍒楁暟鎹紝闇�瑕佸皢姝ゅ�艰缃负2 + virtualListCol: { + type: [Number, String], + default: 1 + }, + // 铏氭嫙鍒楄〃scroll鍙栨牱甯х巼锛岄粯璁や负60锛岃繃楂樺彲鑳藉嚭鐜板崱椤跨瓑闂 + virtualScrollFps: { + type: [Number, String], + default: 60 + }, + }, + watch: { + currentIndex: { + handler(newVal, oldVal) { + if (newVal === this.tabIndex) { + // 鎳掑姞杞斤紝褰撴粦鍔ㄥ埌褰撳墠鐨刬tem鏃讹紝鎵嶅幓鍔犺浇 + if (!this.firstLoaded) { + this.$nextTick(()=>{ + let delay = 5; + // #ifdef MP-TOUTIAO + delay = 100; + // #endif + setTimeout(() => { + this.$refs.paging.reload().catch(() => {}); + }, delay); + }) + } + } + }, + immediate: true + } + }, + methods: { + reload(data) { + return this.$refs.paging.reload(data); + }, + complete(data) { + this.firstLoaded = true; + return this.$refs.paging.complete(data); + }, + _queryList(pageNo, pageSize, from) { + this.$emit('query', pageNo, pageSize, from); + }, + _updateList(list) { + this.$emit('updateList', list); + } + } + } +</script> + +<style scoped> + .zp-swiper-item-container { + /* #ifndef APP-NVUE */ + height: 100%; + /* #endif */ + /* #ifdef APP-NVUE */ + flex: 1; + /* #endif */ + } +</style> diff --git a/src/components/z-paging-swiper/z-paging-swiper.vue b/src/components/z-paging-swiper/z-paging-swiper.vue new file mode 100644 index 0000000..41e391c --- /dev/null +++ b/src/components/z-paging-swiper/z-paging-swiper.vue @@ -0,0 +1,176 @@ +<!-- z-paging --> +<!-- github鍦板潃:https://github.com/SmileZXLee/uni-z-paging --> +<!-- dcloud鍦板潃:https://ext.dcloud.net.cn/plugin?id=3935 --> +<!-- 鍙嶉QQ缇わ細790460711 --> + +<!-- 婊戝姩鍒囨崲閫夐」鍗wiper瀹瑰櫒锛屾缁勪欢鏀寔easycom瑙勮寖锛屽彲浠ュ湪椤圭洰涓洿鎺ュ紩鐢� --> +<template> + <view :class="fixed?'zp-swiper-container zp-swiper-container-fixed':'zp-swiper-container'" :style="[finalSwiperStyle]"> + <!-- #ifndef APP-PLUS --> + <view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view> + <!-- #endif --> + <slot v-if="zSlots.top" name="top" /> + <view class="zp-swiper-super"> + <view v-if="zSlots.left" :class="{'zp-swiper-left':true,'zp-absoulte':isOldWebView}"> + <slot name="left" /> + </view> + <view :class="{'zp-swiper':true,'zp-absoulte':isOldWebView}" :style="[swiperContentStyle]"> + <slot /> + </view> + <view v-if="zSlots.right" :class="{'zp-swiper-right':true,'zp-absoulte zp-right':isOldWebView}"> + <slot name="right" /> + </view> + </view> + <slot v-if="zSlots.bottom" name="bottom" /> + </view> +</template> + +<script> + import commonLayoutModule from '../z-paging/js/modules/common-layout' + + /** + * z-paging-swiper 缁勪欢 + * @description 鍦� swiper 涓娇鐢� z-paging 鏃讹紙宸﹀彸婊戝姩鍒囨崲鍒楄〃锛夛紝鍦ㄦ牴鑺傜偣浣跨敤 z-paging-swiper锛屽叾鐩稿綋浜庝竴涓� view 瀹瑰櫒锛岄粯璁ら摵婊″叏灞忥紝鍙厤璁$畻楂樺害鐩存帴鎻掑叆 swiper 鐨勮鍥惧鍣ㄣ�� + * @tutorial https://z-paging.zxlee.cn/api/sub-components/main.html#z-paging-swiper閰嶇疆 + * @property {Boolean} fixed 鏄惁浣跨敤 fixed 甯冨眬锛岄粯璁や负 true + * @property {Boolean} safeAreaInsetBottom 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤锛岄粯璁や负 false + * @property {Object} swiperStyle z-paging-swiper 鏍峰紡锛岄粯璁や负 {} + * @example <z-paging-swiper :safeAreaInsetBottom="true"></z-paging-swiper> + */ + export default { + name: "z-paging-swiper", + mixins: [commonLayoutModule], + data() { + return { + swiperContentStyle: {} + }; + }, + props: { + // 鏄惁浣跨敤fixed甯冨眬锛岄粯璁や负鏄� + fixed: { + type: Boolean, + default: true + }, + // 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤 + safeAreaInsetBottom: { + type: Boolean, + default: false + }, + // z-paging-swiper鏍峰紡 + swiperStyle: { + type: Object, + default: function() { + return {}; + }, + } + }, + mounted() { + this.$nextTick(() => { + this.systemInfo = this._getSystemInfoSync(); + setTimeout(this.updateFixedLayout, 100) + }) + // #ifndef APP-PLUS + this._getCssSafeAreaInsetBottom(); + // #endif + this.updateLeftAndRightWidth(); + + this.swiperContentStyle = { 'flex': '1' }; + // #ifndef APP-NVUE + this.swiperContentStyle = { width: '100%',height: '100%' }; + // #endif + }, + computed: { + finalSwiperStyle() { + const swiperStyle = { ...this.swiperStyle }; + if (!this.systemInfo) return swiperStyle; + const windowTop = this.windowTop; + const windowBottom = this.systemInfo.windowBottom; + if (this.fixed) { + if (windowTop && !swiperStyle.top) { + swiperStyle.top = windowTop + 'px'; + } + if (!swiperStyle.bottom) { + let bottom = windowBottom || 0; + bottom += this.safeAreaInsetBottom ? this.safeAreaBottom : 0; + if (bottom > 0) { + swiperStyle.bottom = bottom + 'px'; + } + } + } + return swiperStyle; + } + }, + methods: { + // 鏇存柊slot="left"鍜宻lot="right"瀹藉害锛屽綋slot="left"鎴杝lot="right"瀹藉害鍔ㄦ�佹敼鍙樻椂璋冪敤 + updateLeftAndRightWidth() { + if (!this.isOldWebView) return; + this.$nextTick(() => this._updateLeftAndRightWidth(this.swiperContentStyle, 'zp-swiper')); + } + } + } +</script> + +<style scoped> + .zp-swiper-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + flex: 1; + } + + .zp-swiper-container-fixed { + position: fixed; + /* #ifndef APP-NVUE */ + height: auto; + width: auto; + /* #endif */ + top: 0; + left: 0; + bottom: 0; + right: 0; + } + + .zp-safe-area-inset-bottom { + position: absolute; + /* #ifndef APP-PLUS */ + height: env(safe-area-inset-bottom); + /* #endif */ + } + + .zp-swiper-super { + flex: 1; + overflow: hidden; + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + } + + .zp-swiper-left,.zp-swiper-right{ + /* #ifndef APP-NVUE */ + height: 100%; + /* #endif */ + } + + .zp-swiper { + flex: 1; + /* #ifndef APP-NVUE */ + height: 100%; + width: 100%; + /* #endif */ + } + + .zp-absoulte { + /* #ifndef APP-NVUE */ + position: absolute; + top: 0; + width: auto; + /* #endif */ + } + + .zp-swiper-item { + height: 100%; + } +</style> diff --git a/src/components/z-paging/components/z-paging-load-more.vue b/src/components/z-paging/components/z-paging-load-more.vue new file mode 100644 index 0000000..4c2a6e8 --- /dev/null +++ b/src/components/z-paging/components/z-paging-load-more.vue @@ -0,0 +1,182 @@ +<!-- [z-paging]涓婃媺鍔犺浇鏇村view --> +<template> + <view class="zp-l-container" :class="{'zp-l-container-rpx':c.unit==='rpx','zp-l-container-px':c.unit==='px'}" :style="[c.customStyle]" @click="doClick"> + <template v-if="!c.hideContent"> + <!-- 搴曢儴鍔犺浇鏇村娌℃湁鏇村鏁版嵁鍒嗗壊绾� --> + <text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" :class="{'zp-l-line-rpx':c.unit==='rpx','zp-l-line-px':c.unit==='px'}" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" /> + <!-- 搴曢儴鍔犺浇鏇村loading --> + <!-- #ifndef APP-NVUE --> + <image v-if="finalStatus===M.Loading&&!!c.loadingIconCustomImage" + :src="c.loadingIconCustomImage" :style="[c.iconCustomStyle]" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':c.loadingAnimated,'zp-l-line-loading-custom-image-rpx':c.unit==='rpx','zp-l-line-loading-custom-image-px':c.unit==='px'}" /> + <image v-if="finalStatus===M.Loading&&finalLoadingIconType==='flower'&&!c.loadingIconCustomImage.length" + :class="{'zp-line-loading-image':true,'zp-line-loading-image-rpx':c.unit==='rpx','zp-line-loading-image-px':c.unit==='px'}" :style="[c.iconCustomStyle]" :src="zTheme.flower[ts]" /> + <!-- #endif --> + <!-- #ifdef APP-NVUE --> + <!-- 鍦╪vue涓簳閮ㄥ姞杞芥洿澶歭oading浣跨敤绯荤粺鑷甫鐨� --> + <view> + <loading-indicator v-if="finalStatus===M.Loading&&finalLoadingIconType!=='circle'" :class="{'zp-line-loading-image-rpx':c.unit==='rpx','zp-line-loading-image-px':c.unit==='px'}" :style="[{color:zTheme.indicator[ts]}]" :animating="true" /> + </view> + <!-- #endif --> + <!-- 搴曢儴鍔犺浇鏇村鏂囧瓧 --> + <text v-if="finalStatus===M.Loading&&finalLoadingIconType==='circle'&&!c.loadingIconCustomImage.length" + class="zp-l-circle-loading-view" :class="{'zp-l-circle-loading-view-rpx':c.unit==='rpx','zp-l-circle-loading-view-px':c.unit==='px'}" :style="[{borderColor:zTheme.circleBorder[ts],borderTopColor:zTheme.circleBorderTop[ts]},c.iconCustomStyle]" /> + <text v-if="!c.isChat||(!c.chatDefaultAsLoading&&finalStatus===M.Default)||finalStatus===M.Fail" :class="{'zp-l-text-rpx':c.unit==='rpx','zp-l-text-px':c.unit==='px'}" :style="[{color:zTheme.title[ts]},c.titleCustomStyle]">{{ownLoadingMoreText}}</text> + <!-- 搴曢儴鍔犺浇鏇村娌℃湁鏇村鏁版嵁鍒嗗壊绾� --> + <text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" :class="{'zp-l-line-rpx':c.unit==='rpx','zp-l-line-px':c.unit==='px'}" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" /> + </template> + </view> +</template> +<script> + import zStatic from '../js/z-paging-static' + import Enum from '../js/z-paging-enum' + export default { + name: 'z-paging-load-more', + data() { + return { + M: Enum.More, + zTheme: { + title: { white: '#efefef', black: '#a4a4a4' }, + line: { white: '#efefef', black: '#eeeeee' }, + circleBorder: { white: '#aaaaaa', black: '#c8c8c8' }, + circleBorderTop: { white: '#ffffff', black: '#444444' }, + flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower }, + indicator: { white: '#eeeeee', black: '#777777' } + } + }; + }, + props: ['zConfig'], + computed: { + ts() { + return this.c.defaultThemeStyle; + }, + // 搴曢儴鍔犺浇鏇村閰嶇疆 + c() { + return this.zConfig || {}; + }, + // 搴曢儴鍔犺浇鏇村鏂囧瓧 + ownLoadingMoreText() { + return { + [this.M.Default]: this.c.defaultText, + [this.M.Loading]: this.c.loadingText, + [this.M.NoMore]: this.c.noMoreText, + [this.M.Fail]: this.c.failText, + }[this.finalStatus]; + }, + // 搴曢儴鍔犺浇鏇村鐘舵�� + finalStatus() { + if (this.c.defaultAsLoading && this.c.status === this.M.Default) return this.M.Loading; + return this.c.status; + }, + // 鍔犺浇鏇村icon绫诲瀷 + finalLoadingIconType() { + // #ifdef APP-NVUE + return 'flower'; + // #endif + return this.c.loadingIconType; + } + }, + methods: { + // 鐐瑰嚮浜嗗姞杞芥洿澶� + doClick() { + this.$emit('doClick'); + } + } + } +</script> + +<style scoped> + @import "../css/z-paging-static.css"; + + .zp-l-container { + /* #ifndef APP-NVUE */ + clear: both; + display: flex; + /* #endif */ + flex-direction: row; + align-items: center; + justify-content: center; + } + .zp-l-container-rpx { + height: 80rpx; + font-size: 27rpx; + } + .zp-l-container-px { + height: 40px; + font-size: 14px; + } + + .zp-l-line-loading-custom-image { + color: #a4a4a4; + } + .zp-l-line-loading-custom-image-rpx { + margin-right: 8rpx; + width: 28rpx; + height: 28rpx; + } + .zp-l-line-loading-custom-image-px { + margin-right: 4px; + width: 14px; + height: 14px; + } + + .zp-l-line-loading-custom-image-animated{ + /* #ifndef APP-NVUE */ + animation: loading-circle 1s linear infinite; + /* #endif */ + } + + .zp-l-circle-loading-view { + border: 3rpx solid #dddddd; + border-radius: 50%; + /* #ifndef APP-NVUE */ + animation: loading-circle 1s linear infinite; + /* #endif */ + /* #ifdef APP-NVUE */ + width: 30rpx; + height: 30rpx; + /* #endif */ + } + .zp-l-circle-loading-view-rpx { + margin-right: 8rpx; + width: 23rpx; + height: 23rpx; + } + .zp-l-circle-loading-view-px { + margin-right: 4px; + width: 12px; + height: 12px; + } + + .zp-l-text-rpx { + font-size: 30rpx; + margin: 0rpx 6rpx; + } + .zp-l-text-px { + font-size: 15px; + margin: 0px 3px; + } + + .zp-l-line-rpx { + height: 1px; + width: 100rpx; + margin: 0rpx 10rpx; + } + .zp-l-line-px { + height: 1px; + width: 50px; + margin: 0rpx 5px; + } + + /* #ifndef APP-NVUE */ + @keyframes loading-circle { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + /* #endif */ +</style> diff --git a/src/components/z-paging/components/z-paging-refresh.vue b/src/components/z-paging/components/z-paging-refresh.vue new file mode 100644 index 0000000..305c5c5 --- /dev/null +++ b/src/components/z-paging/components/z-paging-refresh.vue @@ -0,0 +1,214 @@ +<!-- [z-paging]涓嬫媺鍒锋柊view --> +<template> + <view style="height: 100%;"> + <view :class="showUpdateTime?'zp-r-container zp-r-container-padding':'zp-r-container'"> + <view class="zp-r-left"> + <!-- 闈炲姞杞戒腑(缁х画涓嬫媺鍒锋柊銆佹澗鎵嬬珛鍗冲埛鏂扮姸鎬佸浘鐗�) --> + <image v-if="status!==R.Loading" :class="leftImageClass" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" /> + <!-- 鍔犺浇鐘舵�佸浘鐗� --> + <!-- #ifndef APP-NVUE --> + <image v-else :class="{'zp-line-loading-image':refreshingAnimated,'zp-r-left-image':true,'zp-r-left-image-pre-size-rpx':unit==='rpx','zp-r-left-image-pre-size-px':unit==='px'}" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" /> + <!-- #endif --> + <!-- 鍦╪vue涓紝鍔犺浇鐘舵�乴oading浣跨敤绯荤粺loading --> + <!-- #ifdef APP-NVUE --> + <view v-else :style="[{'margin-right':showUpdateTime?addUnit(18,unit):addUnit(12, unit)}]"> + <loading-indicator :class="isIos?{'zp-loading-image-ios-rpx':unit==='rpx','zp-loading-image-ios-px':unit==='px'}:{'zp-loading-image-android-rpx':unit==='rpx','zp-loading-image-android-px':unit==='px'}" + :style="[{color:zTheme.indicator[ts]},imgStyle]" :animating="true" /> + </view> + <!-- #endif --> + </view> + <!-- 鍙充晶鏂囧瓧鍐呭 --> + <view class="zp-r-right"> + <!-- 鍙充晶涓嬫媺鍒锋柊鐘舵�佹枃瀛� --> + <text class="zp-r-right-text" :style="[rightTextStyle,titleStyle]">{{currentTitle}}</text> + <!-- 鍙充晶涓嬫媺鍒锋柊鏃堕棿鏂囧瓧 --> + <text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text" :class="{'zp-r-right-time-text-rpx':unit==='rpx','zp-r-right-time-text-px':unit==='px'}" :style="[{color:zTheme.title[ts]},updateTimeStyle]"> + {{refresherTimeText}} + </text> + </view> + </view> + </view> +</template> +<script> + import zStatic from '../js/z-paging-static' + import u from '../js/z-paging-utils' + import Enum from '../js/z-paging-enum' + + export default { + name: 'z-paging-refresh', + data() { + return { + R: Enum.Refresher, + refresherTimeText: '', + zTheme: { + title: { white: '#efefef', black: '#555555' }, + arrow: { white: zStatic.base64ArrowWhite, black: zStatic.base64Arrow }, + flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower }, + success: { white: zStatic.base64SuccessWhite, black: zStatic.base64Success }, + indicator: { white: '#eeeeee', black: '#777777' } + } + }; + }, + props: ['status', 'defaultThemeStyle', 'defaultText', 'pullingText', 'refreshingText', 'completeText', 'goF2Text', 'defaultImg', 'pullingImg', + 'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap', 'unit', 'isIos' + ], + computed: { + ts() { + return this.defaultThemeStyle; + }, + // 褰撳墠鐘舵�丮ap + statusTextMap() { + this.updateTime(); + const { R, defaultText, pullingText, refreshingText, completeText, goF2Text } = this; + return { + [R.Default]: defaultText, + [R.ReleaseToRefresh]: pullingText, + [R.Loading]: refreshingText, + [R.Complete]: completeText, + [R.GoF2]: goF2Text, + }; + }, + // 褰撳墠鐘舵�佹枃瀛� + currentTitle() { + return this.statusTextMap[this.status] || this.defaultText; + }, + // 宸︿晶鍥剧墖class + leftImageClass() { + const preSizeClass = `zp-r-left-image-pre-size-${this.unit}`; + if (this.status === this.R.Complete) return preSizeClass; + return `zp-r-left-image ${preSizeClass} ${this.status === this.R.Default ? 'zp-r-arrow-down' : 'zp-r-arrow-top'}`; + }, + // 宸︿晶鍥剧墖style + leftImageStyle() { + const showUpdateTime = this.showUpdateTime; + const size = showUpdateTime ? u.addUnit(36, this.unit) : u.addUnit(34, this.unit); + return {width: size,height: size,'margin-right': showUpdateTime ? u.addUnit(20, this.unit) : u.addUnit(9, this.unit)}; + }, + // 宸︿晶鍥剧墖src + leftImageSrc() { + const R = this.R; + const status = this.status; + if (status === R.Default) { + if (!!this.defaultImg) return this.defaultImg; + return this.zTheme.arrow[this.ts]; + } else if (status === R.ReleaseToRefresh) { + if (!!this.pullingImg) return this.pullingImg; + if (!!this.defaultImg) return this.defaultImg; + return this.zTheme.arrow[this.ts]; + } else if (status === R.Loading) { + if (!!this.refreshingImg) return this.refreshingImg; + return this.zTheme.flower[this.ts];; + } else if (status === R.Complete) { + if (!!this.completeImg) return this.completeImg; + return this.zTheme.success[this.ts];; + } else if (status === R.GoF2) { + return this.zTheme.arrow[this.ts]; + } + return ''; + }, + // 鍙充晶鏂囧瓧style + rightTextStyle() { + let stl = {}; + // #ifdef APP-NVUE + const textHeight = this.showUpdateTime ? u.addUnit(40, this.unit) : u.addUnit(80, this.unit); + stl = {'height': textHeight, 'line-height': textHeight} + // #endif + stl['color'] = this.zTheme.title[this.ts]; + stl['font-size'] = u.addUnit(30, this.unit); + return stl; + } + }, + methods: { + // 娣诲姞鍗曚綅 + addUnit(value, unit) { + return u.addUnit(value, unit); + }, + // 鏇存柊涓嬫媺鍒锋柊鏃堕棿 + updateTime() { + if (this.showUpdateTime) { + this.refresherTimeText = u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap); + } + } + } + } +</script> + +<style scoped> + @import "../css/z-paging-static.css"; + + .zp-r-container { + /* #ifndef APP-NVUE */ + display: flex; + height: 100%; + /* #endif */ + flex-direction: row; + justify-content: center; + align-items: center; + } + + .zp-r-container-padding { + /* #ifdef APP-NVUE */ + padding: 7px 0rpx; + /* #endif */ + } + + .zp-r-left { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + align-items: center; + overflow: hidden; + /* #ifdef MP-ALIPAY */ + margin-top: -4rpx; + /* #endif */ + } + + .zp-r-left-image { + transition-duration: .2s; + transition-property: transform; + color: #666666; + } + + .zp-r-left-image-pre-size-rpx { + /* #ifndef APP-NVUE */ + width: 34rpx; + height: 34rpx; + overflow: hidden; + /* #endif */ + } + + .zp-r-left-image-pre-size-px { + /* #ifndef APP-NVUE */ + width: 17px; + height: 17px; + overflow: hidden; + /* #endif */ + } + + .zp-r-arrow-top { + transform: rotate(0deg); + } + + .zp-r-arrow-down { + transform: rotate(180deg); + } + + .zp-r-right { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + align-items: center; + justify-content: center; + } + + .zp-r-right-time-text-rpx { + margin-top: 10rpx; + font-size: 26rpx; + } + .zp-r-right-time-text-px { + margin-top: 5px; + font-size: 13px; + } +</style> diff --git a/src/components/z-paging/config/index.js b/src/components/z-paging/config/index.js new file mode 100644 index 0000000..15a37e2 --- /dev/null +++ b/src/components/z-paging/config/index.js @@ -0,0 +1,3 @@ +// z-paging鍏ㄥ眬閰嶇疆鏂囦欢锛屾敞鎰忛伩鍏嶆洿鏂版椂姝ゆ枃浠惰瑕嗙洊锛岃嫢琚鐩栵紝鍙湪姝ゆ枃浠朵腑鍙抽敭->鐐瑰嚮鏈湴鍘嗗彶璁板綍锛屾壘鍥炶鐩栧墠鐨勯厤缃� + +export default {} \ No newline at end of file diff --git a/src/components/z-paging/css/z-paging-main.css b/src/components/z-paging/css/z-paging-main.css new file mode 100644 index 0000000..9825869 --- /dev/null +++ b/src/components/z-paging/css/z-paging-main.css @@ -0,0 +1,241 @@ +/* [z-paging]鍏叡css*/ + +.z-paging-content { + position: relative; + flex-direction: column; + /* #ifndef APP-NVUE */ + overflow: hidden; + /* #endif */ +} + +.z-paging-content-full { + /* #ifndef APP-NVUE */ + display: flex; + width: 100%; + height: 100%; + /* #endif */ +} + +.z-paging-content-fixed, .zp-loading-fixed { + position: fixed; + /* #ifndef APP-NVUE */ + height: auto; + width: auto; + /* #endif */ + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.zp-f2-content { + width: 100%; + position: fixed; + top: 0; + left: 0; + background-color: white; +} + +.zp-page-top, .zp-page-bottom { + /* #ifndef APP-NVUE */ + width: auto; + /* #endif */ + position: fixed; + left: 0; + right: 0; + z-index: 999; +} + +.zp-page-left, .zp-page-right { + /* #ifndef APP-NVUE */ + height: 100%; + /* #endif */ +} + +.zp-scroll-view-super { + flex: 1; + overflow: hidden; + position: relative; +} + +.zp-view-super { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; +} + +.zp-scroll-view-container, .zp-scroll-view { + position: relative; + /* #ifndef APP-NVUE */ + height: 100%; + width: 100%; + /* #endif */ +} + +.zp-absoulte { + /* #ifndef APP-NVUE */ + position: absolute; + top: 0; + width: auto; + /* #endif */ +} + +.zp-scroll-view-absolute { + position: absolute; + top: 0; + left: 0; +} + +/* #ifndef APP-NVUE */ +.zp-scroll-view-hide-scrollbar ::-webkit-scrollbar { + display: none; + -webkit-appearance: none; + width: 0 !important; + height: 0 !important; + background: transparent; +} +/* #endif */ + +.zp-paging-touch-view { + width: 100%; + height: 100%; + position: relative; +} + +.zp-fixed-bac-view { + position: absolute; + width: 100%; + top: 0; + left: 0; + height: 200px; +} + +.zp-paging-main { + height: 100%; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; +} + +.zp-paging-container { + flex: 1; + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; +} + +.zp-chat-record-loading-custom-image { + width: 35rpx; + height: 35rpx; + /* #ifndef APP-NVUE */ + animation: loading-flower 1s linear infinite; + /* #endif */ +} + +.zp-page-bottom-keyboard-placeholder-animate { + transition-property: height; + transition-duration: 0.15s; + /* #ifndef APP-NVUE */ + will-change: height; + /* #endif */ +} + +.zp-custom-refresher-container { + overflow: hidden; +} + +.zp-custom-refresher-refresh { + /* #ifndef APP-NVUE */ + display: block; + /* #endif */ +} + +.zp-back-to-top { + z-index: 999; + position: absolute; + bottom: 0rpx; + transition-duration: .3s; + transition-property: opacity; +} +.zp-back-to-top-rpx { + width: 76rpx; + height: 76rpx; + bottom: 0rpx; + right: 25rpx; +} +.zp-back-to-top-px { + width: 38px; + height: 38px; + bottom: 0px; + right: 13px; +} + +.zp-back-to-top-show { + opacity: 1; +} + +.zp-back-to-top-hide { + opacity: 0; +} + +.zp-back-to-top-img { + /* #ifndef APP-NVUE */ + width: 100%; + height: 100%; + /* #endif */ + /* #ifdef APP-NVUE */ + flex: 1; + /* #endif */ + z-index: 999; +} + +.zp-back-to-top-img-inversion { + transform: rotate(180deg); +} + +.zp-empty-view { + /* #ifdef APP-NVUE */ + height: 100%; + /* #endif */ + flex: 1; +} + +.zp-empty-view-center { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + align-items: center; + justify-content: center; +} + +.zp-loading-fixed { + z-index: 9999; +} + +.zp-safe-area-inset-bottom { + position: absolute; + /* #ifndef APP-PLUS */ + height: env(safe-area-inset-bottom); + /* #endif */ +} + +.zp-n-refresh-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + justify-content: center; + width: 750rpx; +} + +.zp-n-list-container{ + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + flex: 1; +} diff --git a/src/components/z-paging/css/z-paging-static.css b/src/components/z-paging/css/z-paging-static.css new file mode 100644 index 0000000..de445c2 --- /dev/null +++ b/src/components/z-paging/css/z-paging-static.css @@ -0,0 +1,50 @@ +/* [z-paging]鍏敤鐨勯潤鎬乧ss璧勬簮 */ + +.zp-line-loading-image { + /* #ifndef APP-NVUE */ + animation: loading-flower 1s steps(12) infinite; + /* #endif */ + color: #666666; +} +.zp-line-loading-image-rpx { + margin-right: 8rpx; + width: 34rpx; + height: 34rpx; +} +.zp-line-loading-image-px { + margin-right: 4px; + width: 17px; + height: 17px; +} + +.zp-loading-image-ios-rpx { + width: 40rpx; + height: 40rpx; +} +.zp-loading-image-ios-px { + width: 20px; + height: 20px; +} + +.zp-loading-image-android-rpx { + width: 34rpx; + height: 34rpx; +} +.zp-loading-image-android-px { + width: 17px; + height: 17px; +} + +/* #ifndef APP-NVUE */ +@keyframes loading-flower { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(1turn); + transform: rotate(1turn); + } +} +/* #endif */ + diff --git a/src/components/z-paging/i18n/en.json b/src/components/z-paging/i18n/en.json new file mode 100644 index 0000000..48fbe60 --- /dev/null +++ b/src/components/z-paging/i18n/en.json @@ -0,0 +1,23 @@ +{ + "zp.refresher.default": "Pull down to refresh", + "zp.refresher.pulling": "Release to refresh", + "zp.refresher.refreshing": "Refreshing...", + "zp.refresher.complete": "Refresh succeeded", + "zp.refresher.f2": "Refresh to enter 2f", + + "zp.loadingMore.default": "Click to load more", + "zp.loadingMore.loading": "Loading...", + "zp.loadingMore.noMore": "No more data", + "zp.loadingMore.fail": "Load failed,click to reload", + + "zp.emptyView.title": "No data", + "zp.emptyView.reload": "Reload", + "zp.emptyView.error": "Sorry,load failed", + + "zp.refresherUpdateTime.title": "Last update: ", + "zp.refresherUpdateTime.none": "None", + "zp.refresherUpdateTime.today": "Today", + "zp.refresherUpdateTime.yesterday": "Yesterday", + + "zp.systemLoading.title": "Loading..." +} diff --git a/src/components/z-paging/i18n/index.js b/src/components/z-paging/i18n/index.js new file mode 100644 index 0000000..de7509c --- /dev/null +++ b/src/components/z-paging/i18n/index.js @@ -0,0 +1,8 @@ +import en from './en.json' +import zhHans from './zh-Hans.json' +import zhHant from './zh-Hant.json' +export default { + en, + 'zh-Hans': zhHans, + 'zh-Hant': zhHant +} diff --git a/src/components/z-paging/i18n/zh-Hans.json b/src/components/z-paging/i18n/zh-Hans.json new file mode 100644 index 0000000..440ca63 --- /dev/null +++ b/src/components/z-paging/i18n/zh-Hans.json @@ -0,0 +1,23 @@ +{ + "zp.refresher.default": "缁х画涓嬫媺鍒锋柊", + "zp.refresher.pulling": "鏉惧紑绔嬪嵆鍒锋柊", + "zp.refresher.refreshing": "姝e湪鍒锋柊...", + "zp.refresher.complete": "鍒锋柊鎴愬姛", + "zp.refresher.f2": "鏉炬墜杩涘叆浜屾ゼ", + + "zp.loadingMore.default": "鐐瑰嚮鍔犺浇鏇村", + "zp.loadingMore.loading": "姝e湪鍔犺浇...", + "zp.loadingMore.noMore": "娌℃湁鏇村浜�", + "zp.loadingMore.fail": "鍔犺浇澶辫触锛岀偣鍑婚噸鏂板姞杞�", + + "zp.emptyView.title": "娌℃湁鏁版嵁鍝", + "zp.emptyView.reload": "閲嶆柊鍔犺浇", + "zp.emptyView.error": "寰堟姳姝夛紝鍔犺浇澶辫触", + + "zp.refresherUpdateTime.title": "鏈�鍚庢洿鏂帮細", + "zp.refresherUpdateTime.none": "鏃�", + "zp.refresherUpdateTime.today": "浠婂ぉ", + "zp.refresherUpdateTime.yesterday": "鏄ㄥぉ", + + "zp.systemLoading.title": "鍔犺浇涓�..." +} diff --git a/src/components/z-paging/i18n/zh-Hant.json b/src/components/z-paging/i18n/zh-Hant.json new file mode 100644 index 0000000..b3d5502 --- /dev/null +++ b/src/components/z-paging/i18n/zh-Hant.json @@ -0,0 +1,23 @@ +{ + "zp.refresher.default": "绻肩簩涓嬫媺閲嶇躬", + "zp.refresher.pulling": "楝嗛枊绔嬪嵆閲嶇躬", + "zp.refresher.refreshing": "姝e湪閲嶇躬...", + "zp.refresher.complete": "閲嶇躬鎴愬姛", + "zp.refresher.f2": "楝嗘墜閫插叆浜屾〒", + + "zp.loadingMore.default": "榛炴搳鍔犺級鏇村", + "zp.loadingMore.loading": "姝e湪鍔犺級...", + "zp.loadingMore.noMore": "娌掓湁鏇村浜�", + "zp.loadingMore.fail": "鍔犺級澶辨晽锛岄粸鎿婇噸鏂板姞杓�", + + "zp.emptyView.title": "娌掓湁鏁告摎鍝", + "zp.emptyView.reload": "閲嶆柊鍔犺級", + "zp.emptyView.error": "寰堟姳姝夛紝鍔犺級澶辨晽", + + "zp.refresherUpdateTime.title": "鏈�寰屾洿鏂帮細", + "zp.refresherUpdateTime.none": "鐒�", + "zp.refresherUpdateTime.today": "浠婂ぉ", + "zp.refresherUpdateTime.yesterday": "鏄ㄥぉ", + + "zp.systemLoading.title": "鍔犺級涓�..." +} diff --git a/src/components/z-paging/js/hooks/useZPaging.js b/src/components/z-paging/js/hooks/useZPaging.js new file mode 100644 index 0000000..adb6e1b --- /dev/null +++ b/src/components/z-paging/js/hooks/useZPaging.js @@ -0,0 +1,25 @@ +// [z-paging]useZPaging hooks + +import { onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'; + +function useZPaging(paging) { + const cPaging = !!paging ? paging.value || paging : null; + + onPullDownRefresh(() => { + if (!cPaging || !cPaging.value) return; + cPaging.value.reload().catch(() => {}); + }) + + onPageScroll(e => { + if (!cPaging || !cPaging.value) return; + cPaging.value.updatePageScrollTop(e.scrollTop); + e.scrollTop < 10 && cPaging.value.doChatRecordLoadMore(); + }) + + onReachBottom(() => { + if (!cPaging || !cPaging.value) return; + cPaging.value.pageReachBottom(); + }) +} + +export default useZPaging \ No newline at end of file diff --git a/src/components/z-paging/js/hooks/useZPagingComp.js b/src/components/z-paging/js/hooks/useZPagingComp.js new file mode 100644 index 0000000..f9bc5ab --- /dev/null +++ b/src/components/z-paging/js/hooks/useZPagingComp.js @@ -0,0 +1,25 @@ +// [z-paging]useZPagingComp hooks + +function useZPagingComp(paging) { + const cPaging = !!paging ? paging.value || paging : null; + + const reload = () => { + if (!cPaging || !cPaging.value) return; + cPaging.value.reload().catch(() => {}); + } + const updatePageScrollTop = scrollTop => { + if (!cPaging || !cPaging.value) return; + cPaging.value.updatePageScrollTop(scrollTop); + } + const doChatRecordLoadMore = () => { + if (!cPaging || !cPaging.value) return; + cPaging.value.doChatRecordLoadMore(); + } + const pageReachBottom = () => { + if (!cPaging || !cPaging.value) return; + cPaging.value.pageReachBottom(); + } + return { reload, updatePageScrollTop, doChatRecordLoadMore, pageReachBottom }; +} + +export default useZPagingComp \ No newline at end of file diff --git a/src/components/z-paging/js/modules/back-to-top.js b/src/components/z-paging/js/modules/back-to-top.js new file mode 100644 index 0000000..4e484d0 --- /dev/null +++ b/src/components/z-paging/js/modules/back-to-top.js @@ -0,0 +1,125 @@ +// [z-paging]鐐瑰嚮杩斿洖椤堕儴view妯″潡 +import u from '.././z-paging-utils' + +export default { + props: { + // 鑷姩鏄剧ず鐐瑰嚮杩斿洖椤堕儴鎸夐挳锛岄粯璁や负鍚� + autoShowBackToTop: { + type: Boolean, + default: u.gc('autoShowBackToTop', false) + }, + // 鐐瑰嚮杩斿洖椤堕儴鎸夐挳鏄剧ず/闅愯棌鐨勯槇鍊�(婊氬姩璺濈)锛屽崟浣嶄负px锛岄粯璁や负400rpx + backToTopThreshold: { + type: [Number, String], + default: u.gc('backToTopThreshold', '400rpx') + }, + // 鐐瑰嚮杩斿洖椤堕儴鎸夐挳鐨勮嚜瀹氫箟鍥剧墖鍦板潃锛岄粯璁や娇鐢▃-paging鍐呯疆鐨勫浘鐗� + backToTopImg: { + type: String, + default: u.gc('backToTopImg', '') + }, + // 鐐瑰嚮杩斿洖椤堕儴鎸夐挳杩斿洖鍒伴《閮ㄦ椂鏄惁灞曠ず杩囨浮鍔ㄧ敾锛岄粯璁や负鏄� + backToTopWithAnimate: { + type: Boolean, + default: u.gc('backToTopWithAnimate', true) + }, + // 鐐瑰嚮杩斿洖椤堕儴鎸夐挳涓庡簳閮ㄧ殑璺濈锛屾敞鎰忔坊鍔犲崟浣峱x鎴杛px锛岄粯璁や负160rpx + backToTopBottom: { + type: [Number, String], + default: u.gc('backToTopBottom', '160rpx') + }, + // 鐐瑰嚮杩斿洖椤堕儴鎸夐挳鐨勮嚜瀹氫箟鏍峰紡 + backToTopStyle: { + type: Object, + default: u.gc('backToTopStyle', {}), + }, + // iOS鐐瑰嚮椤堕儴鐘舵�佹爮銆佸畨鍗撳弻鍑绘爣棰樻爮鏃讹紝婊氬姩鏉¤繑鍥為《閮紝鍙敮鎸佺珫鍚戯紝榛樿涓烘槸 + enableBackToTop: { + type: Boolean, + default: u.gc('enableBackToTop', true) + }, + }, + data() { + return { + // 鐐瑰嚮杩斿洖椤堕儴鐨刢lass + backToTopClass: 'zp-back-to-top zp-back-to-top-hide', + // 涓婃鐐瑰嚮杩斿洖椤堕儴鐨勬椂闂� + lastBackToTopShowTime: 0, + // 鐐瑰嚮杩斿洖椤堕儴鏄剧ず鐨刢lass鏄惁鍦ㄥ睍绀轰腑锛屼娇寰楁寜閽睍绀�/闅愯棌杩囧害鏁堟灉鏇磋嚜鐒� + showBackToTopClass: false, + } + }, + computed: { + backToTopThresholdUnitConverted() { + return u.addUnit(this.backToTopThreshold, this.unit); + }, + backToTopBottomUnitConverted() { + return u.addUnit(this.backToTopBottom, this.unit); + }, + finalEnableBackToTop() { + return this.usePageScroll ? false : this.enableBackToTop; + }, + finalBackToTopThreshold() { + return u.convertToPx(this.backToTopThresholdUnitConverted); + }, + finalBackToTopStyle() { + const backToTopStyle = this.backToTopStyle; + if (!backToTopStyle.bottom) { + backToTopStyle.bottom = this.windowBottom + u.convertToPx(this.backToTopBottomUnitConverted) + 'px'; + } + if(!backToTopStyle.position){ + backToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute'; + } + return backToTopStyle; + }, + finalBackToTopClass() { + return `${this.backToTopClass} zp-back-to-top-${this.unit}`; + } + }, + methods: { + // 鐐瑰嚮浜嗚繑鍥為《閮� + _backToTopClick() { + let callbacked = false; + this.$emit('backToTopClick', toTop => { + (toTop === undefined || toTop === true) && this._handleToTop(); + callbacked = true; + }); + // 濡傛灉鐢ㄦ埛娌℃湁绂佹榛樿鐨勮繑鍥為《閮ㄤ簨浠讹紝鍒欒Е鍙戞粴鍔ㄥ埌椤堕儴 + this.$nextTick(() => { + !callbacked && this._handleToTop(); + }) + }, + // 澶勭悊婊氬姩鍒伴《閮紙鑱婂ぉ璁板綍妯″紡涓负婊氬姩鍒板簳閮級 + _handleToTop() { + !this.backToTopWithAnimate && this._checkShouldShowBackToTop(0); + !this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate); + }, + // 鍒ゆ柇鏄惁瑕佹樉绀鸿繑鍥為《閮ㄦ寜閽� + _checkShouldShowBackToTop(scrollTop) { + if (!this.autoShowBackToTop) { + this.showBackToTopClass = false; + return; + } + if (scrollTop > this.finalBackToTopThreshold) { + if (!this.showBackToTopClass) { + // 璁板綍褰撳墠鐐瑰嚮杩斿洖椤堕儴鎸夐挳鏄剧ず鐨刢lass鐢熸晥浜� + this.showBackToTopClass = true; + this.lastBackToTopShowTime = new Date().getTime(); + // 褰撴粴鍔ㄥ埌闇�瑕佸睍绀鸿繑鍥為《閮ㄧ殑闃堝�煎唴锛屽垯寤惰繜300姣灞曠ず杩斿洖鍒伴《閮ㄦ寜閽� + u.delay(() => { + this.backToTopClass = 'zp-back-to-top zp-back-to-top-show'; + }, 300) + } + } else { + // 濡傛灉褰撳墠鐐瑰嚮杩斿洖椤堕儴鎸夐挳鏄剧ず鐨刢lass鏄敓鏁堢姸鎬佸苟涓旀粴鍔ㄥ皬浜庤Е鍙戦槇鍊硷紝鍒欓殣钘忚繑鍥為《閮ㄦ寜閽� + if (this.showBackToTopClass) { + this.backToTopClass = 'zp-back-to-top zp-back-to-top-hide'; + u.delay(() => { + this.showBackToTopClass = false; + }, new Date().getTime() - this.lastBackToTopShowTime < 500 ? 0 : 300) + } + } + }, + } +} + diff --git a/src/components/z-paging/js/modules/chat-record-mode.js b/src/components/z-paging/js/modules/chat-record-mode.js new file mode 100644 index 0000000..daacf0c --- /dev/null +++ b/src/components/z-paging/js/modules/chat-record-mode.js @@ -0,0 +1,149 @@ +// [z-paging]鑱婂ぉ璁板綍妯″紡妯″潡 +import u from '.././z-paging-utils' + +export default { + props: { + // 浣跨敤鑱婂ぉ璁板綍妯″紡锛岄粯璁や负鍚� + useChatRecordMode: { + type: Boolean, + default: u.gc('useChatRecordMode', false) + }, + // 浣跨敤鑱婂ぉ璁板綍妯″紡鏃舵粴鍔ㄥ埌椤堕儴鍚庯紝鍒楄〃鍨傜洿绉诲姩鍋忕Щ璺濈銆傞粯璁�0rpx銆傚崟浣峱x锛堟殏鏃舵棤鏁堬級 + chatRecordMoreOffset: { + type: [Number, String], + default: u.gc('chatRecordMoreOffset', '0rpx') + }, + // 浣跨敤鑱婂ぉ璁板綍妯″紡鏃舵槸鍚﹁嚜鍔ㄩ殣钘忛敭鐩橈細鍦ㄧ敤鎴疯Е鎽稿垪琛ㄦ椂鍊欒嚜鍔ㄩ殣钘忛敭鐩橈紝榛樿涓烘槸 + autoHideKeyboardWhenChat: { + type: Boolean, + default: u.gc('autoHideKeyboardWhenChat', true) + }, + // 浣跨敤鑱婂ぉ璁板綍妯″紡涓敭鐩樺脊鍑烘椂鏄惁鑷姩璋冩暣slot="bottom"楂樺害锛岄粯璁や负鏄� + autoAdjustPositionWhenChat: { + type: Boolean, + default: u.gc('autoAdjustPositionWhenChat', true) + }, + // 浣跨敤鑱婂ぉ璁板綍妯″紡涓敭鐩樺脊鍑烘椂鍗犱綅楂樺害鍋忕Щ璺濈銆傞粯璁�0rpx銆傚崟浣峱x + chatAdjustPositionOffset: { + type: [Number, String], + default: u.gc('chatAdjustPositionOffset', '0rpx') + }, + // 浣跨敤鑱婂ぉ璁板綍妯″紡涓敭鐩樺脊鍑烘椂鏄惁鑷姩婊氬姩鍒板簳閮紝榛樿涓哄惁 + autoToBottomWhenChat: { + type: Boolean, + default: u.gc('autoToBottomWhenChat', false) + }, + // 浣跨敤鑱婂ぉ璁板綍妯″紡涓璻eload鏃舵槸鍚︽樉绀篶hatLoading锛岄粯璁や负鍚� + showChatLoadingWhenReload: { + type: Boolean, + default: u.gc('showChatLoadingWhenReload', false) + }, + // 鍦ㄨ亰澶╄褰曟ā寮忎腑婊戝姩鍒伴《閮ㄧ姸鎬佷负榛樿鐘舵�佹椂锛屼互鍔犺浇涓殑鐘舵�佸睍绀猴紝榛樿涓烘槸銆傝嫢璁剧疆涓哄惁锛屽垯榛樿浼氭樉绀恒�愮偣鍑诲姞杞芥洿澶氥�戯紝鐒跺悗鎵嶄細鏄剧ずloading + chatLoadingMoreDefaultAsLoading: { + type: Boolean, + default: u.gc('chatLoadingMoreDefaultAsLoading', true) + }, + }, + data() { + return { + // 閿洏楂樺害 + keyboardHeight: 0, + // 閿洏楂樺害鏄惁鏈敼鍙橈紝姝ゆ椂鍗犱綅楂樺害鍙樺寲涓嶉渶瑕佸姩鐢绘晥鏋� + isKeyboardHeightChanged: false, + } + }, + computed: { + finalChatRecordMoreOffset() { + return u.convertToPx(this.chatRecordMoreOffset); + }, + finalChatAdjustPositionOffset() { + return u.convertToPx(this.chatAdjustPositionOffset); + }, + // 鑱婂ぉ璁板綍妯″紡鏃嬭浆180搴tyle + chatRecordRotateStyle() { + let cellStyle; + // 鍦╲ue涓紝鐩存帴灏嗗垪琛ㄥ�掔疆锛屽洜姝ゅ湪vue鐨刢ell涓紝涔熺洿鎺ュ啓style="transform: scaleY(-1)"杞洖鏉ュ嵆鍙�� + // #ifndef APP-NVUE + cellStyle = this.useChatRecordMode ? { transform: 'scaleY(-1)' } : {}; + // #endif + + // 鍦╪vue涓紝闇�瑕佽�冭檻鏁版嵁閲忎笉婊′竴椤电殑鎯呭喌锛屽洜涓簄vue涓殑list鏃犳硶閫氳繃flex-end淇敼涓嶆弧涓�椤电殑璧峰浣嶇疆锛屼細瀵艰嚧涓嶆弧涓�椤垫椂鍒楄〃鏁版嵁浠庡簳閮ㄥ紑濮嬶紝鍥犳闇�瑕佺壒鍒垽鏂� + // 褰撴暟鎹笉婊′竴灞忕殑鏃跺�欙紝涓嶈繘琛屽垪琛ㄥ�掔疆 + // #ifdef APP-NVUE + cellStyle = this.useChatRecordMode ? { transform: this.isFirstPageAndNoMore ? 'scaleY(1)' : 'scaleY(-1)' } : {}; + // #endif + + this.$emit('update:cellStyle', cellStyle); + this.$emit('cellStyleChange', cellStyle); + + // 鍦ㄨ亰澶╄褰曟ā寮忎腑锛屽鏋滃垪琛ㄦ病鏈夊�掔疆骞朵笖褰撳墠鏄涓�椤碉紝鍒欓渶瑕佽嚜鍔ㄦ粴鍔ㄥ埌鏈�搴曢儴 + this.$nextTick(() => { + if (this.isFirstPage && this.isChatRecordModeAndNotInversion) { + this.$nextTick(() => { + // 杩欓噷澶氭瑙﹀彂婊氬姩鍒板簳閮ㄦ槸涓轰簡閬垮厤鍦ㄦ煇浜涙儏鍐典笅锛屽嵆浣挎槸鍦╪extTick浣嗘槸cell鏈覆鏌撳畬姣曞鑷存粴鍔ㄥ埌搴曢儴浣嶇疆涓嶆纭殑闂 + this._scrollToBottom(false); + u.delay(() => { + this._scrollToBottom(false); + u.delay(() => { + this._scrollToBottom(false); + }, 50) + }, 50) + }) + } + }) + return cellStyle; + }, + // 鏄惁鏄亰澶╄褰曞垪琛ㄥ苟涓旀湁閰嶇疆transform + isChatRecordModeHasTransform() { + return this.useChatRecordMode && this.chatRecordRotateStyle && this.chatRecordRotateStyle.transform; + }, + // 鏄惁鏄亰澶╄褰曞垪琛ㄥ苟涓斿垪琛ㄦ湭鍊掔疆 + isChatRecordModeAndNotInversion() { + return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === 'scaleY(1)'; + }, + // 鏄惁鏄亰澶╄褰曞垪琛ㄥ苟涓斿垪琛ㄥ�掔疆 + isChatRecordModeAndInversion() { + return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === 'scaleY(-1)'; + }, + // 鏈�缁堢殑鑱婂ぉ璁板綍妯″紡涓簳閮ㄥ畨鍏ㄥ尯鍩熺殑楂樺害锛屽鏋滃紑鍚簡搴曢儴瀹夊叏鍖哄煙骞朵笖閿洏鏈脊鍑猴紝鍒欐坊鍔犲簳閮ㄥ尯鍩熼珮搴� + chatRecordModeSafeAreaBottom() { + return this.safeAreaInsetBottom && !this.keyboardHeight ? this.safeAreaBottom : 0; + } + }, + mounted() { + // 鐩戝惉閿洏楂樺害鍙樺寲锛圚5銆佺櫨搴﹀皬绋嬪簭銆佹姈闊冲皬绋嬪簭銆侀涔﹀皬绋嬪簭涓嶆敮鎸侊級 + // #ifndef H5 || MP-BAIDU || MP-TOUTIAO + if (this.useChatRecordMode) { + uni.onKeyboardHeightChange(this._handleKeyboardHeightChange); + } + // #endif + }, + methods: { + // 娣诲姞鑱婂ぉ璁板綍 + addChatRecordData(data, toBottom = true, toBottomWithAnimate = true) { + if (!this.useChatRecordMode) return; + this.isTotalChangeFromAddData = true; + this.addDataFromTop(data, toBottom, toBottomWithAnimate); + }, + // 鎵嬪姩瑙﹀彂婊氬姩鍒伴《閮ㄥ姞杞芥洿澶氾紝鑱婂ぉ璁板綍妯″紡鏃舵湁鏁� + doChatRecordLoadMore() { + this.useChatRecordMode && this._onLoadingMore('click'); + }, + // 澶勭悊閿洏楂樺害鍙樺寲 + _handleKeyboardHeightChange(res) { + this.$emit('keyboardHeightChange', res); + if (this.autoAdjustPositionWhenChat) { + this.isKeyboardHeightChanged = true; + this.keyboardHeight = res.height > 0 ? res.height + this.finalChatAdjustPositionOffset : res.height; + } + if (this.autoToBottomWhenChat && this.keyboardHeight > 0) { + u.delay(() => { + this.scrollToBottom(false); + u.delay(() => { + this.scrollToBottom(false); + }) + }) + } + } + } +} diff --git a/src/components/z-paging/js/modules/common-layout.js b/src/components/z-paging/js/modules/common-layout.js new file mode 100644 index 0000000..777240e --- /dev/null +++ b/src/components/z-paging/js/modules/common-layout.js @@ -0,0 +1,152 @@ +// [z-paging]閫氱敤甯冨眬鐩稿叧妯″潡 +import u from '.././z-paging-utils' + +// #ifdef APP-NVUE +const weexDom = weex.requireModule('dom'); +// #endif + +export default { + data() { + return { + systemInfo: null, + cssSafeAreaInsetBottom: -1, + isReadyDestroy: false, + } + }, + computed: { + // 椤堕儴鍙敤璺濈 + windowTop() { + if (!this.systemInfo) return 0; + // 鏆傛椂淇vue3涓殣钘忕郴缁熷鑸爮鍚巜indowTop鑾峰彇涓嶆纭殑闂锛屽叿浣揵ug璇﹁https://ask.dcloud.net.cn/question/141634 + // 鎰熻阿litangyu锛侊紒https://github.com/SmileZXLee/uni-z-paging/issues/25 + // #ifdef VUE3 && H5 + const pageHeadNode = document.getElementsByTagName("uni-page-head"); + if (!pageHeadNode.length) return 0; + // #endif + return this.systemInfo.windowTop || 0; + }, + // 搴曢儴瀹夊叏鍖哄煙楂樺害 + safeAreaBottom() { + if (!this.systemInfo) return 0; + let safeAreaBottom = 0; + // #ifdef APP-PLUS + safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0 ; + // #endif + // #ifndef APP-PLUS + safeAreaBottom = Math.max(this.cssSafeAreaInsetBottom, 0); + // #endif + return safeAreaBottom; + }, + // 鏄惁鏄瘮杈冭�佺殑webview锛屽湪涓�浜涜�佺殑webview涓紝闇�瑕佽繘琛屼竴浜涚壒娈婂鐞� + isOldWebView() { + // #ifndef APP-NVUE || MP-KUAISHOU + try { + const systemInfos = u.getSystemInfoSync(true).system.split(' '); + const deviceType = systemInfos[0]; + const version = parseInt(systemInfos[1]); + if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) { + return true; + } + } catch(e) { + return false; + } + // #endif + return false; + }, + // 褰撳墠缁勪欢鐨�$slots锛屽吋瀹逛笉鍚屽钩鍙� + zSlots() { + // #ifdef VUE2 + + // #ifdef MP-ALIPAY + return this.$slots; + // #endif + + return this.$scopedSlots || this.$slots; + // #endif + + return this.$slots; + }, + }, + beforeDestroy() { + this.isReadyDestroy = true; + }, + // #ifdef VUE3 + unmounted() { + this.isReadyDestroy = true; + }, + // #endif + methods: { + // 鏇存柊fixed妯″紡涓媧-paging鐨勫竷灞� + updateFixedLayout() { + this.fixed && this.$nextTick(() => { + this.systemInfo = u.getSystemInfoSync(); + }) + }, + // 鑾峰彇鑺傜偣灏哄 + _getNodeClientRect(select, inDom = true, scrollOffset = false) { + if (this.isReadyDestroy) { + return Promise.resolve(false); + }; + // nvue涓幏鍙栬妭鐐逛俊鎭� + // #ifdef APP-NVUE + select = select.replace(/[.|#]/g, ''); + const ref = this.$refs[select]; + return new Promise((resolve, reject) => { + if (ref) { + weexDom.getComponentRect(ref, option => { + resolve(option && option.result ? [option.size] : false); + }) + } else { + resolve(false); + } + }); + return; + // #endif + + // vue涓幏鍙栬妭鐐逛俊鎭� + //#ifdef MP-ALIPAY + inDom = false; + //#endif + + /* + inDom鍙兘鏄痶rue銆乫alse锛屼篃鍙兘鏄叿浣撶殑dom鑺傜偣 + 濡傛灉inDom涓嶄负false锛屽垯浣跨敤uni.createSelectorQuery().in()杩涜鏌ヨ锛屽鏋渋nDom涓簍rue锛屽垯in涓殑鏄痶his锛屽惁鍒檌n涓殑涓哄叿浣撶殑dom + 濡傛灉inDom涓篺alse锛屽垯浣跨敤uni.createSelectorQuery()杩涜鏌ヨ + */ + let res = !!inDom ? uni.createSelectorQuery().in(inDom === true ? this : inDom) : uni.createSelectorQuery(); + scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect(); + return new Promise((resolve, reject) => { + res.exec(data => { + resolve((data && data != '' && data != undefined && data.length) ? data : false); + }); + }); + }, + // 鑾峰彇slot="left"鍜宻lot="right"瀹藉害骞朵笖鏇存柊甯冨眬 + _updateLeftAndRightWidth(targetStyle, parentNodePrefix) { + this.$nextTick(() => { + let delayTime = 0; + // #ifdef MP-BAIDU + delayTime = 10; + // #endif + setTimeout(() => { + ['left','right'].map(position => { + this._getNodeClientRect(`.${parentNodePrefix}-${position}`).then(res => { + this.$set(targetStyle, position, res ? res[0].width + 'px' : '0px'); + }); + }) + }, delayTime) + }) + }, + // 閫氳繃鑾峰彇css璁剧疆鐨勫簳閮ㄥ畨鍏ㄥ尯鍩熷崰浣峷iew楂樺害璁剧疆bottom璺濈锛堢洿鎺ラ�氳繃systemInfo鍦ㄩ儴鍒嗗钩鍙颁笂鏃犳硶鑾峰彇鍒板簳閮ㄥ畨鍏ㄥ尯鍩燂級 + _getCssSafeAreaInsetBottom(success) { + this._getNodeClientRect('.zp-safe-area-inset-bottom').then(res => { + this.cssSafeAreaInsetBottom = res ? res[0].height : -1; + res && success && success(); + }); + }, + // 鍚屾鑾峰彇绯荤粺淇℃伅锛屽吋瀹逛笉鍚屽钩鍙帮紙渚泎-paging-swiper浣跨敤锛� + _getSystemInfoSync(useCache = false) { + return u.getSystemInfoSync(useCache); + } + } +} diff --git a/src/components/z-paging/js/modules/data-handle.js b/src/components/z-paging/js/modules/data-handle.js new file mode 100644 index 0000000..f049860 --- /dev/null +++ b/src/components/z-paging/js/modules/data-handle.js @@ -0,0 +1,736 @@ +// [z-paging]鏁版嵁澶勭悊妯″潡 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' +import interceptor from '../z-paging-interceptor' + +export default { + props: { + // 鑷畾涔夊垵濮嬬殑pageNo锛岄粯璁や负1 + defaultPageNo: { + type: Number, + default: u.gc('defaultPageNo', 1), + observer: function(newVal) { + this.pageNo = newVal; + }, + }, + // 鑷畾涔塸ageSize锛岄粯璁や负10 + defaultPageSize: { + type: Number, + default: u.gc('defaultPageSize', 10), + validator: (value) => { + if (value <= 0) u.consoleErr('default-page-size蹇呴』澶т簬0锛�'); + return value > 0; + } + }, + // 涓轰繚璇佹暟鎹竴鑷达紝璁剧疆褰撳墠tab鍒囨崲鏃剁殑鏍囪瘑key锛屽苟鍦╟omplete涓紶閫掔浉鍚宬ey锛岃嫢浜岃�呬笉涓�鑷达紝鍒檆omplete灏嗕笉浼氱敓鏁� + dataKey: { + type: [Number, String, Object], + default: u.gc('dataKey', null), + }, + // 浣跨敤缂撳瓨锛岃嫢寮�鍚皢鑷姩缂撳瓨绗竴椤电殑鏁版嵁锛岄粯璁や负鍚︺�傝娉ㄦ剰锛屽洜鑰冭檻鍒板垏鎹ab鏃朵笉鍚宼ab鏁版嵁涓嶅悓鐨勬儏鍐碉紝榛樿浠呬細缂撳瓨缁勪欢棣栨鍔犺浇鏃剁涓�娆¤姹傚埌鐨勬暟鎹紝鍚庣画鐨勪笅鎷夊埛鏂版搷浣滀笉浼氭洿鏂扮紦瀛樸�� + useCache: { + type: Boolean, + default: u.gc('useCache', false) + }, + // 浣跨敤缂撳瓨鏃剁紦瀛樼殑key锛岀敤浜庡尯鍒嗕笉鍚屽垪琛ㄧ殑缂撳瓨鏁版嵁锛寀seCache涓簍rue鏃跺繀椤昏缃紝鍚﹀垯缂撳瓨鏃犳晥 + cacheKey: { + type: String, + default: u.gc('cacheKey', null) + }, + // 缂撳瓨妯″紡锛岄粯璁や粎浼氱紦瀛樼粍浠堕娆″姞杞芥椂绗竴娆¤姹傚埌鐨勬暟鎹紝鍙缃负always锛屽嵆浠h〃鎬绘槸缂撳瓨锛屾瘡娆″垪琛ㄥ埛鏂�(涓嬫媺鍒锋柊銆佽皟鐢╮eload绛�)閮戒細鏇存柊缂撳瓨 + cacheMode: { + type: String, + default: u.gc('cacheMode', Enum.CacheMode.Default) + }, + // 鑷姩娉ㄥ叆鐨刲ist鍚嶏紝鍙嚜鍔ㄤ慨鏀圭埗view(鍖呭惈ref="paging")涓搴攏ame鐨刲ist鍊� + autowireListName: { + type: String, + default: u.gc('autowireListName', '') + }, + // 鑷姩娉ㄥ叆鐨剄uery鍚嶏紝鍙嚜鍔ㄨ皟鐢ㄧ埗view(鍖呭惈ref="paging")涓殑query鏂规硶 + autowireQueryName: { + type: String, + default: u.gc('autowireQueryName', '') + }, + // 鑾峰彇鍒嗛〉鏁版嵁Function锛屽姛鑳戒笌@query绫讳技銆傝嫢璁剧疆浜唂etch鍒橜query灏嗕笉鍐嶈Е鍙� + fetch: { + type: Function, + default: null + }, + // fetch鐨勯檮鍔犲弬鏁帮紝fetch閰嶇疆鍚庢湁鏁� + fetchParams: { + type: Object, + default: u.gc('fetchParams', null) + }, + // z-paging mounted鍚庤嚜鍔ㄨ皟鐢╮eload鏂规硶(mounted鍚庤嚜鍔ㄨ皟鐢ㄦ帴鍙�)锛岄粯璁や负鏄� + auto: { + type: Boolean, + default: u.gc('auto', true) + }, + // 鐢ㄦ埛涓嬫媺鍒锋柊鏃舵槸鍚﹁Е鍙憆eload鏂规硶锛岄粯璁や负鏄� + reloadWhenRefresh: { + type: Boolean, + default: u.gc('reloadWhenRefresh', true) + }, + // reload鏃惰嚜鍔ㄦ粴鍔ㄥ埌椤堕儴锛岄粯璁や负鏄� + autoScrollToTopWhenReload: { + type: Boolean, + default: u.gc('autoScrollToTopWhenReload', true) + }, + // reload鏃剁珛鍗宠嚜鍔ㄦ竻绌哄師list锛岄粯璁や负鏄紝鑻ョ珛鍗宠嚜鍔ㄦ竻绌猴紝鍒欏湪reload涔嬪悗銆佽姹傚洖璋冧箣鍓嶉〉闈㈡槸绌虹櫧鐨� + autoCleanListWhenReload: { + type: Boolean, + default: u.gc('autoCleanListWhenReload', true) + }, + // 鍒楄〃鍒锋柊鏃惰嚜鍔ㄦ樉绀轰笅鎷夊埛鏂皏iew锛岄粯璁や负鍚� + showRefresherWhenReload: { + type: Boolean, + default: u.gc('showRefresherWhenReload', false) + }, + // 鍒楄〃鍒锋柊鏃惰嚜鍔ㄦ樉绀哄姞杞芥洿澶歷iew锛屼笖涓哄姞杞戒腑鐘舵�侊紝榛樿涓哄惁 + showLoadingMoreWhenReload: { + type: Boolean, + default: u.gc('showLoadingMoreWhenReload', false) + }, + // 缁勪欢created鏃剁珛鍗宠Е鍙憆eload(鍙В鍐充竴浜涙儏鍐典笅鍏堢湅鍒伴〉闈㈠啀鐪嬪埌loading鐨勯棶棰�)锛宎uto涓簍rue鏃舵湁鏁堛�備负鍚︽椂灏嗗湪mounted+nextTick鍚庤Е鍙憆eload锛岄粯璁や负鍚� + createdReload: { + type: Boolean, + default: u.gc('createdReload', false) + }, + // 鏈湴鍒嗛〉鏃朵笂鎷夊姞杞芥洿澶氬欢杩熸椂闂达紝鍗曚綅涓烘绉掞紝榛樿200姣 + localPagingLoadingTime: { + type: [Number, String], + default: u.gc('localPagingLoadingTime', 200) + }, + // 鑷姩鎷兼帴complete涓紶杩囨潵鐨勬暟缁�(浣跨敤鑱婂ぉ璁板綍妯″紡鏃舵棤鏁�) + concat: { + type: Boolean, + default: u.gc('concat', true) + }, + // 璇锋眰澶辫触鏄惁瑙﹀彂reject锛岄粯璁や负鏄� + callNetworkReject: { + type: Boolean, + default: u.gc('callNetworkReject', true) + }, + // 鐖剁粍浠秜-model鎵�缁戝畾鐨刲ist鐨勫�� + value: { + type: Array, + default: function() { + return []; + } + }, + // #ifdef VUE3 + modelValue: { + type: Array, + default: function() { + return []; + } + } + // #endif + }, + data (){ + return { + currentData: [], + totalData: [], + realTotalData: [], + totalLocalPagingList: [], + dataPromiseResultMap: { + reload: null, + complete: null, + localPaging: null + }, + isSettingCacheList: false, + pageNo: 1, + currentRefreshPageSize: 0, + isLocalPaging: false, + isAddedData: false, + isTotalChangeFromAddData: false, + privateConcat: true, + myParentQuery: -1, + firstPageLoaded: false, + pagingLoaded: false, + loaded: false, + isUserReload: true, + fromEmptyViewReload: false, + queryFrom: '', + listRendering: false, + isHandlingRefreshToPage: false, + isFirstPageAndNoMore: false, + totalDataChangeThrow: true + } + }, + computed: { + pageSize() { + return this.defaultPageSize; + }, + finalConcat() { + return this.concat && this.privateConcat; + }, + finalUseCache() { + if (this.useCache && !this.cacheKey) { + u.consoleErr('use-cache涓簍rue鏃讹紝蹇呴』璁剧疆cache-key锛屽惁鍒欑紦瀛樻棤鏁堬紒'); + } + return this.useCache && !!this.cacheKey; + }, + finalCacheKey() { + return this.cacheKey ? `${c.cachePrefixKey}-${this.cacheKey}` : null; + }, + isFirstPage() { + return this.pageNo === this.defaultPageNo; + } + }, + watch: { + totalData(newVal, oldVal) { + this._totalDataChange(newVal, oldVal, this.totalDataChangeThrow); + this.totalDataChangeThrow = true; + }, + currentData(newVal, oldVal) { + this._currentDataChange(newVal, oldVal); + }, + useChatRecordMode(newVal, oldVal) { + if (newVal) { + this.nLoadingMoreFixedHeight = false; + } + }, + value: { + handler(newVal) { + // 褰搗-model缁戝畾鐨勬暟鎹簮琚洿鏀规椂锛屾鏃舵暟鎹簮鏀瑰彉涓峞mit input浜嬩欢锛岄伩鍏嶅惊鐜皟鐢� + if (newVal !== this.totalData) { + this.totalDataChangeThrow = false; + this.totalData = newVal; + } + }, + immediate: true + }, + // #ifdef VUE3 + modelValue: { + handler(newVal) { + // 褰搗-model缁戝畾鐨勬暟鎹簮琚洿鏀规椂锛屾鏃舵暟鎹簮鏀瑰彉涓峞mit input浜嬩欢锛岄伩鍏嶅惊鐜皟鐢� + if (newVal !== this.totalData) { + this.totalDataChangeThrow = false; + this.totalData = newVal; + } + }, + immediate: true + } + // #endif + }, + methods: { + // 璇锋眰缁撴潫(鎴愬姛鎴栬�呭け璐�)璋冪敤姝ゆ柟娉曪紝灏嗚姹傜殑缁撴灉浼犻�掔粰z-paging澶勭悊锛岀涓�涓弬鏁颁负璇锋眰缁撴灉鏁扮粍锛岀浜屼釜鍙傛暟涓烘槸鍚︽垚鍔�(榛樿涓烘槸锛� + complete(data, success = true) { + this.customNoMore = -1; + return this.addData(data, success); + }, + //銆愪繚璇佹暟鎹竴鑷淬�戣姹傜粨鏉�(鎴愬姛鎴栬�呭け璐�)璋冪敤姝ゆ柟娉曪紝灏嗚姹傜殑缁撴灉浼犻�掔粰z-paging澶勭悊锛岀涓�涓弬鏁颁负璇锋眰缁撴灉鏁扮粍锛岀浜屼釜鍙傛暟涓篸ataKey锛岄渶涓�:data-key缁戝畾鐨勪竴鑷达紝绗笁涓弬鏁颁负鏄惁鎴愬姛(榛樿涓烘槸锛� + completeByKey(data, dataKey = null, success = true) { + if (dataKey !== null && this.dataKey !== null && dataKey !== this.dataKey) { + this.isFirstPage && this.endRefresh(); + return new Promise(resolve => resolve()); + } + this.customNoMore = -1; + return this.addData(data, success); + }, + //銆愰�氳繃total鍒ゆ柇鏄惁鏈夋洿澶氭暟鎹�戣姹傜粨鏉�(鎴愬姛鎴栬�呭け璐�)璋冪敤姝ゆ柟娉曪紝灏嗚姹傜殑缁撴灉浼犻�掔粰z-paging澶勭悊锛岀涓�涓弬鏁颁负璇锋眰缁撴灉鏁扮粍锛岀浜屼釜鍙傛暟涓簍otal(鍒楄〃鎬绘暟)锛岀涓変釜鍙傛暟涓烘槸鍚︽垚鍔�(榛樿涓烘槸锛� + completeByTotal(data, total, success = true) { + if (total == 'undefined') { + this.customNoMore = -1; + } else { + const dataTypeRes = this._checkDataType(data, success, false); + data = dataTypeRes.data; + success = dataTypeRes.success; + if (total >= 0 && success) { + return new Promise((resolve, reject) => { + this.$nextTick(() => { + let nomore = false; + const realTotalDataCount = this.pageNo == this.defaultPageNo ? 0 : this.realTotalData.length; + const dataLength = this.privateConcat ? data.length : 0; + let exceedCount = realTotalDataCount + dataLength - total; + // 娌℃湁鏇村鏁版嵁浜� + if (exceedCount >= 0) { + nomore = true; + // 浠呮埅鍙杢otal鍐呴儴鍒嗙殑鏁版嵁 + exceedCount = this.defaultPageSize - exceedCount; + if (this.privateConcat && exceedCount > 0 && exceedCount < data.length) { + data = data.splice(0, exceedCount); + } + } + this.completeByNoMore(data, nomore, success).then(res => resolve(res)).catch(() => reject()); + }) + }); + } + } + return this.addData(data, success); + }, + //銆愯嚜琛屽垽鏂槸鍚︽湁鏇村鏁版嵁銆戣姹傜粨鏉�(鎴愬姛鎴栬�呭け璐�)璋冪敤姝ゆ柟娉曪紝灏嗚姹傜殑缁撴灉浼犻�掔粰z-paging澶勭悊锛岀涓�涓弬鏁颁负璇锋眰缁撴灉鏁扮粍锛岀浜屼釜鍙傛暟涓烘槸鍚︽病鏈夋洿澶氭暟鎹紝绗笁涓弬鏁颁负鏄惁鎴愬姛(榛樿鏄槸锛� + completeByNoMore(data, nomore, success = true) { + if (nomore != 'undefined') { + this.customNoMore = nomore == true ? 1 : 0; + } + return this.addData(data, success); + }, + // 璇锋眰缁撴潫涓旇姹傚け璐ユ椂璋冪敤锛屾敮鎸佷紶鍏ヨ姹傚け璐ュ師鍥� + completeByError(errorMsg) { + this.customerEmptyViewErrorText = errorMsg; + return this.complete(false); + }, + // 涓庝笂鏂筩omplete鏂规硶鍔熻兘涓�鑷达紝鏂扮増鏈腑璁剧疆鏈嶅姟绔洖璋冩暟缁勮浣跨敤complete鏂规硶 + addData(data, success = true) { + if (!this.fromCompleteEmit) { + this.disabledCompleteEmit = true; + this.fromCompleteEmit = false; + } + const currentTimeStamp = u.getTime(); + const disTime = currentTimeStamp - this.requestTimeStamp; + let minDelay = this.minDelay; + if (this.isFirstPage && this.finalShowRefresherWhenReload) { + minDelay = Math.max(400, minDelay); + } + const addDataDalay = (this.requestTimeStamp > 0 && disTime < minDelay) ? minDelay - disTime : 0; + this.$nextTick(() => { + u.delay(() => { + this._addData(data, success, false); + }, this.delay > 0 ? this.delay : addDataDalay) + }) + + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.complete = { resolve, reject }; + }); + }, + // 浠庨《閮ㄦ坊鍔犳暟鎹紝涓嶄細褰卞搷鍒嗛〉鐨刾ageNo鍜宲ageSize + addDataFromTop(data, toTop = true, toTopWithAnimate = true) { + // 鏁版嵁鏄惁鎷兼帴鍒伴《閮紝濡傛灉鏄亰澶╄褰曟ā寮忓苟涓斿垪琛ㄦ病鏈夊�掔疆锛屽垯搴旇鎷兼帴鍦ㄥ簳閮� + let addFromTop = !this.isChatRecordModeAndNotInversion; + data = Object.prototype.toString.call(data) !== '[object Array]' ? [data] : (addFromTop ? data.reverse() : data); + // #ifndef APP-NVUE + this.finalUseVirtualList && this._setCellIndex(data, 'top') + // #endif + + this.totalData = addFromTop ? [...data, ...this.totalData] : [...this.totalData, ...data]; + if (toTop) { + u.delay(() => this.useChatRecordMode ? this.scrollToBottom(toTopWithAnimate) : this.scrollToTop(toTopWithAnimate)); + } + }, + // 閲嶆柊璁剧疆鍒楄〃鏁版嵁锛岃皟鐢ㄦ鏂规硶涓嶄細褰卞搷pageNo鍜宲ageSize锛屼篃涓嶄細瑙﹀彂璇锋眰銆傞�傜敤鍦烘櫙锛氬綋闇�瑕佸垹闄ゅ垪琛ㄤ腑鏌愪竴椤规椂锛屽皢鍒犻櫎瀵瑰簲椤瑰悗鐨勬暟缁勯�氳繃姝ゆ柟娉曚紶閫掔粰z-paging銆�(褰撳嚭鐜扮被浼肩殑闇�瑕佷慨鏀瑰垪琛ㄦ暟缁勭殑鍦烘櫙鏃讹紝璇蜂娇鐢ㄦ鏂规硶锛岃鍕跨洿鎺ヤ慨鏀筽age涓�:list.sync缁戝畾鐨勬暟缁�) + resetTotalData(data) { + this.isTotalChangeFromAddData = true; + data = Object.prototype.toString.call(data) !== '[object Array]' ? [data] : data; + this.totalData = data; + }, + // 璁剧疆鏈湴鍒嗛〉鏁版嵁锛岃姹傜粨鏉�(鎴愬姛鎴栬�呭け璐�)璋冪敤姝ゆ柟娉曪紝灏嗚姹傜殑缁撴灉浼犻�掔粰z-paging浣滃垎椤靛鐞嗭紙鑻ヨ皟鐢ㄤ簡姝ゆ柟娉曪紝鍒欎笂鎷夊姞杞芥洿澶氭椂鍐呴儴浼氳嚜鍔ㄥ垎椤碉紝涓嶄細瑙﹀彂@query鎵�缁戝畾鐨勪簨浠讹級 + setLocalPaging(data, success = true) { + this.isLocalPaging = true; + this.$nextTick(() => { + this._addData(data, success, true); + }) + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.localPaging = { resolve, reject }; + }); + }, + // 閲嶆柊鍔犺浇鍒嗛〉鏁版嵁锛宲ageNo浼氭仮澶嶄负榛樿鍊硷紝鐩稿綋浜庝笅鎷夊埛鏂扮殑鏁堟灉(animate涓簍rue鏃朵細灞曠ず涓嬫媺鍒锋柊鍔ㄧ敾锛岄粯璁や负false) + reload(animate = this.showRefresherWhenReload) { + if (animate) { + this.privateShowRefresherWhenReload = animate; + this.isUserPullDown = true; + } + if (!this.showLoadingMoreWhenReload) { + this.listRendering = true; + } + this.$nextTick(() => { + this._preReload(animate, false); + }) + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.reload = { resolve, reject }; + }); + }, + // 鍒锋柊鍒楄〃鏁版嵁锛宲ageNo鍜宲ageSize涓嶄細閲嶇疆锛屽垪琛ㄦ暟鎹細閲嶆柊浠庢湇鍔$鑾峰彇銆傚繀椤讳繚璇丂query缁戝畾鐨勬柟娉曚腑鐨刾ageNo鍜宲ageSize鍜屼紶缁欐湇鍔$鐨勪竴鑷� + refresh() { + return this._handleRefreshWithDisPageNo(this.pageNo - this.defaultPageNo + 1); + }, + // 鍒锋柊鍒楄〃鏁版嵁鑷虫寚瀹氶〉锛屼緥濡俻ageNo=5鏃跺垯浠h〃鍒锋柊鍒楄〃鑷崇5椤碉紝姝ゆ椂pageNo浼氬彉涓�5锛屽垪琛ㄤ細灞曠ず鍓�5椤电殑鏁版嵁銆傚繀椤讳繚璇丂query缁戝畾鐨勬柟娉曚腑鐨刾ageNo鍜宲ageSize鍜屼紶缁欐湇鍔$鐨勪竴鑷� + refreshToPage(pageNo) { + this.isHandlingRefreshToPage = true; + return this._handleRefreshWithDisPageNo(pageNo + this.defaultPageNo - 1); + }, + // 鎵嬪姩鏇存柊鍒楄〃缂撳瓨鏁版嵁锛屽皢鑷姩鎴彇v-model缁戝畾鐨刲ist涓殑鍓峱ageSize鏉¤鐩栫紦瀛橈紝璇风‘淇濆湪list鏁版嵁鏇存柊鍒伴鏈熺粨鏋滃悗鍐嶈皟鐢ㄦ鏂规硶 + updateCache() { + if (this.finalUseCache && this.totalData.length) { + this._saveLocalCache(this.totalData.slice(0, Math.min(this.totalData.length, this.pageSize))); + } + }, + // 娓呯┖鍒嗛〉鏁版嵁 + clean() { + this._reload(true); + this._addData([], true, false); + }, + // 娓呯┖鍒嗛〉鏁版嵁 + clear() { + this.clean(); + }, + // reload涔嬪墠鐨勪竴浜涘鐞� + _preReload(animate = this.showRefresherWhenReload, isFromMounted = true, retryCount = 0) { + const showRefresher = this.finalRefresherEnabled && this.useCustomRefresher; + // #ifndef APP-NVUE + // 濡傛灉鑾峰彇slot="refresher"楂樺害澶辫触锛屽垯涓嶈Е鍙憆eload锛岀洿鍒拌幏鍙杝lot="refresher"楂樺害鎴愬姛 + if (this.customRefresherHeight === -1 && showRefresher) { + u.delay(() => { + retryCount ++; + // 濡傛灉閲嶈瘯娆℃暟鏄�10鐨勫�嶆暟(涔熷氨鏄瘡500姣)锛屽皾璇曢噸鏂拌幏鍙栦竴涓媠lot="refresher"楂樺害 + // 姝や妇鏄负浜嗚В鍐冲湪鏌愪簺鐗规畩鎯呭喌涓嬶紝z-paging缁勪欢mounted浜嗭紝浣嗘槸鏈睍绀哄湪鐢ㄦ埛闈㈠墠锛岋紙姣斿鍦╰abbar椤甸潰涓紝鏈垏鎹㈠埌瀵瑰簲tabbar浣嗘槸閫氳繃浠g爜璁﹝-paging灞曠ず浜嗭紝姝ゆ椂鎺у埗鍙颁細鎶rror: Not Found锛歅age锛屽洜涓鸿繖鏃跺�欏幓鑾峰彇dom鑺傜偣淇℃伅鑾峰彇涓嶅埌锛� + // 褰撶敤鎴峰湪鏌愪釜鏃跺埢璁╂z-paging灞曠ず鍦ㄩ潰鍓嶆椂锛屽嵆鍙『鍒╄幏鍙栧埌slot="refresher"楂樺害锛岄�掑綊鍋滄 + if (retryCount % 10 === 0) { + this._updateCustomRefresherHeight(); + } + this._preReload(animate, isFromMounted, retryCount); + }, c.delayTime / 2); + return; + } + // #endif + this.isUserReload = true; + this.loadingType = Enum.LoadingType.Refresher; + if (animate) { + this.privateShowRefresherWhenReload = animate; + // #ifndef APP-NVUE + if (this.useCustomRefresher) { + this._doRefresherRefreshAnimate(); + } else { + this.refresherTriggered = true; + } + // #endif + // #ifdef APP-NVUE + this.refresherStatus = Enum.Refresher.Loading; + this.refresherRevealStackCount ++; + u.delay(() => { + this._getNodeClientRect('zp-n-refresh-container', false).then((node) => { + if (node) { + let nodeHeight = node[0].height; + this.nShowRefresherReveal = true; + this.nShowRefresherRevealHeight = nodeHeight; + u.delay(() => { + this._nDoRefresherEndAnimation(0, -nodeHeight, false, false); + u.delay(() => { + this._nDoRefresherEndAnimation(nodeHeight, 0); + }, 10) + }, 10) + } + this._reload(false, isFromMounted); + this._doRefresherLoad(false); + }); + }, this.pagingLoaded ? 10 : 100) + return; + // #endif + } else { + this._refresherEnd(false, false, false, false); + } + this._reload(false, isFromMounted); + }, + // 閲嶆柊鍔犺浇鍒嗛〉鏁版嵁 + _reload(isClean = false, isFromMounted = false, isUserPullDown = false) { + this.isAddedData = false; + this.insideOfPaging = -1; + this.cacheScrollNodeHeight = -1; + this.pageNo = this.defaultPageNo; + this._cleanRefresherEndTimeout(); + !this.privateShowRefresherWhenReload && !isClean && this._startLoading(true); + this.firstPageLoaded = true; + this.isTotalChangeFromAddData = false; + if (!this.isSettingCacheList) { + this.totalData = []; + } + if (!isClean) { + this._emitQuery(this.pageNo, this.defaultPageSize, isUserPullDown ? Enum.QueryFrom.UserPullDown : Enum.QueryFrom.Reload); + let delay = 0; + // #ifdef MP-TOUTIAO + delay = 5; + // #endif + u.delay(this._callMyParentQuery, delay); + if (!isFromMounted && this.autoScrollToTopWhenReload) { + let checkedNRefresherLoading = true; + // #ifdef APP-NVUE + checkedNRefresherLoading = !this.nRefresherLoading; + // #endif + checkedNRefresherLoading && this._scrollToTop(false); + } + } + // #ifdef APP-NVUE + this.$nextTick(() => { + this.nShowBottom = this.realTotalData.length > 0; + }) + // #endif + }, + // 澶勭悊鏈嶅姟绔繑鍥炵殑鏁扮粍 + _addData(data, success, isLocal) { + this.isAddedData = true; + this.fromEmptyViewReload = false; + this.isTotalChangeFromAddData = true; + this.refresherTriggered = false; + this._endSystemLoadingAndRefresh(); + const tempIsUserPullDown = this.isUserPullDown; + if (this.showRefresherUpdateTime && this.isFirstPage) { + u.setRefesrherTime(u.getTime(), this.refresherUpdateTimeKey); + this.$refs.refresh && this.$refs.refresh.updateTime(); + } + if (!isLocal && tempIsUserPullDown && this.isFirstPage) { + this.isUserPullDown = false; + } + this.listRendering = true; + this.$nextTick(() => { + u.delay(() => this.listRendering = false); + }) + let dataTypeRes = this._checkDataType(data, success, isLocal); + data = dataTypeRes.data; + success = dataTypeRes.success; + let delayTime = c.delayTime; + if (this.useChatRecordMode) delayTime = 0; + this.loadingForNow = false; + u.delay(() => { + this.pagingLoaded = true; + this.$nextTick(()=>{ + !isLocal && this._refresherEnd(delayTime > 0, true, tempIsUserPullDown); + }) + }) + if (this.isFirstPage) { + this.isLoadFailed = !success; + this.$emit('isLoadFailedChange', this.isLoadFailed); + if (this.finalUseCache && success && (this.cacheMode === Enum.CacheMode.Always ? true : this.isSettingCacheList)) { + this._saveLocalCache(data); + } + } + this.isSettingCacheList = false; + if (success) { + if (!(this.privateConcat === false && !this.isHandlingRefreshToPage && this.loadingStatus === Enum.More.NoMore)) { + this.loadingStatus = Enum.More.Default; + } + if (isLocal) { + // 濡傛灉褰撳墠鏄湰鍦板垎椤碉紝鍒欏繀鐒舵槸鐢眘etLocalPaging鏂规硶瑙﹀彂锛屾鏃剁洿鎺ユ湰鍦板姞杞界涓�椤垫暟鎹嵆鍙�傚悗缁湰鍦板垎椤靛姞杞芥洿澶氭柟娉曠敱婊氬姩鍒板簳閮ㄥ姞杞芥洿澶氫簨浠跺鐞� + this.totalLocalPagingList = data; + const localPageNo = this.defaultPageNo; + const localPageSize = this.queryFrom !== Enum.QueryFrom.Refresh ? this.defaultPageSize : this.currentRefreshPageSize; + this._localPagingQueryList(localPageNo, localPageSize, 0, res => { + u.delay(() => { + this.completeByTotal(res, this.totalLocalPagingList.length);; + }, 0) + }) + } else { + // 濡傛灉褰撳墠涓嶆槸鏈湴鍒嗛〉锛屽垯鎸夌収姝e父鍒嗛〉閫昏緫杩涜鏁版嵁澶勭悊&emit鏁版嵁 + let dataChangeDelayTime = 0; + // #ifdef APP-NVUE + if (this.privateShowRefresherWhenReload && this.finalNvueListIs === 'waterfall') { + dataChangeDelayTime = 150; + } + // #endif + u.delay(() => { + this._currentDataChange(data, this.currentData); + this._callDataPromise(true, this.totalData); + }, dataChangeDelayTime) + } + if (this.isHandlingRefreshToPage) { + this.isHandlingRefreshToPage = false; + this.pageNo = this.defaultPageNo + Math.ceil(data.length / this.pageSize) - 1; + if (data.length % this.pageSize !== 0) { + this.customNoMore = 1; + } + } + } else { + this._currentDataChange(data, this.currentData); + this._callDataPromise(false); + this.loadingStatus = Enum.More.Fail; + this.isHandlingRefreshToPage = false; + if (this.loadingType === Enum.LoadingType.LoadMore) { + this.pageNo --; + } + } + }, + // 鎵�鏈夋暟鎹敼鍙樻椂璋冪敤 + _totalDataChange(newVal, oldVal, eventThrow=true) { + if ((!this.isUserReload || !this.autoCleanListWhenReload) && this.firstPageLoaded && !newVal.length && oldVal.length) { + return; + } + this._doCheckScrollViewShouldFullHeight(newVal); + if(!this.realTotalData.length && !newVal.length){ + eventThrow = false; + } + this.realTotalData = newVal; + // emit鍒楄〃鏇存柊浜嬩欢 + if (eventThrow) { + this.$emit('input', newVal); + // #ifdef VUE3 + this.$emit('update:modelValue', newVal); + // #endif + this.$emit('update:list', newVal); + this.$emit('listChange', newVal); + this._callMyParentList(newVal); + } + this.firstPageLoaded = false; + this.isTotalChangeFromAddData = false; + this.$nextTick(() => { + u.delay(()=>{ + // emit z-paging鍐呭鍖哄煙楂樺害鏀瑰彉浜嬩欢 + this._getNodeClientRect('.zp-paging-container-content').then(res => { + res && this.$emit('contentHeightChanged', res[0].height); + }); + }, c.delayTime * (this.isIos ? 1 : 3)) + // #ifdef APP-NVUE + // 鍦╪vue涓欢鏃�600姣灞曠ず搴曢儴鍔犺浇鏇村锛岄伩鍏嶅簳閮ㄥ姞杞芥洿澶氬お鏃╁姞杞介棯涓�涓嬬殑闂 + u.delay(() => { + this.nShowBottom = true; + }, c.delayTime * 6, 'nShowBottomDelay'); + // #endif + }) + }, + // 褰撳墠鏁版嵁鏀瑰彉鏃惰皟鐢� + _currentDataChange(newVal, oldVal) { + newVal = [...newVal]; + // #ifndef APP-NVUE + this.finalUseVirtualList && this._setCellIndex(newVal, 'bottom'); + // #endif + if (this.isFirstPage && this.finalConcat) { + this.totalData = []; + } + // customNoMore锛�-1浠h〃浜ょ敱z-paging鑷鍒ゆ柇锛�1浠h〃娌℃湁鏇村浜嗭紱0浠h〃杩樻湁鏇村鏁版嵁 + if (this.customNoMore !== -1) { + // 濡傛灉customNoMore绛変簬1 鎴栬�� customNoMore涓嶆槸0骞朵笖鏂板鏁扮粍闀垮害涓�0(涔熷氨鏄笉鏄槑纭殑杩樻湁鏇村鏁版嵁骞朵笖鏂板鐨勬暟缁勯暱搴︿负0)锛屽垯娌℃湁鏇村鏁版嵁浜� + if (this.customNoMore === 1 || (this.customNoMore !== 0 && !newVal.length)) { + this.loadingStatus = Enum.More.NoMore; + } + } else { + // 濡傛灉鏂板鐨勬暟鎹暟缁勯暱搴︿负0 鎴栬�� 鏂板鐨勬暟缁勯暱搴﹀皬浜庨粯璁ょ殑pageSize锛屽垯娌℃湁鏇村鏁版嵁浜� + if (!newVal.length || (newVal.length && newVal.length < this.defaultPageSize)) { + this.loadingStatus = Enum.More.NoMore; + } + } + if (!this.totalData.length) { + // #ifdef APP-NVUE + // 濡傛灉鍦ㄨ亰澶╄褰曟ā寮�+nvue涓紝骞朵笖鏁版嵁涓嶆弧涓�椤垫椂闇�瑕佸皢鍒楄〃鍊掑簭锛屽洜涓烘鏃舵病鏈夊皢鍒楄〃鏃嬭浆180搴︼紝鏁扮粍涓0鏉℃暟鎹簲褰撳湪鏈�搴曚笅鏄剧ず + if (this.useChatRecordMode && this.finalConcat && this.isFirstPage && this.loadingStatus === Enum.More.NoMore) { + newVal.reverse(); + } + // #endif + this.totalData = newVal; + } else { + if (this.finalConcat) { + const currentScrollTop = this.oldScrollTop; + this.totalData = [...this.totalData, ...newVal]; + // 姝ゅ鏄负浜嗚В鍐冲湪寰俊灏忕▼搴忎腑锛屽湪鏌愪簺鎯呭喌涓嬫粴鍔ㄥ埌搴曢儴鍔犺浇鏇村鍚庢粴鍔ㄤ綅缃洿鎺ュ彉涓烘渶搴曢儴鐨勯棶棰橈紝鍥犳闇�瑕侀�氳繃浠g爜寮哄埗婊氬姩鍥炲姞杞芥洿澶氬墠鐨勪綅缃� + // #ifdef MP-WEIXIN + if (!this.isIos && !this.refresherOnly && !this.usePageScroll && newVal.length) { + this.loadingMoreTimeStamp = u.getTime(); + this.$nextTick(() => { + this.scrollToY(currentScrollTop); + }) + } + // #endif + } else { + this.totalData = newVal; + } + } + this.privateConcat = true; + }, + // 鏍规嵁pageNo澶勭悊refresh鎿嶄綔 + _handleRefreshWithDisPageNo(pageNo) { + if (!this.isHandlingRefreshToPage && !this.realTotalData.length) return this.reload(); + if (pageNo >= 1) { + this.loading = true; + this.privateConcat = false; + const totalPageSize = pageNo * this.pageSize; + this.currentRefreshPageSize = totalPageSize; + // 濡傛灉璋冪敤refresh鏃舵槸鏈湴鍒嗛〉锛屽垯鍦ㄧ粍浠跺唴閮ㄨ嚜宸卞鐞嗗垎椤甸�昏緫锛屼笉emit query鐩稿叧浜嬩欢 + if (this.isLocalPaging && this.isHandlingRefreshToPage) { + this._localPagingQueryList(this.defaultPageNo, totalPageSize, 0, res => { + this.complete(res); + }) + } else { + // emit query鐩稿叧浜嬩欢 + this._emitQuery(this.defaultPageNo, totalPageSize, Enum.QueryFrom.Refresh); + this._callMyParentQuery(this.defaultPageNo, totalPageSize); + } + } + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.reload = { resolve, reject }; + }); + }, + // 鏈湴鍒嗛〉璇锋眰 + _localPagingQueryList(pageNo, pageSize, localPagingLoadingTime, callback) { + pageNo = Math.max(1, pageNo); + pageSize = Math.max(1, pageSize); + const totalPagingList = [...this.totalLocalPagingList]; + const pageNoIndex = (pageNo - 1) * pageSize; + const finalPageNoIndex = Math.min(totalPagingList.length, pageNoIndex + pageSize); + const resultPagingList = totalPagingList.splice(pageNoIndex, finalPageNoIndex - pageNoIndex); + u.delay(() => callback(resultPagingList), localPagingLoadingTime) + }, + // 瀛樺偍鍒楄〃缂撳瓨鏁版嵁 + _saveLocalCache(data) { + uni.setStorageSync(this.finalCacheKey, data); + }, + // 閫氳繃缂撳瓨鏁版嵁濉厖鍒楄〃鏁版嵁 + _setListByLocalCache() { + this.totalData = uni.getStorageSync(this.finalCacheKey) || []; + this.isSettingCacheList = true; + }, + // 淇敼鐖秜iew鐨刲ist + _callMyParentList(newVal) { + if (this.autowireListName.length) { + const myParent = u.getParent(this.$parent); + if (myParent && myParent[this.autowireListName]) { + myParent[this.autowireListName] = newVal; + } + } + }, + // 璋冪敤鐖秜iew鐨剄uery + _callMyParentQuery(customPageNo = 0, customPageSize = 0) { + if (this.autowireQueryName) { + if (this.myParentQuery === -1) { + const myParent = u.getParent(this.$parent); + if (myParent && myParent[this.autowireQueryName]) { + this.myParentQuery = myParent[this.autowireQueryName]; + } + } + if (this.myParentQuery !== -1) { + customPageSize > 0 ? this.myParentQuery(customPageNo, customPageSize) : this.myParentQuery(this.pageNo, this.defaultPageSize); + } + } + }, + // emit query浜嬩欢 + _emitQuery(pageNo, pageSize, from){ + this.queryFrom = from; + this.requestTimeStamp = u.getTime(); + const [lastItem] = this.realTotalData.slice(-1); + if (this.fetch) { + const fetchParams = interceptor._handleFetchParams({pageNo, pageSize, from, lastItem: lastItem || null}, this.fetchParams); + const fetchResult = this.fetch(fetchParams); + if (!interceptor._handleFetchResult(fetchResult, this, fetchParams)) { + u.isPromise(fetchResult) ? fetchResult.then(res => { + this.complete(res); + }).catch(err => { + this.complete(false); + }) : this.complete(fetchResult) + } + } else { + this.$emit('query', ...interceptor._handleQuery(pageNo, pageSize, from, lastItem || null)); + } + }, + // 瑙﹀彂鏁版嵁鏀瑰彉promise + _callDataPromise(success, totalList) { + for (const key in this.dataPromiseResultMap) { + const obj = this.dataPromiseResultMap[key]; + if (!obj) continue; + success ? obj.resolve({ totalList, noMore: this.loadingStatus === Enum.More.NoMore }) : this.callNetworkReject && obj.reject(`z-paging-${key}-error`); + } + }, + // 妫�鏌omplete data鐨勭被鍨� + _checkDataType(data, success, isLocal) { + const dataType = Object.prototype.toString.call(data); + if (dataType === '[object Boolean]') { + success = data; + data = []; + } else if (dataType !== '[object Array]') { + data = []; + if (dataType !== '[object Undefined]' && dataType !== '[object Null]') { + u.consoleErr(`${isLocal ? 'setLocalPaging' : 'complete'}鍙傛暟绫诲瀷涓嶆纭紝绗竴涓弬鏁扮被鍨嬪繀椤讳负Array!`); + } + } + return { data, success }; + }, + } +} diff --git a/src/components/z-paging/js/modules/empty.js b/src/components/z-paging/js/modules/empty.js new file mode 100644 index 0000000..6c99f56 --- /dev/null +++ b/src/components/z-paging/js/modules/empty.js @@ -0,0 +1,144 @@ +// [z-paging]绌烘暟鎹浘view妯″潡 +import u from '.././z-paging-utils' + +export default { + props: { + // 鏄惁寮哄埗闅愯棌绌烘暟鎹浘锛岄粯璁や负鍚� + hideEmptyView: { + type: Boolean, + default: u.gc('hideEmptyView', false) + }, + // 绌烘暟鎹浘鎻忚堪鏂囧瓧锛岄粯璁や负鈥滄病鏈夋暟鎹摝~鈥� + emptyViewText: { + type: [String, Object], + default: u.gc('emptyViewText', null) + }, + // 鏄惁鏄剧ず绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳(鏃犳暟鎹椂)锛岄粯璁や负鍚� + showEmptyViewReload: { + type: Boolean, + default: u.gc('showEmptyViewReload', false) + }, + // 鍔犺浇澶辫触鏃舵槸鍚︽樉绀虹┖鏁版嵁鍥鹃噸鏂板姞杞芥寜閽紝榛樿涓烘槸 + showEmptyViewReloadWhenError: { + type: Boolean, + default: u.gc('showEmptyViewReloadWhenError', true) + }, + // 绌烘暟鎹浘鐐瑰嚮閲嶆柊鍔犺浇鏂囧瓧锛岄粯璁や负鈥滈噸鏂板姞杞解�� + emptyViewReloadText: { + type: [String, Object], + default: u.gc('emptyViewReloadText', null) + }, + // 绌烘暟鎹浘鍥剧墖锛岄粯璁や娇鐢▃-paging鍐呯疆鐨勫浘鐗� + emptyViewImg: { + type: String, + default: u.gc('emptyViewImg', '') + }, + // 绌烘暟鎹浘鈥滃姞杞藉け璐モ�濇弿杩版枃瀛楋紝榛樿涓衡�滃緢鎶辨瓑锛屽姞杞藉け璐モ�� + emptyViewErrorText: { + type: [String, Object], + default: u.gc('emptyViewErrorText', null) + }, + // 绌烘暟鎹浘鈥滃姞杞藉け璐モ�濆浘鐗囷紝榛樿浣跨敤z-paging鍐呯疆鐨勫浘鐗� + emptyViewErrorImg: { + type: String, + default: u.gc('emptyViewErrorImg', '') + }, + // 绌烘暟鎹浘鏍峰紡 + emptyViewStyle: { + type: Object, + default: u.gc('emptyViewStyle', {}) + }, + // 绌烘暟鎹浘瀹瑰櫒鏍峰紡 + emptyViewSuperStyle: { + type: Object, + default: u.gc('emptyViewSuperStyle', {}) + }, + // 绌烘暟鎹浘img鏍峰紡 + emptyViewImgStyle: { + type: Object, + default: u.gc('emptyViewImgStyle', {}) + }, + // 绌烘暟鎹浘鎻忚堪鏂囧瓧鏍峰紡 + emptyViewTitleStyle: { + type: Object, + default: u.gc('emptyViewTitleStyle', {}) + }, + // 绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳鏍峰紡 + emptyViewReloadStyle: { + type: Object, + default: u.gc('emptyViewReloadStyle', {}) + }, + // 绌烘暟鎹浘鐗囨槸鍚﹂摵婊-paging锛岄粯璁や负鍚︼紝鍗冲~鍏呮弧z-paging鍐呭垪琛�(婊氬姩鍖哄煙)閮ㄥ垎銆傝嫢璁剧疆涓哄惁锛屽垯涓哄~閾烘弧鏁翠釜z-paging + emptyViewFixed: { + type: Boolean, + default: u.gc('emptyViewFixed', false) + }, + // 绌烘暟鎹浘鐗囨槸鍚﹀瀭鐩村眳涓紝榛樿涓烘槸锛岃嫢璁剧疆涓哄惁鍗充负浠庣┖鏁版嵁瀹瑰櫒椤堕儴寮�濮嬫樉绀恒�俥mptyViewFixed涓篺alse鏃舵湁鏁� + emptyViewCenter: { + type: Boolean, + default: u.gc('emptyViewCenter', true) + }, + // 鍔犺浇涓椂鏄惁鑷姩闅愯棌绌烘暟鎹浘锛岄粯璁や负鏄� + autoHideEmptyViewWhenLoading: { + type: Boolean, + default: u.gc('autoHideEmptyViewWhenLoading', true) + }, + // 鐢ㄦ埛涓嬫媺鍒楄〃瑙﹀彂涓嬫媺鍒锋柊鍔犺浇涓椂鏄惁鑷姩闅愯棌绌烘暟鎹浘锛岄粯璁や负鏄� + autoHideEmptyViewWhenPull: { + type: Boolean, + default: u.gc('autoHideEmptyViewWhenPull', true) + }, + // 绌烘暟鎹畍iew鐨剒-index锛岄粯璁や负9 + emptyViewZIndex: { + type: Number, + default: u.gc('emptyViewZIndex', 9) + }, + }, + data() { + return { + customerEmptyViewErrorText: '' + } + }, + computed: { + finalEmptyViewImg() { + return this.isLoadFailed ? this.emptyViewErrorImg : this.emptyViewImg; + }, + finalShowEmptyViewReload() { + return this.isLoadFailed ? this.showEmptyViewReloadWhenError : this.showEmptyViewReload; + }, + // 鏄惁灞曠ず绌烘暟鎹浘 + showEmpty() { + if (this.refresherOnly || this.hideEmptyView || this.realTotalData.length) return false; + if (this.autoHideEmptyViewWhenLoading) { + if (this.isAddedData && !this.firstPageLoaded && !this.loading) return true; + } else { + return true; + } + return !this.autoHideEmptyViewWhenPull && !this.isUserReload; + }, + }, + methods: { + // 鐐瑰嚮浜嗙┖鏁版嵁view閲嶆柊鍔犺浇鎸夐挳 + _emptyViewReload() { + let callbacked = false; + this.$emit('emptyViewReload', reload => { + if (reload === undefined || reload === true) { + this.fromEmptyViewReload = true; + this.reload().catch(() => {}); + } + callbacked = true; + }); + // 濡傛灉鐢ㄦ埛娌℃湁绂佹榛樿鐨勭偣鍑婚噸鏂板姞杞藉埛鏂板垪琛ㄤ簨浠讹紝鍒欒Е鍙戝垪琛ㄩ噸鏂板埛鏂� + this.$nextTick(() => { + if (!callbacked) { + this.fromEmptyViewReload = true; + this.reload().catch(() => {}); + } + }) + }, + // 鐐瑰嚮浜嗙┖鏁版嵁view + _emptyViewClick() { + this.$emit('emptyViewClick'); + }, + } +} \ No newline at end of file diff --git a/src/components/z-paging/js/modules/i18n.js b/src/components/z-paging/js/modules/i18n.js new file mode 100644 index 0000000..2fd92a5 --- /dev/null +++ b/src/components/z-paging/js/modules/i18n.js @@ -0,0 +1,113 @@ +// [z-paging]i18n妯″潡 +import { initVueI18n } from '@dcloudio/uni-i18n' +import messages from '../../i18n/index.js' +const { t } = initVueI18n(messages) + +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import interceptor from '../z-paging-interceptor' + +export default { + computed: { + finalLanguage() { + try { + const local = uni.getLocale(); + const language = this.systemInfo.appLanguage; + return local === 'auto' ? interceptor._handleLanguage2Local(language, this._language2Local(language)) : local; + } catch (e) { + // 濡傛灉鑾峰彇绯荤粺鏈湴璇█寮傚父锛屽垯榛樿杩斿洖涓枃锛寀ni.getLocale鍦ㄩ儴鍒嗕綆鐗堟湰HX鎴栬�卌li涓彲鑳芥姤鎵句笉鍒扮殑闂 + return 'zh-Hans'; + } + }, + // 鏈�缁堢殑涓嬫媺鍒锋柊榛樿鐘舵�佺殑鏂囧瓧 + finalRefresherDefaultText() { + return this._getI18nText('zp.refresher.default', this.refresherDefaultText); + }, + // 鏈�缁堢殑涓嬫媺鍒锋柊涓嬫媺涓殑鏂囧瓧 + finalRefresherPullingText() { + return this._getI18nText('zp.refresher.pulling', this.refresherPullingText); + }, + // 鏈�缁堢殑涓嬫媺鍒锋柊涓枃瀛� + finalRefresherRefreshingText() { + return this._getI18nText('zp.refresher.refreshing', this.refresherRefreshingText); + }, + // 鏈�缁堢殑涓嬫媺鍒锋柊瀹屾垚鏂囧瓧 + finalRefresherCompleteText() { + return this._getI18nText('zp.refresher.complete', this.refresherCompleteText); + }, + // 鏈�缁堢殑涓嬫媺鍒锋柊涓婃鏇存柊鏃堕棿鏂囧瓧 + finalRefresherUpdateTimeTextMap() { + return { + title: t('zp.refresherUpdateTime.title'), + none: t('zp.refresherUpdateTime.none'), + today: t('zp.refresherUpdateTime.today'), + yesterday: t('zp.refresherUpdateTime.yesterday') + }; + }, + // 鏈�缁堢殑缁х画涓嬫媺杩涘叆浜屾ゼ鏂囧瓧 + finalRefresherGoF2Text() { + return this._getI18nText('zp.refresher.f2', this.refresherGoF2Text); + }, + // 鏈�缁堢殑搴曢儴鍔犺浇鏇村榛樿鐘舵�佹枃瀛� + finalLoadingMoreDefaultText() { + return this._getI18nText('zp.loadingMore.default', this.loadingMoreDefaultText); + }, + // 鏈�缁堢殑搴曢儴鍔犺浇鏇村鍔犺浇涓枃瀛� + finalLoadingMoreLoadingText() { + return this._getI18nText('zp.loadingMore.loading', this.loadingMoreLoadingText); + }, + // 鏈�缁堢殑搴曢儴鍔犺浇鏇村娌℃湁鏇村鏁版嵁鏂囧瓧 + finalLoadingMoreNoMoreText() { + return this._getI18nText('zp.loadingMore.noMore', this.loadingMoreNoMoreText); + }, + // 鏈�缁堢殑搴曢儴鍔犺浇鏇村鍔犺浇澶辫触鏂囧瓧 + finalLoadingMoreFailText() { + return this._getI18nText('zp.loadingMore.fail', this.loadingMoreFailText); + }, + // 鏈�缁堢殑绌烘暟鎹浘title + finalEmptyViewText() { + return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText('zp.emptyView.title', this.emptyViewText); + }, + // 鏈�缁堢殑绌烘暟鎹浘reload title + finalEmptyViewReloadText() { + return this._getI18nText('zp.emptyView.reload', this.emptyViewReloadText); + }, + // 鏈�缁堢殑绌烘暟鎹浘鍔犺浇澶辫触鏂囧瓧 + finalEmptyViewErrorText() { + return this.customerEmptyViewErrorText || this._getI18nText('zp.emptyView.error', this.emptyViewErrorText); + }, + // 鏈�缁堢殑绯荤粺loading title + finalSystemLoadingText() { + return this._getI18nText('zp.systemLoading.title', this.systemLoadingText); + }, + }, + methods: { + // 鑾峰彇褰撳墠z-paging鐨勮瑷� + getLanguage() { + return this.finalLanguage; + }, + // 鑾峰彇鍥介檯鍖栬浆鎹㈠悗鐨勬枃鏈� + _getI18nText(key, value) { + const dataType = Object.prototype.toString.call(value); + if (dataType === '[object Object]') { + const nextValue = value[this.finalLanguage]; + if (nextValue) return nextValue; + } else if (dataType === '[object String]') { + return value; + } + return t(key); + }, + // 绯荤粺language杞琲18n local + _language2Local(language) { + const formatedLanguage = language.toLowerCase().replace(new RegExp('_', ''), '-'); + if (formatedLanguage.indexOf('zh') !== -1) { + if (formatedLanguage === 'zh' || formatedLanguage === 'zh-cn' || formatedLanguage.indexOf('zh-hans') !== -1) { + return 'zh-Hans'; + } + return 'zh-Hant'; + } + if (formatedLanguage.indexOf('en') !== -1) return 'en'; + return language; + } + } +} diff --git a/src/components/z-paging/js/modules/load-more.js b/src/components/z-paging/js/modules/load-more.js new file mode 100644 index 0000000..3c5ead8 --- /dev/null +++ b/src/components/z-paging/js/modules/load-more.js @@ -0,0 +1,374 @@ +// [z-paging]婊氬姩鍒板簳閮ㄥ姞杞芥洿澶氭ā鍧� +import u from '.././z-paging-utils' +import Enum from '.././z-paging-enum' + +export default { + props: { + // 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氭牱寮� + loadingMoreCustomStyle: { + type: Object, + default: u.gc('loadingMoreCustomStyle', {}) + }, + // 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氭枃瀛楁牱寮� + loadingMoreTitleCustomStyle: { + type: Object, + default: u.gc('loadingMoreTitleCustomStyle', {}) + }, + // 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氬姞杞戒腑鍔ㄧ敾鏍峰紡 + loadingMoreLoadingIconCustomStyle: { + type: Object, + default: u.gc('loadingMoreLoadingIconCustomStyle', {}) + }, + // 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氬姞杞戒腑鍔ㄧ敾鍥炬爣绫诲瀷锛屽彲閫塮lower鎴朿ircle锛岄粯璁や负flower + loadingMoreLoadingIconType: { + type: String, + default: u.gc('loadingMoreLoadingIconType', 'flower') + }, + // 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氬姞杞戒腑鍔ㄧ敾鍥炬爣鍥剧墖 + loadingMoreLoadingIconCustomImage: { + type: String, + default: u.gc('loadingMoreLoadingIconCustomImage', '') + }, + // 搴曢儴鍔犺浇鏇村鍔犺浇涓璿iew鏄惁灞曠ず鏃嬭浆鍔ㄧ敾锛岄粯璁や负鏄� + loadingMoreLoadingAnimated: { + type: Boolean, + default: u.gc('loadingMoreLoadingAnimated', true) + }, + // 鏄惁鍚敤鍔犺浇鏇村鏁版嵁(鍚粦鍔ㄥ埌搴曢儴鍔犺浇鏇村鏁版嵁鍜岀偣鍑诲姞杞芥洿澶氭暟鎹�)锛岄粯璁や负鏄� + loadingMoreEnabled: { + type: Boolean, + default: u.gc('loadingMoreEnabled', true) + }, + // 鏄惁鍚敤婊戝姩鍒板簳閮ㄥ姞杞芥洿澶氭暟鎹紝榛樿涓烘槸 + toBottomLoadingMoreEnabled: { + type: Boolean, + default: u.gc('toBottomLoadingMoreEnabled', true) + }, + // 婊戝姩鍒板簳閮ㄧ姸鎬佷负榛樿鐘舵�佹椂锛屼互鍔犺浇涓殑鐘舵�佸睍绀猴紝榛樿涓哄惁銆傝嫢璁剧疆涓烘槸锛屽彲閬垮厤婊氬姩鍒板簳閮ㄧ湅鍒伴粯璁ょ姸鎬佺劧鍚庣珛鍒诲彉涓哄姞杞戒腑鐘舵�佺殑闂锛屼絾鍒嗛〉鏁伴噺鏈秴杩囦竴灞忔椂锛屼笉浼氭樉绀恒�愮偣鍑诲姞杞芥洿澶氥�� + loadingMoreDefaultAsLoading: { + type: Boolean, + default: u.gc('loadingMoreDefaultAsLoading', false) + }, + // 婊戝姩鍒板簳閮�"榛樿"鏂囧瓧锛岄粯璁や负銆愮偣鍑诲姞杞芥洿澶氥�� + loadingMoreDefaultText: { + type: [String, Object], + default: u.gc('loadingMoreDefaultText', null) + }, + // 婊戝姩鍒板簳閮�"鍔犺浇涓�"鏂囧瓧锛岄粯璁や负銆愭鍦ㄥ姞杞�...銆� + loadingMoreLoadingText: { + type: [String, Object], + default: u.gc('loadingMoreLoadingText', null) + }, + // 婊戝姩鍒板簳閮�"娌℃湁鏇村"鏂囧瓧锛岄粯璁や负銆愭病鏈夋洿澶氫簡銆� + loadingMoreNoMoreText: { + type: [String, Object], + default: u.gc('loadingMoreNoMoreText', null) + }, + // 婊戝姩鍒板簳閮�"鍔犺浇澶辫触"鏂囧瓧锛岄粯璁や负銆愬姞杞藉け璐ワ紝鐐瑰嚮閲嶆柊鍔犺浇銆� + loadingMoreFailText: { + type: [String, Object], + default: u.gc('loadingMoreFailText', null) + }, + // 褰撴病鏈夋洿澶氭暟鎹笖鍒嗛〉鍐呭鏈秴鍑簔-paging鏃舵槸鍚﹂殣钘忔病鏈夋洿澶氭暟鎹殑view锛岄粯璁や负鍚� + hideNoMoreInside: { + type: Boolean, + default: u.gc('hideNoMoreInside', false) + }, + // 褰撴病鏈夋洿澶氭暟鎹笖鍒嗛〉鏁扮粍闀垮害灏戜簬杩欎釜鍊兼椂锛岄殣钘忔病鏈夋洿澶氭暟鎹殑view锛岄粯璁や负0锛屼唬琛ㄤ笉闄愬埗銆� + hideNoMoreByLimit: { + type: Number, + default: u.gc('hideNoMoreByLimit', 0) + }, + // 鏄惁鏄剧ず榛樿鐨勫姞杞芥洿澶歵ext锛岄粯璁や负鏄� + showDefaultLoadingMoreText: { + type: Boolean, + default: u.gc('showDefaultLoadingMoreText', true) + }, + // 鏄惁鏄剧ず娌℃湁鏇村鏁版嵁鐨剉iew + showLoadingMoreNoMoreView: { + type: Boolean, + default: u.gc('showLoadingMoreNoMoreView', true) + }, + // 鏄惁鏄剧ず娌℃湁鏇村鏁版嵁鐨勫垎鍓茬嚎锛岄粯璁や负鏄� + showLoadingMoreNoMoreLine: { + type: Boolean, + default: u.gc('showLoadingMoreNoMoreLine', true) + }, + // 鑷畾涔夊簳閮ㄦ病鏈夋洿澶氭暟鎹殑鍒嗗壊绾挎牱寮� + loadingMoreNoMoreLineCustomStyle: { + type: Object, + default: u.gc('loadingMoreNoMoreLineCustomStyle', {}) + }, + // 褰撳垎椤垫湭婊′竴灞忔椂锛屾槸鍚﹁嚜鍔ㄥ姞杞芥洿澶氾紝榛樿涓哄惁(nvue鏃犳晥) + insideMore: { + type: Boolean, + default: u.gc('insideMore', false) + }, + // 璺濆簳閮�/鍙宠竟澶氳繙鏃讹紙鍗曚綅px锛夛紝瑙﹀彂 scrolltolower 浜嬩欢锛岄粯璁や负100rpx + lowerThreshold: { + type: [Number, String], + default: u.gc('lowerThreshold', '100rpx') + }, + }, + data() { + return { + M: Enum.More, + // 搴曢儴鍔犺浇鏇村鐘舵�� + loadingStatus: Enum.More.Default, + // 鍦ㄦ覆鏌撲箣鍚庣殑搴曢儴鍔犺浇鏇村鐘舵�� + loadingStatusAfterRender: Enum.More.Default, + // 搴曢儴鍔犺浇鏇村鏃堕棿鎴� + loadingMoreTimeStamp: 0, + // 搴曢儴鍔犺浇鏇村slot + loadingMoreDefaultSlot: null, + // 鏄惁灞曠ず搴曢儴鍔犺浇鏇村 + showLoadingMore: false, + // 鏄惁鏄紑鍙戣�呰嚜瀹氫箟鐨勫姞杞芥洿澶氾紝-1浠h〃浜ょ敱z-paging鑷鍒ゆ柇锛�1浠h〃娌℃湁鏇村浜嗭紱0浠h〃杩樻湁鏇村鏁版嵁 + customNoMore: -1, + } + }, + computed: { + // 搴曢儴鍔犺浇鏇村閰嶇疆 + zLoadMoreConfig() { + return { + status: this.loadingStatusAfterRender, + defaultAsLoading: this.loadingMoreDefaultAsLoading || (this.useChatRecordMode && this.chatLoadingMoreDefaultAsLoading), + defaultThemeStyle: this.finalLoadingMoreThemeStyle, + customStyle: this.loadingMoreCustomStyle, + titleCustomStyle: this.loadingMoreTitleCustomStyle, + iconCustomStyle: this.loadingMoreLoadingIconCustomStyle, + loadingIconType: this.loadingMoreLoadingIconType, + loadingIconCustomImage: this.loadingMoreLoadingIconCustomImage, + loadingAnimated: this.loadingMoreLoadingAnimated, + showNoMoreLine: this.showLoadingMoreNoMoreLine, + noMoreLineCustomStyle: this.loadingMoreNoMoreLineCustomStyle, + defaultText: this.finalLoadingMoreDefaultText, + loadingText: this.finalLoadingMoreLoadingText, + noMoreText: this.finalLoadingMoreNoMoreText, + failText: this.finalLoadingMoreFailText, + hideContent: !this.loadingMoreDefaultAsLoading && this.listRendering, + unit: this.unit, + isChat: this.useChatRecordMode, + chatDefaultAsLoading: this.chatLoadingMoreDefaultAsLoading + }; + }, + // 鏈�缁堢殑搴曢儴鍔犺浇鏇村涓婚 + finalLoadingMoreThemeStyle() { + return this.loadingMoreThemeStyle.length ? this.loadingMoreThemeStyle : this.defaultThemeStyle; + }, + // 鏈�缁堢殑搴曢儴鍔犺浇鏇村瑙﹀彂闃堝�� + finalLowerThreshold() { + return u.convertToPx(this.lowerThreshold); + }, + // 鏄惁鏄剧ず榛樿鐘舵�佷笅鐨勫簳閮ㄥ姞杞芥洿澶� + showLoadingMoreDefault() { + return this._showLoadingMore('Default'); + }, + // 鏄惁鏄剧ず鍔犺浇涓姸鎬佷笅鐨勫簳閮ㄥ姞杞芥洿澶� + showLoadingMoreLoading() { + return this._showLoadingMore('Loading'); + }, + // 鏄惁鏄剧ず娌℃湁鏇村浜嗙姸鎬佷笅鐨勫簳閮ㄥ姞杞芥洿澶� + showLoadingMoreNoMore() { + return this._showLoadingMore('NoMore'); + }, + // 鏄惁鏄剧ず鍔犺浇澶辫触鐘舵�佷笅鐨勫簳閮ㄥ姞杞芥洿澶� + showLoadingMoreFail() { + return this._showLoadingMore('Fail'); + }, + // 鏄惁鏄剧ず鑷畾涔夌姸鎬佷笅鐨勫簳閮ㄥ姞杞芥洿澶� + showLoadingMoreCustom() { + return this._showLoadingMore('Custom'); + }, + // 搴曢儴鍔犺浇鏇村鍥哄畾楂樺害 + loadingMoreFixedHeight() { + return u.addUnit('80rpx', this.unit); + }, + }, + methods: { + // 椤甸潰婊氬姩鍒板簳閮ㄦ椂閫氱煡z-paging杩涜杩涗竴姝ュ鐞� + pageReachBottom() { + !this.useChatRecordMode && this.toBottomLoadingMoreEnabled && this._onLoadingMore('toBottom'); + }, + // 鎵嬪姩瑙﹀彂涓婃媺鍔犺浇鏇村(闈炲繀椤伙紝鍙緷鎹叿浣撻渶姹備娇鐢�) + doLoadMore(type) { + this._onLoadingMore(type); + }, + // 閫氳繃@scroll浜嬩欢妫�娴嬫槸鍚︽粴鍔ㄥ埌浜嗗簳閮�(椤哄甫妫�娴嬩笅鏄惁婊氬姩鍒颁簡椤堕儴) + _checkScrolledToBottom(scrollDiff, checked = false) { + // 濡傛灉褰撳墠scroll-view楂樺害鏈幏鍙栵紝鍒欒幏鍙栧叾楂樺害 + if (this.cacheScrollNodeHeight === -1) { + // 鑾峰彇褰撳墠scroll-view楂樺害 + this._getNodeClientRect('.zp-scroll-view').then((res) => { + if (res) { + const scrollNodeHeight = res[0].height; + // 缂撳瓨褰撳墠scroll-view楂樺害锛屽鏋滆幏鍙栬繃浜嗕笉鍐嶈幏鍙� + this.cacheScrollNodeHeight = scrollNodeHeight; + // // scrollDiff - this.cacheScrollNodeHeight = 褰撳墠婊氬姩鍖哄煙鐨勯《閮ㄤ笌鍐呭搴曢儴鐨勮窛绂� - scroll-view楂樺害 = 褰撳墠婊氬姩鍖哄煙鐨勫簳閮ㄤ笌鍐呭搴曢儴鐨勮窛绂�(涔熷氨鏄渶缁堢殑涓庡簳閮ㄧ殑璺濈) + if (scrollDiff - scrollNodeHeight <= this.finalLowerThreshold) { + // 濡傛灉涓庡簳閮ㄧ殑璺濈灏忎簬闃堝�硷紝鍒欏垽鏂负婊氬姩鍒颁簡搴曢儴锛岃Е鍙戞粴鍔ㄥ埌搴曢儴浜嬩欢 + this._onLoadingMore('toBottom'); + } + } + }); + } else { + // scrollDiff - this.cacheScrollNodeHeight = 褰撳墠婊氬姩鍖哄煙鐨勯《閮ㄤ笌鍐呭搴曢儴鐨勮窛绂� - scroll-view楂樺害 = 褰撳墠婊氬姩鍖哄煙鐨勫簳閮ㄤ笌鍐呭搴曢儴鐨勮窛绂�(涔熷氨鏄渶缁堢殑涓庡簳閮ㄧ殑璺濈) + if (scrollDiff - this.cacheScrollNodeHeight <= this.finalLowerThreshold) { + // 濡傛灉涓庡簳閮ㄧ殑璺濈灏忎簬闃堝�硷紝鍒欏垽鏂负婊氬姩鍒颁簡搴曢儴锛岃Е鍙戞粴鍔ㄥ埌搴曢儴浜嬩欢 + this._onLoadingMore('toBottom'); + } else if (scrollDiff - this.cacheScrollNodeHeight <= 500 && !checked) { + // 濡傛灉涓庡簳閮ㄧ殑璺濈灏忎簬500px锛屽垯鑾峰彇褰撳墠婊氬姩鐨勪綅缃紝寤惰繜150姣閲嶅涓婅堪姝ラ鍐嶆妫�娴�(閬垮厤@scroll瑙﹀彂鏃惰幏鍙栫殑scrollTop涓嶆纭鑷寸殑鍏朵粬闂锛屾鏃惰幏鍙栫殑scrollTop涓嶄竴瀹氬彲淇�)銆傞槻姝㈠洜涓洪儴鍒嗘�ц兘杈冨樊瀹夊崜璁惧@scroll閲囨牱鐜囪繃浣庡鑷寸殑婊氬姩鍒板簳閮ㄤ絾鏄緷鐒舵病鏈夎Е鍙戠殑闂 + u.delay(() => { + this._getNodeClientRect('.zp-scroll-view', true, true).then((res) => { + if (res) { + this.oldScrollTop = res[0].scrollTop; + const newScrollDiff = res[0].scrollHeight - this.oldScrollTop; + this._checkScrolledToBottom(newScrollDiff, true); + } + }) + }, 150, 'checkScrolledToBottomDelay') + } + // 妫�娴嬩竴涓嬫槸鍚﹀凡缁忔粴鍔ㄥ埌浜嗛《閮ㄤ簡锛屽洜涓哄湪瀹夊崜涓粴鍔ㄥ埌椤堕儴鏃秙crollTop涓嶄竴瀹氫负0(鍜屾粴鍔ㄥ埌搴曢儴涓�鏍风殑鍘熷洜)锛屾墍浠ラ渶瑕佸湪scrollTop灏忎簬150px鏃讹紝閫氳繃鑾峰彇.zp-scroll-view鐨剆crollTop鍐嶅垽鏂竴涓� + if (this.oldScrollTop <= 150 && this.oldScrollTop !== 0) { + u.delay(() => { + // 杩欓噷鍐嶅垽鏂竴涓嬫槸鍚︾‘瀹炲凡缁忔粴鍔ㄥ埌椤堕儴浜嗭紝濡傛灉宸茬粡婊氬姩鍒伴《閮ㄤ簡锛屽垯涓嶇敤鍐嶅垽鏂簡锛屽啀娆″垽鏂殑鍘熷洜鏄彲鑳�150姣涔嬪悗oldScrollTop鎵嶆槸0 + if (this.oldScrollTop !== 0) { + this._getNodeClientRect('.zp-scroll-view', true, true).then((res) => { + // 濡傛灉150姣鍚�.zp-scroll-view鐨剆crollTop涓�0锛屽垯璁や负宸茬粡婊氬姩鍒颁簡椤堕儴浜� + if (res && res[0].scrollTop === 0 && this.oldScrollTop !== 0) { + this._onScrollToUpper(); + } + }) + } + }, 150, 'checkScrolledToTopDelay') + } + } + }, + // 瑙﹀彂鍔犺浇鏇村鏃惰皟鐢�,from:toBottom-婊戝姩鍒板簳閮ㄨЕ鍙戯紱click-鐐瑰嚮鍔犺浇鏇村瑙﹀彂 + _onLoadingMore(from = 'click') { + // 濡傛灉鏄痠os骞朵笖鏄粴鍔ㄥ埌搴曢儴鐨勶紝鍒欏湪婊氬姩鍒板簳閮ㄦ椂鍊欏皾璇曞皢鍒楄〃璁剧疆涓虹姝㈡粴鍔ㄧ劧鍚庤缃负鍏佽婊氬姩锛屼互绂佹搴曢儴bounce鐨勬晥鏋� + if (this.isIos && from === 'toBottom' && !this.scrollToBottomBounceEnabled && this.scrollEnable) { + this.scrollEnable = false; + this.$nextTick(() => { + this.scrollEnable = true; + }) + } + // emit scrolltolower + this._emitScrollEvent('scrolltolower'); + // 濡傛灉鏄彧浣跨敤涓嬫媺鍒锋柊 鎴栬�� 绂佺敤搴曢儴鍔犺浇鏇村 鎴栬�� 搴曢儴鍔犺浇鏇村涓嶆槸榛樿鐘舵�佹垨鍔犺浇澶辫触鐘舵�� 鎴栬�� 鏄姞杞戒腑鐘舵�� 鎴栬�� 绌烘暟鎹浘宸茬粡灞曠ず浜嗭紝鍒檙eturn锛屼笉瑙﹀彂鍐呴儴鍔犺浇鏇村閫昏緫 + if (this.refresherOnly || !this.loadingMoreEnabled || !(this.loadingStatus === Enum.More.Default || this.loadingStatus === Enum.More.Fail) || this.loading || this.showEmpty) return; + // #ifdef MP-WEIXIN + if (!this.isIos && !this.refresherOnly && !this.usePageScroll) { + const currentTimestamp = u.getTime(); + // 鍦ㄩ潪ios骞冲彴+scroll-view涓妭娴佸鐞� + if (this.loadingMoreTimeStamp > 0 && currentTimestamp - this.loadingMoreTimeStamp < 100) { + this.loadingMoreTimeStamp = 0; + return; + } + } + // #endif + // 澶勭悊鍔犺浇鏇村鏁版嵁 + this._doLoadingMore(); + }, + // 澶勭悊寮�濮嬪姞杞芥洿澶� + _doLoadingMore() { + if (this.pageNo >= this.defaultPageNo && this.loadingStatus !== Enum.More.NoMore) { + this.pageNo ++; + this._startLoading(false); + if (this.isLocalPaging) { + // 濡傛灉鏄湰鍦板垎椤碉紝鍒欏湪缁勪欢鍐呴儴瀵规暟鎹繘琛屽垎椤靛鐞嗭紝涓嶈Е鍙慇query浜嬩欢 + this._localPagingQueryList(this.pageNo, this.defaultPageSize, this.localPagingLoadingTime, res => { + this.completeByTotal(res, this.totalLocalPagingList.length); + this.queryFrom = Enum.QueryFrom.LoadMore; + }) + } else { + // emit @query鐩稿叧鍔犺浇鏇村浜嬩欢 + this._emitQuery(this.pageNo, this.defaultPageSize, Enum.QueryFrom.LoadMore); + this._callMyParentQuery(); + } + // 璁剧疆褰撳墠鍔犺浇鐘舵�佷负搴曢儴鍔犺浇鏇村鐘舵�� + this.loadingType = Enum.LoadingType.LoadMore; + } + }, + // (棰勫鐞�)鍒ゆ柇褰撴病鏈夋洿澶氭暟鎹笖鍒嗛〉鍐呭鏈秴鍑簔-paging鏃舵槸鍚︽樉绀烘病鏈夋洿澶氭暟鎹殑view + _preCheckShowNoMoreInside(newVal, scrollViewNode, pagingContainerNode) { + if (this.loadingStatus === Enum.More.NoMore && this.hideNoMoreByLimit > 0 && newVal.length) { + this.showLoadingMore = newVal.length > this.hideNoMoreByLimit; + } else if ((this.loadingStatus === Enum.More.NoMore && this.hideNoMoreInside && newVal.length) || (this.insideMore && this.insideOfPaging !== false && newVal.length)) { + this.$nextTick(() => { + this._checkShowNoMoreInside(newVal, scrollViewNode, pagingContainerNode); + }) + if (this.insideMore && this.insideOfPaging !== false && newVal.length) { + this.showLoadingMore = newVal.length; + } + } else { + this.showLoadingMore = newVal.length; + } + }, + // 鍒ゆ柇褰撴病鏈夋洿澶氭暟鎹笖鍒嗛〉鍐呭鏈秴鍑簔-paging鏃舵槸鍚︽樉绀烘病鏈夋洿澶氭暟鎹殑view + async _checkShowNoMoreInside(totalData, oldScrollViewNode, oldPagingContainerNode) { + try { + const scrollViewNode = oldScrollViewNode || await this._getNodeClientRect('.zp-scroll-view'); + // 鍦ㄩ〉闈㈡粴鍔ㄦā寮忎笅 + if (this.usePageScroll) { + if (scrollViewNode) { + // 鑾峰彇婊氬姩鍐呭鎬婚珮搴� + const scrollViewTotalH = scrollViewNode[0].top + scrollViewNode[0].height; + // 濡傛灉婊氬姩鍐呭鎬婚珮搴﹀皬浜庣獥鍙i珮搴︼紝鍒欒涓哄唴瀹规湭瓒呭嚭z-paging + this.insideOfPaging = scrollViewTotalH < this.windowHeight; + // 濡傛灉闇�瑕佹病鏈夋洿澶氭暟鎹椂锛岄殣钘忓簳閮ㄥ姞杞芥洿澶歷iew锛屽苟涓斿唴瀹规湭瓒呰繃z-paging锛屽垯闅愯棌搴曢儴鍔犺浇鏇村 + if (this.hideNoMoreInside) { + this.showLoadingMore = !this.insideOfPaging; + } + // 濡傛灉闇�瑕佸唴瀹规湭瓒呰繃z-paging鏃惰嚜鍔ㄥ姞杞芥洿澶氾紝鍒欒Е鍙戝姞杞芥洿澶� + this._updateInsideOfPaging(); + } + } else { + // 鍦╯croll-view婊氬姩妯″紡涓� + const pagingContainerNode = oldPagingContainerNode || await this._getNodeClientRect('.zp-paging-container-content'); + // 鑾峰彇婊氬姩鍐呭鎬婚珮搴� + const pagingContainerH = pagingContainerNode ? pagingContainerNode[0].height : 0; + // 鑾峰彇z-paging鍐呯疆scroll-view楂樺害 + const scrollViewH = scrollViewNode ? scrollViewNode[0].height : 0; + // 濡傛灉婊氬姩鍐呭鎬婚珮搴﹀皬浜巣-paging鍐呯疆scroll-view楂樺害锛屽垯璁や负鍐呭鏈秴鍑簔-paging + this.insideOfPaging = pagingContainerH < scrollViewH; + if (this.hideNoMoreInside) { + this.showLoadingMore = !this.insideOfPaging; + } + // 濡傛灉闇�瑕佸唴瀹规湭瓒呰繃z-paging鏃惰嚜鍔ㄥ姞杞芥洿澶氾紝鍒欒Е鍙戝姞杞芥洿澶� + this._updateInsideOfPaging(); + } + } catch (e) { + // 濡傛灉鍙戠敓浜嗗紓甯革紝鍒ゆ柇totalData鏁扮粍闀垮害涓�0锛屽垯璁や负鍐呭鏈秴鍑簔-paging + this.insideOfPaging = !totalData.length; + if (this.hideNoMoreInside) { + this.showLoadingMore = !this.insideOfPaging; + } + // 濡傛灉闇�瑕佸唴瀹规湭瓒呰繃z-paging鏃惰嚜鍔ㄥ姞杞芥洿澶氾紝鍒欒Е鍙戝姞杞芥洿澶� + this._updateInsideOfPaging(); + } + }, + // 鏄惁瑕佸睍绀轰笂鎷夊姞杞芥洿澶歷iew + _showLoadingMore(type) { + if (!this.showLoadingMoreWhenReload && (!(this.loadingStatus === Enum.More.Default ? this.nShowBottom : true) || !this.realTotalData.length)) return false; + if (((!this.showLoadingMoreWhenReload || this.isUserPullDown || this.loadingStatus !== Enum.More.Loading) && !this.showLoadingMore) || + (!this.loadingMoreEnabled && (!this.showLoadingMoreWhenReload || this.isUserPullDown || this.loadingStatus !== Enum.More.Loading)) || this.refresherOnly) { + return false; + } + if (this.useChatRecordMode && type !== 'Loading') return false; + if (!this.zSlots) return false; + if (type === 'Custom') { + return this.showDefaultLoadingMoreText && !(this.loadingStatus === Enum.More.NoMore && !this.showLoadingMoreNoMoreView); + } + const res = this.loadingStatus === Enum.More[type] && this.zSlots[`loadingMore${type}`] && (type === 'NoMore' ? this.showLoadingMoreNoMoreView : true); + if (res) { + // #ifdef APP-NVUE + if (!this.isIos) { + this.nLoadingMoreFixedHeight = false; + } + // #endif + } + return res; + }, + } +} diff --git a/src/components/z-paging/js/modules/loading.js b/src/components/z-paging/js/modules/loading.js new file mode 100644 index 0000000..19596ce --- /dev/null +++ b/src/components/z-paging/js/modules/loading.js @@ -0,0 +1,95 @@ +// [z-paging]loading鐩稿叧妯″潡 +import u from '.././z-paging-utils' +import Enum from '.././z-paging-enum' + +export default { + props: { + // 绗竴娆″姞杞藉悗鑷姩闅愯棌loading slot锛岄粯璁や负鏄� + autoHideLoadingAfterFirstLoaded: { + type: Boolean, + default: u.gc('autoHideLoadingAfterFirstLoaded', true) + }, + // loading slot鏄惁閾烘弧灞忓箷骞跺浐瀹氾紝榛樿涓哄惁 + loadingFullFixed: { + type: Boolean, + default: u.gc('loadingFullFixed', false) + }, + // 鏄惁鑷姩鏄剧ず绯荤粺Loading锛氬嵆uni.showLoading锛岃嫢寮�鍚垯灏嗗湪鍒锋柊鍒楄〃鏃�(璋冪敤reload銆乺efresh鏃�)鏄剧ず锛屼笅鎷夊埛鏂板拰婊氬姩鍒板簳閮ㄥ姞杞芥洿澶氫笉浼氭樉绀猴紝榛樿涓篺alse銆� + autoShowSystemLoading: { + type: Boolean, + default: u.gc('autoShowSystemLoading', false) + }, + // 鏄剧ず绯荤粺Loading鏃舵槸鍚︽樉绀洪�忔槑钂欏眰锛岄槻姝㈣Е鎽哥┛閫忥紝榛樿涓烘槸(H5銆丄pp銆佸井淇″皬绋嬪簭銆佺櫨搴﹀皬绋嬪簭鏈夋晥) + systemLoadingMask: { + type: Boolean, + default: u.gc('systemLoadingMask', true) + }, + // 鏄剧ず绯荤粺Loading鏃舵樉绀虹殑鏂囧瓧锛岄粯璁や负"鍔犺浇涓�" + systemLoadingText: { + type: [String, Object], + default: u.gc('systemLoadingText', null) + }, + }, + data() { + return { + loading: false, + loadingForNow: false, + } + }, + watch: { + // loading鐘舵�� + loadingStatus(newVal) { + this.$emit('loadingStatusChange', newVal); + this.$nextTick(() => { + this.loadingStatusAfterRender = newVal; + }) + if (this.useChatRecordMode) { + if (this.isFirstPage && (newVal === Enum.More.NoMore || newVal === Enum.More.Fail)) { + this.isFirstPageAndNoMore = true; + return; + } + } + this.isFirstPageAndNoMore = false; + }, + loading(newVal){ + if (newVal) { + this.loadingForNow = newVal; + } + }, + }, + computed: { + // 鏄惁鏄剧ずloading + showLoading() { + if (this.firstPageLoaded || !this.loading || !this.loadingForNow) return false; + if (this.finalShowSystemLoading) { + // 鏄剧ず绯荤粺loading + uni.showLoading({ + title: this.finalSystemLoadingText, + mask: this.systemLoadingMask + }) + } + return this.autoHideLoadingAfterFirstLoaded ? (this.fromEmptyViewReload ? true : !this.pagingLoaded) : this.loadingType === Enum.LoadingType.Refresher; + }, + // 鏈�缁堢殑鏄惁鏄剧ず绯荤粺loading + finalShowSystemLoading() { + return this.autoShowSystemLoading && this.loadingType === Enum.LoadingType.Refresher; + } + }, + methods: { + // 澶勭悊寮�濮嬪姞杞芥洿澶氱姸鎬� + _startLoading(isReload = false) { + if ((this.showLoadingMoreWhenReload && !this.isUserPullDown) || !isReload) { + this.loadingStatus = Enum.More.Loading; + } + this.loading = true; + }, + // 鍋滄绯荤粺loading鍜宺efresh + _endSystemLoadingAndRefresh(){ + this.finalShowSystemLoading && uni.hideLoading(); + !this.useCustomRefresher && uni.stopPullDownRefresh(); + // #ifdef APP-NVUE + this.usePageScroll && uni.stopPullDownRefresh(); + // #endif + } + } +} diff --git a/src/components/z-paging/js/modules/nvue.js b/src/components/z-paging/js/modules/nvue.js new file mode 100644 index 0000000..4331c0a --- /dev/null +++ b/src/components/z-paging/js/modules/nvue.js @@ -0,0 +1,268 @@ +// [z-paging]nvue鐙湁閮ㄥ垎妯″潡 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' + +// #ifdef APP-NVUE +const weexAnimation = weex.requireModule('animation'); +// #endif +export default { + props: { + // #ifdef APP-NVUE + // nvue涓慨鏀瑰垪琛ㄧ被鍨嬶紝鍙�夊�兼湁list銆亀aterfall鍜宻croller锛岄粯璁や负list + nvueListIs: { + type: String, + default: u.gc('nvueListIs', 'list') + }, + // nvue waterfall閰嶇疆锛屼粎鍦╪vue涓笖nvueListIs=waterfall鏃舵湁鏁堬紝閰嶇疆鍙傛暟璇︽儏鍙傝锛歨ttps://uniapp.dcloud.io/component/waterfall + nvueWaterfallConfig: { + type: Object, + default: u.gc('nvueWaterfallConfig', {}) + }, + // nvue 鎺у埗鏄惁鍥炲脊鏁堟灉锛宨OS涓嶆敮鎸佸姩鎬佷慨鏀� + nvueBounce: { + type: Boolean, + default: u.gc('nvueBounce', true) + }, + // nvue涓�氳繃浠g爜婊氬姩鍒伴《閮�/搴曢儴鏃讹紝鏄惁鍔犲揩鍔ㄧ敾鏁堟灉(鏃犳粴鍔ㄥ姩鐢绘椂鏃犳晥)锛岄粯璁や负鍚� + nvueFastScroll: { + type: Boolean, + default: u.gc('nvueFastScroll', false) + }, + // nvue涓璴ist鐨刬d + nvueListId: { + type: String, + default: u.gc('nvueListId', '') + }, + // nvue涓璻efresh缁勪欢鐨勬牱寮� + nvueRefresherStyle: { + type: Object, + default: u.gc('nvueRefresherStyle', {}) + }, + // nvue涓槸鍚︽寜鍒嗛〉妯″紡(绫讳技绔栧悜swiper)鏄剧ずList锛岄粯璁や负false + nvuePagingEnabled: { + type: Boolean, + default: u.gc('nvuePagingEnabled', false) + }, + // 鏄惁闅愯棌nvue鍒楄〃搴曢儴鐨則agView锛屾view鐢ㄤ簬鏍囪瘑婊氬姩鍒板簳閮ㄤ綅缃紝鑻ラ殣钘忓垯婊氬姩鍒板簳閮ㄥ姛鑳藉皢澶辨晥锛屽湪nvue涓疄鐜板惛椤�+swiper鍔熻兘鏃堕渶灏嗘渶澶栧眰z-paging鐨勬灞炴�ц缃负true銆傞粯璁や负鍚� + hideNvueBottomTag: { + type: Boolean, + default: u.gc('hideNvueBottomTag', false) + }, + // nvue涓帶鍒秓nscroll浜嬩欢瑙﹀彂鐨勯鐜囷細琛ㄧず涓ゆonscroll浜嬩欢涔嬮棿鍒楄〃鑷冲皯婊氬姩浜�10px銆傛敞鎰忥紝灏嗚鍊艰缃负杈冨皬鐨勬暟鍊间細鎻愰珮婊氬姩浜嬩欢閲囨牱鐨勭簿搴︼紝浣嗗悓鏃朵篃浼氶檷浣庨〉闈㈢殑鎬ц兘 + offsetAccuracy: { + type: Number, + default: u.gc('offsetAccuracy', 10) + }, + // #endif + }, + data() { + return { + nRefresherLoading: false, + nListIsDragging: false, + nShowBottom: true, + nFixFreezing: false, + nShowRefresherReveal: false, + nLoadingMoreFixedHeight: false, + nShowRefresherRevealHeight: 0, + nOldShowRefresherRevealHeight: -1, + nRefresherWidth: u.rpx2px(750), + nF2Opacity: 0 + } + }, + computed: { + // #ifdef APP-NVUE + nScopedSlots() { + // #ifdef VUE2 + return this.$scopedSlots; + // #endif + // #ifdef VUE3 + return null; + // #endif + }, + nWaterfallColumnCount() { + if (this.finalNvueListIs !== 'waterfall') return 0; + return this._nGetWaterfallConfig('column-count', 2); + }, + nWaterfallColumnWidth() { + return this._nGetWaterfallConfig('column-width', 'auto'); + }, + nWaterfallColumnGap() { + return this._nGetWaterfallConfig('column-gap', 'normal'); + }, + nWaterfallLeftGap() { + return this._nGetWaterfallConfig('left-gap', 0); + }, + nWaterfallRightGap() { + return this._nGetWaterfallConfig('right-gap', 0); + }, + nViewIs() { + const is = this.finalNvueListIs; + return is === 'scroller' || is === 'view' ? 'view' : is === 'waterfall' ? 'header' : 'cell'; + }, + nSafeAreaBottomHeight() { + return this.safeAreaInsetBottom ? this.safeAreaBottom : 0; + }, + finalNvueListIs() { + if (this.usePageScroll) return 'view'; + const nvueListIsLowerCase = this.nvueListIs.toLowerCase(); + if (['list','waterfall','scroller'].indexOf(nvueListIsLowerCase) !== -1) return nvueListIsLowerCase; + return 'list'; + }, + finalNvueSuperListIs() { + return this.usePageScroll ? 'view' : 'scroller'; + }, + finalNvueRefresherEnabled() { + return this.finalNvueListIs !== 'view' && this.finalRefresherEnabled && !this.nShowRefresherReveal && !this.useChatRecordMode; + }, + // #endif + }, + mounted(){ + // #ifdef APP-NVUE + //鏃嬭浆灞忓箷鏃舵洿鏂板搴� + uni.onWindowResize((res) => { + // this._nUpdateRefresherWidth(); + }) + // #endif + }, + methods: { + // #ifdef APP-NVUE + // 鍒楄〃婊氬姩鏃惰Е鍙� + _nOnScroll(e) { + this.$emit('scroll', e); + const contentOffsetY = -e.contentOffset.y; + this.oldScrollTop = contentOffsetY; + this.nListIsDragging = e.isDragging; + this._checkShouldShowBackToTop(contentOffsetY, contentOffsetY - 1); + }, + // 鍒楄〃婊氬姩缁撴潫 + _nOnScrollend(e) { + this.$emit('scrollend', e); + + // 鍒ゆ柇鏄惁婊氬姩鍒伴《閮ㄤ簡 + if (e?.contentOffset?.y >= 0) { + this._emitScrollEvent('scrolltoupper'); + } + // 鍒ゆ柇鏄惁婊氬姩鍒板簳閮ㄤ簡 + this._getNodeClientRect('.zp-n-list').then(node => { + if (node) { + if (e?.contentSize?.height + e?.contentOffset?.y <= node[0].height) { + this._emitScrollEvent('scrolltolower'); + } + } + }) + }, + // 涓嬫媺鍒锋柊鍒锋柊涓� + _nOnRrefresh() { + if (this.nShowRefresherReveal) return; + // 杩涘叆鍒锋柊鐘舵�� + this.nRefresherLoading = true; + if (this.refresherStatus === Enum.Refresher.GoF2) { + this._handleGoF2(); + this.$nextTick(() => { + this._nRefresherEnd(); + }) + } else { + this.refresherStatus = Enum.Refresher.Loading; + this._doRefresherLoad(); + } + + }, + // 涓嬫媺鍒锋柊涓嬫媺涓� + _nOnPullingdown(e) { + if (this.refresherStatus === Enum.Refresher.Loading || (this.isIos && !this.nListIsDragging)) return; + this._emitTouchmove(e); + let { viewHeight, pullingDistance } = e; + // 鏇存柊涓嬫媺鍒锋柊鐘舵�� + // 涓嬫媺鍒锋柊璺濈瓒呰繃闃堝�� + if (pullingDistance >= viewHeight) { + // 濡傛灉寮�鍚簡涓嬫媺杩涘叆浜屾ゼ骞朵笖涓嬫媺鍒锋柊璺濈瓒呰繃杩涘叆浜屾ゼ闃堝�硷紝鍒欏綋鍓嶄笅鎷夊埛鏂扮姸鎬佷负鏉炬墜杩涘叆浜屾ゼ锛屽惁鍒欎负鏉炬墜绔嬪嵆鍒锋柊 + // (pullingDistance - viewHeight) + this.finalRefresherThreshold 涓嶇瓑鍚屼簬pullingDistance锛屾澶勬槸涓轰簡鍏煎涓嶅悓骞冲彴涓嬫媺鐩稿悓璺濈pullingDistance涓嶄竴鑷寸殑闂锛宲ullingDistance浠呬笌viewHeight浜掔浉鍏宠仈 + this.refresherStatus = this.refresherF2Enabled && (pullingDistance - viewHeight) + this.finalRefresherThreshold >= this.finalRefresherF2Threshold ? Enum.Refresher.GoF2 : Enum.Refresher.ReleaseToRefresh; + } else { + // 涓嬫媺鍒锋柊璺濈鏈秴杩囬槇鍊硷紝鏄剧ず榛樿鐘舵�� + this.refresherStatus = Enum.Refresher.Default; + } + }, + // 涓嬫媺鍒锋柊缁撴潫 + _nRefresherEnd(doEnd = true) { + if (doEnd) { + this._nDoRefresherEndAnimation(0, -this.nShowRefresherRevealHeight); + !this.usePageScroll && this.$refs['zp-n-list'].resetLoadmore(); + this.nRefresherLoading = false; + } + }, + // 鎵ц涓诲姩瑙﹀彂涓嬫媺鍒锋柊鍔ㄧ敾 + _nDoRefresherEndAnimation(height, translateY, animate = true, checkStack = true) { + // 娓呴櫎涓嬫媺鍒锋柊鐩稿叧timeout + this._cleanRefresherCompleteTimeout(); + this._cleanRefresherEndTimeout(); + + if (!this.finalShowRefresherWhenReload) { + // 濡傛灉reload涓嶉渶瑕佽嚜鍔ㄥ睍绀轰笅鎷夊埛鏂皏iew锛屽垯鍦╟omplete duration缁撴潫鍚庡啀鎶婁笅鎷夊埛鏂扮姸鎬佽缃洖榛樿 + this.refresherEndTimeout = u.delay(() => { + this.refresherStatus = Enum.Refresher.Default; + }, this.refresherCompleteDuration); + return; + } + // 鐢ㄦ埛澶勭悊鐢ㄦ埛鍦ㄧ煭鏃堕棿鍐呭娆¤皟鐢╮eload鐨勬儏鍐碉紝姝ゆ椂涓嬫媺鍒锋柊view涓嶉渶瑕侀噸澶嶆樉绀猴紝鍙渶瑕佷繚璇佹渶鍚庝竴娆eload瀵瑰簲鐨勮姹傜粨鏉熷悗鏀跺洖涓嬫媺鍒锋柊view鍗冲彲 + const stackCount = this.refresherRevealStackCount; + if (height === 0 && checkStack) { + this.refresherRevealStackCount --; + if (stackCount > 1) return; + this.refresherEndTimeout = u.delay(() => { + this.refresherStatus = Enum.Refresher.Default; + }, this.refresherCompleteDuration); + } + if (stackCount > 1) { + this.refresherStatus = Enum.Refresher.Loading; + } + + const duration = animate ? 200 : 0; + if (this.nOldShowRefresherRevealHeight !== height) { + if (height > 0) { + this.nShowRefresherReveal = true; + } + // 灞曠ず涓嬫媺鍒锋柊view + weexAnimation.transition(this.$refs['zp-n-list-refresher-reveal'], { + styles: { + height: `${height}px`, + transform: `translateY(${translateY}px)`, + }, + duration, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + } + u.delay(() => { + if (animate) { + this.nShowRefresherReveal = height > 0; + } + }, duration > 0 ? duration - 60 : 0); + this.nOldShowRefresherRevealHeight = height; + }, + // 婊氬姩鍒板簳閮ㄥ姞杞芥洿澶� + _nOnLoadmore() { + if (this.nShowRefresherReveal || !this.totalData.length) return; + this.useChatRecordMode ? this.doChatRecordLoadMore() : this._onLoadingMore('toBottom'); + }, + // 鑾峰彇nvue waterfall鍗曢」閰嶇疆 + _nGetWaterfallConfig(key, defaultValue) { + return this.nvueWaterfallConfig[key] || defaultValue; + }, + // 鏇存柊nvue 涓嬫媺鍒锋柊view瀹瑰櫒鐨勫搴� + _nUpdateRefresherWidth() { + u.delay(() => { + this.$nextTick(()=>{ + this._getNodeClientRect('.zp-n-list').then(node => { + if (node) { + this.nRefresherWidth = node[0].width || this.nRefresherWidth; + } + }) + }) + }) + } + // #endif + } +} diff --git a/src/components/z-paging/js/modules/refresher.js b/src/components/z-paging/js/modules/refresher.js new file mode 100644 index 0000000..912b293 --- /dev/null +++ b/src/components/z-paging/js/modules/refresher.js @@ -0,0 +1,831 @@ +// [z-paging]涓嬫媺鍒锋柊view妯″潡 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' + +// #ifdef APP-NVUE +const weexAnimation = weex.requireModule('animation'); +// #endif +export default { + props: { + // 涓嬫媺鍒锋柊鐨勪富棰樻牱寮忥紝鏀寔black锛寃hite锛岄粯璁lack + refresherThemeStyle: { + type: String, + default: u.gc('refresherThemeStyle', '') + }, + // 鑷畾涔変笅鎷夊埛鏂颁腑宸︿晶鍥炬爣鐨勬牱寮� + refresherImgStyle: { + type: Object, + default: u.gc('refresherImgStyle', {}) + }, + // 鑷畾涔変笅鎷夊埛鏂颁腑鍙充晶鐘舵�佹弿杩版枃瀛楃殑鏍峰紡 + refresherTitleStyle: { + type: Object, + default: u.gc('refresherTitleStyle', {}) + }, + // 鑷畾涔変笅鎷夊埛鏂颁腑鍙充晶鏈�鍚庢洿鏂版椂闂存枃瀛楃殑鏍峰紡(show-refresher-update-time涓簍rue鏃舵湁鏁�) + refresherUpdateTimeStyle: { + type: Object, + default: u.gc('refresherUpdateTimeStyle', {}) + }, + // 鍦ㄥ井淇″皬绋嬪簭鍜孮Q灏忕▼搴忎腑锛屾槸鍚﹀疄鏃剁洃鍚笅鎷夊埛鏂颁腑杩涘害锛岄粯璁や负鍚� + watchRefresherTouchmove: { + type: Boolean, + default: u.gc('watchRefresherTouchmove', false) + }, + // 搴曢儴鍔犺浇鏇村鐨勪富棰樻牱寮忥紝鏀寔black锛寃hite锛岄粯璁lack + loadingMoreThemeStyle: { + type: String, + default: u.gc('loadingMoreThemeStyle', '') + }, + // 鏄惁鍙娇鐢ㄤ笅鎷夊埛鏂帮紝璁剧疆涓簍rue鍚庡皢鍏抽棴mounted鑷姩璇锋眰鏁版嵁銆佸叧闂粴鍔ㄥ埌搴曢儴鍔犺浇鏇村锛屽己鍒堕殣钘忕┖鏁版嵁鍥俱�傞粯璁や负鍚� + refresherOnly: { + type: Boolean, + default: u.gc('refresherOnly', false) + }, + // 鑷畾涔変笅鎷夊埛鏂伴粯璁ょ姸鎬佷笅鍥炲脊鍔ㄧ敾鏃堕棿锛屽崟浣嶄负姣锛岄粯璁や负100姣锛宯vue鏃犳晥 + refresherDefaultDuration: { + type: [Number, String], + default: u.gc('refresherDefaultDuration', 100) + }, + // 鑷畾涔変笅鎷夊埛鏂扮粨鏉熶互鍚庡欢杩熷洖寮圭殑鏃堕棿锛屽崟浣嶄负姣锛岄粯璁や负0 + refresherCompleteDelay: { + type: [Number, String], + default: u.gc('refresherCompleteDelay', 0) + }, + // 鑷畾涔変笅鎷夊埛鏂扮粨鏉熷洖寮瑰姩鐢绘椂闂达紝鍗曚綅涓烘绉掞紝榛樿涓�300姣(refresherEndBounceEnabled涓篺alse鏃讹紝refresherCompleteDuration涓鸿瀹氬�肩殑1/3)锛宯vue鏃犳晥 + refresherCompleteDuration: { + type: [Number, String], + default: u.gc('refresherCompleteDuration', 300) + }, + // 鑷畾涔変笅鎷夊埛鏂颁腑鏄惁鍏佽鍒楄〃婊氬姩锛岄粯璁や负鏄� + refresherRefreshingScrollable: { + type: Boolean, + default: u.gc('refresherRefreshingScrollable', true) + }, + // 鑷畾涔変笅鎷夊埛鏂扮粨鏉熺姸鎬佷笅鏄惁鍏佽鍒楄〃婊氬姩锛岄粯璁や负鍚� + refresherCompleteScrollable: { + type: Boolean, + default: u.gc('refresherCompleteScrollable', false) + }, + // 鏄惁浣跨敤鑷畾涔夌殑涓嬫媺鍒锋柊锛岄粯璁や负鏄紝鍗充娇鐢▃-paging鐨勪笅鎷夊埛鏂般�傝缃负false鍗充唬琛ㄤ娇鐢╱ni scroll-view鑷甫鐨勪笅鎷夊埛鏂帮紝h5銆丄pp銆佸井淇″皬绋嬪簭浠ュ鐨勫钩鍙颁笉鏀寔uni scroll-view鑷甫鐨勪笅鎷夊埛鏂� + useCustomRefresher: { + type: Boolean, + default: u.gc('useCustomRefresher', true) + }, + // 鑷畾涔変笅鎷夊埛鏂颁笅鎷夊抚鐜囷紝榛樿涓�40锛岃繃楂樺彲鑳戒細鍑虹幇鎶栧姩闂 + refresherFps: { + type: [Number, String], + default: u.gc('refresherFps', 40) + }, + // 鑷畾涔変笅鎷夊埛鏂板厑璁歌Е鍙戠殑鏈�澶т笅鎷夎搴︼紝榛樿涓�40搴︼紝褰撲笅鎷夎搴﹀皬浜庤瀹氬�兼椂锛岃嚜瀹氫箟涓嬫媺鍒锋柊鍔ㄧ敾涓嶄細琚Е鍙� + refresherMaxAngle: { + type: [Number, String], + default: u.gc('refresherMaxAngle', 40) + }, + // 鑷畾涔変笅鎷夊埛鏂扮殑瑙掑害鐢辨湭杈惧埌鏈�澶ц搴﹀彉鍒拌揪鍒版渶澶ц搴︽椂锛屾槸鍚︾户缁笅鎷夊埛鏂版墜鍔匡紝榛樿涓哄惁 + refresherAngleEnableChangeContinued: { + type: Boolean, + default: u.gc('refresherAngleEnableChangeContinued', false) + }, + // 鑷畾涔変笅鎷夊埛鏂伴粯璁ょ姸鎬佷笅鐨勬枃瀛� + refresherDefaultText: { + type: [String, Object], + default: u.gc('refresherDefaultText', null) + }, + // 鑷畾涔変笅鎷夊埛鏂版澗鎵嬬珛鍗冲埛鏂扮姸鎬佷笅鐨勬枃瀛� + refresherPullingText: { + type: [String, Object], + default: u.gc('refresherPullingText', null) + }, + // 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佷笅鐨勬枃瀛� + refresherRefreshingText: { + type: [String, Object], + default: u.gc('refresherRefreshingText', null) + }, + // 鑷畾涔変笅鎷夊埛鏂板埛鏂扮粨鏉熺姸鎬佷笅鐨勬枃瀛� + refresherCompleteText: { + type: [String, Object], + default: u.gc('refresherCompleteText', null) + }, + // 鑷畾涔夌户缁笅鎷夎繘鍏ヤ簩妤兼枃瀛� + refresherGoF2Text: { + type: [String, Object], + default: u.gc('refresherGoF2Text', null) + }, + // 鑷畾涔変笅鎷夊埛鏂伴粯璁ょ姸鎬佷笅鐨勫浘鐗� + refresherDefaultImg: { + type: String, + default: u.gc('refresherDefaultImg', null) + }, + // 鑷畾涔変笅鎷夊埛鏂版澗鎵嬬珛鍗冲埛鏂扮姸鎬佷笅鐨勫浘鐗囷紝榛樿涓巖efresherDefaultImg涓�鑷� + refresherPullingImg: { + type: String, + default: u.gc('refresherPullingImg', null) + }, + // 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佷笅鐨勫浘鐗� + refresherRefreshingImg: { + type: String, + default: u.gc('refresherRefreshingImg', null) + }, + // 鑷畾涔変笅鎷夊埛鏂板埛鏂扮粨鏉熺姸鎬佷笅鐨勫浘鐗� + refresherCompleteImg: { + type: String, + default: u.gc('refresherCompleteImg', null) + }, + // 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佷笅鏄惁灞曠ず鏃嬭浆鍔ㄧ敾 + refresherRefreshingAnimated: { + type: Boolean, + default: u.gc('refresherRefreshingAnimated', true) + }, + // 鏄惁寮�鍚嚜瀹氫箟涓嬫媺鍒锋柊鍒锋柊缁撴潫鍥炲脊鏁堟灉锛岄粯璁や负鏄� + refresherEndBounceEnabled: { + type: Boolean, + default: u.gc('refresherEndBounceEnabled', true) + }, + // 鏄惁寮�鍚嚜瀹氫箟涓嬫媺鍒锋柊锛岄粯璁や负鏄� + refresherEnabled: { + type: Boolean, + default: u.gc('refresherEnabled', true) + }, + // 璁剧疆鑷畾涔変笅鎷夊埛鏂伴槇鍊硷紝榛樿涓�80rpx + refresherThreshold: { + type: [Number, String], + default: u.gc('refresherThreshold', '80rpx') + }, + // 璁剧疆绯荤粺涓嬫媺鍒锋柊榛樿鏍峰紡锛屾敮鎸佽缃� black锛寃hite锛宯one锛宯one 琛ㄧず涓嶄娇鐢ㄩ粯璁ゆ牱寮忥紝榛樿涓篵lack + refresherDefaultStyle: { + type: String, + default: u.gc('refresherDefaultStyle', 'black') + }, + // 璁剧疆鑷畾涔変笅鎷夊埛鏂板尯鍩熻儗鏅� + refresherBackground: { + type: String, + default: u.gc('refresherBackground', 'transparent') + }, + // 璁剧疆鍥哄畾鐨勮嚜瀹氫箟涓嬫媺鍒锋柊鍖哄煙鑳屾櫙 + refresherFixedBackground: { + type: String, + default: u.gc('refresherFixedBackground', 'transparent') + }, + // 璁剧疆鍥哄畾鐨勮嚜瀹氫箟涓嬫媺鍒锋柊鍖哄煙楂樺害锛岄粯璁や负0 + refresherFixedBacHeight: { + type: [Number, String], + default: u.gc('refresherFixedBacHeight', 0) + }, + // 璁剧疆鑷畾涔変笅鎷夊埛鏂颁笅鎷夎秴鍑洪槇鍊煎悗缁х画涓嬫媺浣嶇Щ琛板噺鐨勬瘮渚嬶紝鑼冨洿0-1锛屽�艰秺澶т唬琛ㄨ“鍑忚秺澶氥�傞粯璁や负0.65(nvue鏃犳晥) + refresherOutRate: { + type: Number, + default: u.gc('refresherOutRate', 0.65) + }, + // 鏄惁寮�鍚笅鎷夎繘鍏ヤ簩妤煎姛鑳斤紝榛樿涓哄惁 + refresherF2Enabled: { + type: Boolean, + default: u.gc('refresherF2Enabled', false) + }, + // 涓嬫媺杩涘叆浜屾ゼ闃堝�硷紝榛樿涓�200rpx + refresherF2Threshold: { + type: [Number, String], + default: u.gc('refresherF2Threshold', '200rpx') + }, + // 涓嬫媺杩涘叆浜屾ゼ鍔ㄧ敾鏃堕棿锛屽崟浣嶄负姣锛岄粯璁や负200姣 + refresherF2Duration: { + type: [Number, String], + default: u.gc('refresherF2Duration', 200) + }, + // 涓嬫媺杩涘叆浜屾ゼ鐘舵�佹澗鎵嬪悗鏄惁寮瑰嚭浜屾ゼ锛岄粯璁や负鏄� + showRefresherF2: { + type: Boolean, + default: u.gc('showRefresherF2', true) + }, + // 璁剧疆鑷畾涔変笅鎷夊埛鏂颁笅鎷夋椂瀹為檯涓嬫媺浣嶇Щ涓庣敤鎴蜂笅鎷夎窛绂荤殑姣斿�硷紝榛樿涓�0.75锛屽嵆浠h〃鑻ョ敤鎴蜂笅鎷�10px锛屽垯瀹為檯浣嶇Щ涓�7.5px(nvue鏃犳晥) + refresherPullRate: { + type: Number, + default: u.gc('refresherPullRate', 0.75) + }, + // 鏄惁鏄剧ず鏈�鍚庢洿鏂版椂闂达紝榛樿涓哄惁 + showRefresherUpdateTime: { + type: Boolean, + default: u.gc('showRefresherUpdateTime', false) + }, + // 濡傛灉闇�瑕佸尯鍒笉鍚岄〉闈㈢殑鏈�鍚庢洿鏂版椂闂达紝璇蜂负涓嶅悓椤甸潰鐨剒-paging鐨刞refresher-update-time-key`璁剧疆涓嶅悓鐨勫瓧绗︿覆 + refresherUpdateTimeKey: { + type: String, + default: u.gc('refresherUpdateTimeKey', 'default') + }, + // 涓嬫媺鍒锋柊鏃朵笅鎷夊埌鈥滄澗鎵嬬珛鍗冲埛鏂扳�濇垨鈥滄澗鎵嬭繘鍏ヤ簩妤尖�濈姸鎬佹椂鏄惁浣挎墜鏈虹煭鎸姩锛岄粯璁や负鍚︼紙h5鏃犳晥锛� + refresherVibrate: { + type: Boolean, + default: u.gc('refresherVibrate', false) + }, + // 涓嬫媺鍒锋柊鏃舵槸鍚︾姝笅鎷夊埛鏂皏iew璺熼殢鐢ㄦ埛瑙︽懜绔栫洿绉诲姩锛岄粯璁や负鍚︺�傛敞鎰忔灞炴�у彧鏄姝笅鎷夊埛鏂皏iew绉诲姩锛屽叾浠栦笅鎷夊埛鏂伴�昏緫渚濈劧浼氭甯歌Е鍙� + refresherNoTransform: { + type: Boolean, + default: u.gc('refresherNoTransform', false) + }, + // 鏄惁寮�鍚笅鎷夊埛鏂扮姸鎬佹爮鍗犱綅锛岄�傜敤浜庨殣钘忓鑸爮鏃讹紝涓嬫媺鍒锋柊闇�瑕侀伩寮�鐘舵�佹爮楂樺害鐨勬儏鍐碉紝榛樿涓哄惁 + useRefresherStatusBarPlaceholder: { + type: Boolean, + default: u.gc('useRefresherStatusBarPlaceholder', false) + }, + }, + data() { + return { + R: Enum.Refresher, + //涓嬫媺鍒锋柊鐘舵�� + refresherStatus: Enum.Refresher.Default, + refresherTouchstartY: 0, + lastRefresherTouchmove: null, + refresherReachMaxAngle: true, + refresherTransform: 'translateY(0px)', + refresherTransition: '', + finalRefresherDefaultStyle: 'black', + refresherRevealStackCount: 0, + refresherCompleteTimeout: null, + refresherCompleteSubTimeout: null, + refresherEndTimeout: null, + isTouchmovingTimeout: null, + refresherTriggered: false, + isTouchmoving: false, + isTouchEnded: false, + isUserPullDown: false, + privateRefresherEnabled: -1, + privateShowRefresherWhenReload: false, + customRefresherHeight: -1, + showCustomRefresher: false, + doRefreshAnimateAfter: false, + isRefresherInComplete: false, + showF2: false, + f2Transform: '', + pullDownTimeStamp: 0, + moveDis: 0, + oldMoveDis: 0, + currentDis: 0, + oldCurrentMoveDis: 0, + oldRefresherTouchmoveY: 0, + oldTouchDirection: '', + oldEmitedTouchDirection: '', + oldPullingDistance: -1, + refresherThresholdUpdateTag: 0 + } + }, + watch: { + refresherDefaultStyle: { + handler(newVal) { + if (newVal.length) { + this.finalRefresherDefaultStyle = newVal; + } + }, + immediate: true + }, + refresherStatus(newVal) { + newVal === Enum.Refresher.Loading && this._cleanRefresherEndTimeout(); + this.refresherVibrate && (newVal === Enum.Refresher.ReleaseToRefresh || newVal === Enum.Refresher.GoF2) && this._doVibrateShort(); + this.$emit('refresherStatusChange', newVal); + this.$emit('update:refresherStatus', newVal); + }, + // 鐩戝惉褰撳墠涓嬫媺鍒锋柊鍚敤/绂佺敤鐘舵�� + refresherEnabled(newVal) { + // 褰撶鐢ㄤ笅鎷夊埛鏂版椂锛屽己鍒舵敹鍥炴鍦ㄥ睍绀虹殑涓嬫媺鍒锋柊view + !newVal && this.endRefresh(); + } + }, + computed: { + pullDownDisTimeStamp() { + return 1000 / this.refresherFps; + }, + refresherThresholdUnitConverted() { + return u.addUnit(this.refresherThreshold, this.unit); + }, + finalRefresherEnabled() { + if (this.useChatRecordMode) return false; + if (this.privateRefresherEnabled === -1) return this.refresherEnabled; + return this.privateRefresherEnabled === 1; + }, + finalRefresherThreshold() { + let refresherThreshold = this.refresherThresholdUnitConverted; + let idDefault = false; + if (refresherThreshold === u.addUnit(80, this.unit)) { + idDefault = true; + if (this.showRefresherUpdateTime) { + refresherThreshold = u.addUnit(120, this.unit); + } + } + if (idDefault && this.customRefresherHeight > 0) return this.customRefresherHeight + this.finalRefresherThresholdPlaceholder; + return u.convertToPx(refresherThreshold) + this.finalRefresherThresholdPlaceholder; + }, + finalRefresherF2Threshold() { + return u.convertToPx(u.addUnit(this.refresherF2Threshold, this.unit)); + }, + finalRefresherThresholdPlaceholder() { + return this.useRefresherStatusBarPlaceholder ? this.statusBarHeight : 0; + }, + finalRefresherFixedBacHeight() { + return u.convertToPx(this.refresherFixedBacHeight); + }, + finalRefresherThemeStyle() { + return this.refresherThemeStyle.length ? this.refresherThemeStyle : this.defaultThemeStyle; + }, + finalRefresherOutRate() { + let rate = this.refresherOutRate; + rate = Math.max(0,rate); + rate = Math.min(1,rate); + return rate; + }, + finalRefresherPullRate() { + let rate = this.refresherPullRate; + rate = Math.max(0,rate); + return rate; + }, + finalRefresherTransform() { + if (this.refresherNoTransform || this.refresherTransform === 'translateY(0px)') return 'none'; + return this.refresherTransform; + }, + finalShowRefresherWhenReload() { + return this.showRefresherWhenReload || this.privateShowRefresherWhenReload; + }, + finalRefresherTriggered() { + if (!(this.finalRefresherEnabled && !this.useCustomRefresher)) return false; + return this.refresherTriggered; + }, + showRefresher() { + const showRefresher = this.finalRefresherEnabled || this.useCustomRefresher && !this.useChatRecordMode; + // #ifndef APP-NVUE + this.active && this.customRefresherHeight === -1 && showRefresher && this.updateCustomRefresherHeight(); + // #endif + return showRefresher; + }, + hasTouchmove() { + // #ifdef VUE2 + // #ifdef APP-VUE || H5 + if (this.$listeners && !this.$listeners.refresherTouchmove) return false; + // #endif + // #ifdef MP-WEIXIN || MP-QQ + return this.watchRefresherTouchmove; + // #endif + return true; + // #endif + return this.watchRefresherTouchmove; + }, + }, + methods: { + // 缁堟涓嬫媺鍒锋柊鐘舵�� + endRefresh() { + this.totalData = this.realTotalData; + this._refresherEnd(); + this._endSystemLoadingAndRefresh(); + this._handleScrollViewBounce({ bounce: true }); + this.$nextTick(() => { + this.refresherTriggered = false; + }) + }, + // 鎵嬪姩鏇存柊鑷畾涔変笅鎷夊埛鏂皏iew楂樺害 + updateCustomRefresherHeight() { + u.delay(() => this.$nextTick(this._updateCustomRefresherHeight)); + }, + // 鍏抽棴浜屾ゼ + closeF2() { + this._handleCloseF2(); + }, + // 鑷畾涔変笅鎷夊埛鏂拌瑙﹀彂 + _onRefresh(fromScrollView = false, isUserPullDown = true) { + if (fromScrollView && !(this.finalRefresherEnabled && !this.useCustomRefresher)) return; + this.$emit('onRefresh'); + this.$emit('Refresh'); + // #ifdef APP-NVUE + if (this.loading) { + u.delay(this._nRefresherEnd, 500) + return; + } + // #endif + if (this.loading || this.isRefresherInComplete) return; + this.loadingType = Enum.LoadingType.Refresher; + if (this.nShowRefresherReveal) return; + this.isUserPullDown = isUserPullDown; + this.isUserReload = !isUserPullDown; + this._startLoading(true); + this.refresherTriggered = true; + if (this.reloadWhenRefresh && isUserPullDown) { + this.useChatRecordMode ? this._onLoadingMore('click') : this._reload(false, false, isUserPullDown); + } + }, + // 鑷畾涔変笅鎷夊埛鏂拌澶嶄綅 + _onRestore() { + this.refresherTriggered = 'restore'; + this.$emit('onRestore'); + this.$emit('Restore'); + }, + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // touch寮�濮� + _refresherTouchstart(e) { + this._handleListTouchstart(); + if (this._touchDisabled()) return; + this._handleRefresherTouchstart(u.getTouch(e)); + }, + // #endif + // 杩涗竴姝ュ鐞唗ouch寮�濮嬬粨鏋� + _handleRefresherTouchstart(touch) { + if (!this.loading && this.isTouchEnded) { + this.isTouchmoving = false; + } + this.loadingType = Enum.LoadingType.Refresher; + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this.isTouchEnded = false; + this.refresherTransition = ''; + this.refresherTouchstartY = touch.touchY; + this.$emit('refresherTouchstart', this.refresherTouchstartY); + this.lastRefresherTouchmove = touch; + this._cleanRefresherCompleteTimeout(); + this._cleanRefresherEndTimeout(); + }, + + // 闈瀉pp-vue鎴栧井淇″皬绋嬪簭鎴朡Q灏忕▼搴忔垨h5骞冲彴锛屼娇鐢╦s鎺у埗涓嬫媺鍒锋柊 + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // touch涓� + _refresherTouchmove(e) { + const currentTimeStamp = u.getTime(); + let touch = null; + let refresherTouchmoveY = 0; + if (this.watchTouchDirectionChange) { + // 妫�娴嬩笅鎷夊埛鏂版柟鍚戞敼鍙� + touch = u.getTouch(e); + refresherTouchmoveY = touch.touchY; + const direction = refresherTouchmoveY > this.oldRefresherTouchmoveY ? 'top' : 'bottom'; + // 鍙湁鍦ㄦ柟鍚戞敼鍙樼殑鏃跺�欐墠emit鐩稿叧浜嬩欢 + if (direction === this.oldTouchDirection && direction !== this.oldEmitedTouchDirection) { + this._handleTouchDirectionChange({ direction }); + this.oldEmitedTouchDirection = direction; + } + this.oldTouchDirection = direction; + this.oldRefresherTouchmoveY = refresherTouchmoveY; + } + // 鑺傛祦澶勭悊锛屽湪pullDownDisTimeStamp鏃堕棿鍐呯殑涓嬫媺鍒锋柊涓簨浠朵笉杩涜澶勭悊 + if (this.pullDownTimeStamp && currentTimeStamp - this.pullDownTimeStamp <= this.pullDownDisTimeStamp) return; + // 濡傛灉涓嶅厑璁镐笅鎷夛紝鍒檙eturn + if (this._touchDisabled()) return; + this.pullDownTimeStamp = Number(currentTimeStamp); + touch = u.getTouch(e); + refresherTouchmoveY = touch.touchY; + // 鑾峰彇褰撳墠touch鐨剏 - 鍒濆touch鐨剏锛岃绠楀畠浠殑宸� + let moveDis = refresherTouchmoveY - this.refresherTouchstartY; + if (moveDis < 0) return; + // 瀵逛笅鎷夊埛鏂扮殑瑙掑害杩涜闄愬埗 + if (this.refresherMaxAngle >= 0 && this.refresherMaxAngle <= 90 && this.lastRefresherTouchmove && this.lastRefresherTouchmove.touchY <= refresherTouchmoveY) { + if (!moveDis && !this.refresherAngleEnableChangeContinued && this.moveDis < 1 && !this.refresherReachMaxAngle) return; + const x = Math.abs(touch.touchX - this.lastRefresherTouchmove.touchX); + const y = Math.abs(refresherTouchmoveY - this.lastRefresherTouchmove.touchY); + const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); + if ((x || y) && x > 1) { + // 鑾峰彇涓嬫媺鍒锋柊鍓嶅悗涓ゆ浣嶇Щ鐨勮搴� + const angle = Math.asin(y / z) / Math.PI * 180; + // 濡傛灉瑙掑害灏忎簬閰嶇疆瑕佹眰锛屽垯return + if (angle < this.refresherMaxAngle) { + this.lastRefresherTouchmove = touch; + this.refresherReachMaxAngle = false; + return; + } + } + } + // 鑾峰彇鏈�缁堢殑moveDis + moveDis = this._getFinalRefresherMoveDis(moveDis); + // 澶勭悊涓嬫媺鍒锋柊浣嶇Щ + this._handleRefresherTouchmove(moveDis, touch); + // 涓嬫媺鍒锋柊鏃讹紝绂佹椤甸潰婊氬姩浠ラ槻姝㈤〉闈㈠悜涓嬫粴鍔ㄥ拰涓嬫媺鍒锋柊鍚屾椂浣滅敤瀵艰嚧涓嬫媺鍒锋柊浣嶇疆鍋忕Щ瓒呰繃棰勬湡 + if (!this.disabledBounce) { + // #ifndef MP-LARK + this._handleScrollViewBounce({ bounce: false }); + // #endif + this.disabledBounce = true; + } + this._emitTouchmove({ pullingDistance: moveDis, dy: this.moveDis - this.oldMoveDis }); + }, + // #endif + // 杩涗竴姝ュ鐞唗ouch涓粨鏋� + _handleRefresherTouchmove(moveDis, touch) { + this.refresherReachMaxAngle = true; + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this.isTouchmoving = true; + this.isTouchEnded = false; + // 鏇存柊涓嬫媺鍒锋柊鐘舵�� + // 涓嬫媺鍒锋柊璺濈瓒呰繃闃堝�� + if (moveDis >= this.finalRefresherThreshold) { + // 濡傛灉寮�鍚簡涓嬫媺杩涘叆浜屾ゼ骞朵笖涓嬫媺鍒锋柊璺濈瓒呰繃杩涘叆浜屾ゼ闃堝�硷紝鍒欏綋鍓嶄笅鎷夊埛鏂扮姸鎬佷负鏉炬墜杩涘叆浜屾ゼ锛屽惁鍒欎负鏉炬墜绔嬪嵆鍒锋柊 + this.refresherStatus = this.refresherF2Enabled && moveDis >= this.finalRefresherF2Threshold ? Enum.Refresher.GoF2 : Enum.Refresher.ReleaseToRefresh; + } else { + // 涓嬫媺鍒锋柊璺濈鏈秴杩囬槇鍊硷紝鏄剧ず榛樿鐘舵�� + this.refresherStatus = Enum.Refresher.Default; + } + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // this.scrollEnable = false; + // 閫氳繃transform鎺у埗涓嬫媺鍒锋柊view鍨傜洿鍋忕Щ + this.refresherTransform = `translateY(${moveDis}px)`; + this.lastRefresherTouchmove = touch; + // #endif + this.moveDis = moveDis; + }, + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // touch缁撴潫 + _refresherTouchend(e) { + // 涓嬫媺鍒锋柊鐢ㄦ埛鎵嬬寮�灞忓箷锛屽厑璁稿垪琛ㄦ粴鍔� + this._handleScrollViewBounce({bounce: true}); + if (this._touchDisabled() || !this.isTouchmoving) return; + const touch = u.getTouch(e); + let refresherTouchendY = touch.touchY; + let moveDis = refresherTouchendY - this.refresherTouchstartY; + moveDis = this._getFinalRefresherMoveDis(moveDis); + this._handleRefresherTouchend(moveDis); + this.disabledBounce = false; + }, + // #endif + // 杩涗竴姝ュ鐞唗ouch缁撴潫缁撴灉 + _handleRefresherTouchend(moveDis) { + // #ifndef APP-PLUS || H5 || MP-WEIXIN + if (!this.isTouchmoving) return; + // #endif + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this.refresherReachMaxAngle = true; + this.isTouchEnded = true; + const refresherThreshold = this.finalRefresherThreshold; + if (moveDis >= refresherThreshold && (this.refresherStatus === Enum.Refresher.ReleaseToRefresh || this.refresherStatus === Enum.Refresher.GoF2)) { + // 濡傛灉鏄澗鎵嬭繘鍏ヤ簩妤肩姸鎬侊紝鍒欒Е鍙戣繘鍏ヤ簩妤� + if (this.refresherStatus === Enum.Refresher.GoF2) { + this._handleGoF2(); + this._refresherEnd(); + } else { + // 濡傛灉鏄澗鎵嬬珛鍗冲埛鏂扮姸鎬侊紝鍒欒Е鍙戜笅鎷夊埛鏂� + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransform = `translateY(${refresherThreshold}px)`; + this.refresherTransition = 'transform .1s linear'; + // #endif + u.delay(() => { + this._emitTouchmove({ pullingDistance: refresherThreshold, dy: this.moveDis - refresherThreshold }); + }, 0.1); + this.moveDis = refresherThreshold; + this.refresherStatus = Enum.Refresher.Loading; + this._doRefresherLoad(); + } + } else { + this._refresherEnd(); + this.isTouchmovingTimeout = u.delay(() => { + this.isTouchmoving = false; + }, this.refresherDefaultDuration); + } + this.scrollEnable = true; + this.$emit('refresherTouchend', moveDis); + }, + // 澶勭悊鍒楄〃瑙︽懜寮�濮嬩簨浠� + _handleListTouchstart() { + if (this.useChatRecordMode && this.autoHideKeyboardWhenChat) { + uni.hideKeyboard(); + this.$emit('hidedKeyboard'); + } + }, + // 澶勭悊scroll-view bounce鏄惁鐢熸晥 + _handleScrollViewBounce({ bounce }) { + if (!this.usePageScroll && !this.scrollToTopBounceEnabled) { + if (this.wxsScrollTop <= 5) { + // #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransition = ''; + // #endif + this.scrollEnable = bounce; + } else if (bounce) { + this.scrollEnable = bounce; + } + } + }, + // wxs姝e湪涓嬫媺鐘舵�佹敼鍙樺鐞� + _handleWxsPullingDownStatusChange(onPullingDown) { + this.wxsOnPullingDown = onPullingDown; + if (onPullingDown && !this.useChatRecordMode) { + this.renderPropScrollTop = 0; + } + }, + // wxs姝e湪涓嬫媺澶勭悊 + _handleWxsPullingDown({ moveDis, diffDis }){ + this._emitTouchmove({ pullingDistance: moveDis,dy: diffDis }); + }, + // wxs瑙︽懜鏂瑰悜鏀瑰彉 + _handleTouchDirectionChange({ direction }) { + this.$emit('touchDirectionChange',direction); + }, + // wxs閫氱煡鏇存柊鍏秔rops + _handlePropUpdate(){ + this.wxsPropType = u.getTime().toString(); + }, + // 涓嬫媺鍒锋柊缁撴潫 + _refresherEnd(shouldEndLoadingDelay = true, fromAddData = false, isUserPullDown = false, setLoading = true) { + if (this.loadingType === Enum.LoadingType.Refresher) { + // 璁$畻褰撳墠涓嬫媺鍒锋柊缁撴潫闇�瑕佸欢杩熺殑鏃堕棿 + const refresherCompleteDelay = (fromAddData && (isUserPullDown || this.showRefresherWhenReload)) ? this.refresherCompleteDelay : 0; + // 濡傛灉寤惰繜鏃堕棿澶т簬0锛屽垯灞曠ず鍒锋柊缁撴潫鐘舵�侊紝鍚﹀垯鐩存帴灞曠ず榛樿鐘舵�� + const refresherStatus = refresherCompleteDelay > 0 ? Enum.Refresher.Complete : Enum.Refresher.Default; + if (this.finalShowRefresherWhenReload) { + const stackCount = this.refresherRevealStackCount; + this.refresherRevealStackCount --; + if (stackCount > 1) return; + } + this._cleanRefresherEndTimeout(); + this.refresherEndTimeout = u.delay(() => { + // 鏇存柊涓嬫媺鍒锋柊鐘舵�� + this.refresherStatus = refresherStatus; + // 濡傛灉褰撳墠涓嬫媺鍒锋柊鐘舵�佷笉鏄埛鏂扮粨鏉燂紝鍒欒涓哄叾涓嶅湪鍒锋柊缁撴潫鐘舵�� + if (refresherStatus !== Enum.Refresher.Complete) { + this.isRefresherInComplete = false; + } + }, this.refresherStatus !== Enum.Refresher.Default && refresherStatus === Enum.Refresher.Default ? this.refresherCompleteDuration : 0); + + // #ifndef APP-NVUE + if (refresherCompleteDelay > 0) { + this.isRefresherInComplete = true; + } + // #endif + this._cleanRefresherCompleteTimeout(); + this.refresherCompleteTimeout = u.delay(() => { + let animateDuration = 1; + const animateType = this.refresherEndBounceEnabled && fromAddData ? 'cubic-bezier(0.19,1.64,0.42,0.72)' : 'linear'; + if (fromAddData) { + animateDuration = this.refresherEndBounceEnabled ? this.refresherCompleteDuration / 1000 : this.refresherCompleteDuration / 3000; + } + this.refresherTransition = `transform ${fromAddData ? animateDuration : this.refresherDefaultDuration / 1000}s ${animateType}`; + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransform = 'translateY(0px)'; + this.currentDis = 0; + // #endif + // #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.wxsPropType = this.refresherTransition + 'end' + u.getTime(); + // #endif + // #ifdef APP-NVUE + this._nRefresherEnd(); + // #endif + this.moveDis = 0; + // #ifndef APP-NVUE + if (refresherStatus === Enum.Refresher.Complete) { + if (this.refresherCompleteSubTimeout) { + clearTimeout(this.refresherCompleteSubTimeout); + this.refresherCompleteSubTimeout = null; + } + this.refresherCompleteSubTimeout = u.delay(() => { + this.$nextTick(() => { + this.refresherStatus = Enum.Refresher.Default; + this.isRefresherInComplete = false; + }) + }, animateDuration * 800); + } + // #endif + this._emitTouchmove({ pullingDistance: 0, dy: this.moveDis }); + }, refresherCompleteDelay); + } + if (setLoading) { + u.delay(() => this.loading = false, shouldEndLoadingDelay ? 10 : 0); + isUserPullDown && this._onRestore(); + } + }, + // 澶勭悊杩涘叆浜屾ゼ + _handleGoF2() { + if (this.showF2 || !this.refresherF2Enabled) return; + this.$emit('refresherF2Change', 'go'); + + if (!this.showRefresherF2) return; + // #ifndef APP-NVUE + this.f2Transform = `translateY(${-this.superContentHeight}px)`; + this.showF2 = true; + u.delay(() => { + this.f2Transform = 'translateY(0px)'; + }, 100, 'f2ShowDelay') + // #endif + + // #ifdef APP-NVUE + this.showF2 = true; + this.$nextTick(() => { + weexAnimation.transition(this.$refs['zp-n-f2'], { + styles: { transform: `translateY(${-this.superContentHeight}px)` }, + duration: 0, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + this.nF2Opacity = 1; + }) + u.delay(() => { + weexAnimation.transition(this.$refs['zp-n-f2'], { + styles: { transform: 'translateY(0px)' }, + duration: this.refresherF2Duration, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + }, 10, 'f2GoDelay') + // #endif + }, + // 澶勭悊閫�鍑轰簩妤� + _handleCloseF2() { + if (!this.showF2 || !this.refresherF2Enabled) return; + this.$emit('refresherF2Change', 'close'); + + if (!this.showRefresherF2) return; + // #ifndef APP-NVUE + this.f2Transform = `translateY(${-this.superContentHeight}px)`; + // #endif + + // #ifdef APP-NVUE + weexAnimation.transition(this.$refs['zp-n-f2'], { + styles: { transform: `translateY(${-this.superContentHeight}px)` }, + duration: this.refresherF2Duration, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + // #endif + + u.delay(() => { + this.showF2 = false; + this.nF2Opacity = 0; + }, this.refresherF2Duration, 'f2CloseDelay') + }, + // 妯℃嫙鐢ㄦ埛鎵嬪姩瑙﹀彂涓嬫媺鍒锋柊 + _doRefresherRefreshAnimate() { + this._cleanRefresherCompleteTimeout(); + // 鐢ㄦ埛澶勭悊鐢ㄦ埛鍦ㄧ煭鏃堕棿鍐呭娆¤皟鐢╮eload鐨勬儏鍐碉紝姝ゆ椂涓嬫媺鍒锋柊view涓嶉渶瑕侀噸澶嶆樉绀猴紝鍙渶瑕佷繚璇佹渶鍚庝竴娆eload瀵瑰簲鐨勮姹傜粨鏉熷悗鏀跺洖涓嬫媺鍒锋柊view鍗冲彲 + // #ifndef APP-NVUE + const doRefreshAnimateAfter = !this.doRefreshAnimateAfter && (this.finalShowRefresherWhenReload) && this + .customRefresherHeight === -1 && this.refresherThreshold === u.addUnit(80, this.unit); + if (doRefreshAnimateAfter) { + this.doRefreshAnimateAfter = true; + return; + } + // #endif + this.refresherRevealStackCount ++; + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransform = `translateY(${this.finalRefresherThreshold}px)`; + // #endif + // #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.wxsPropType = 'begin' + u.getTime(); + // #endif + this.moveDis = this.finalRefresherThreshold; + this.refresherStatus = Enum.Refresher.Loading; + this.isTouchmoving = true; + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this._doRefresherLoad(false); + }, + // 瑙﹀彂涓嬫媺鍒锋柊 + _doRefresherLoad(isUserPullDown = true) { + this._onRefresh(false, isUserPullDown); + this.loading = true; + }, + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // 鑾峰彇澶勭悊鍚庣殑moveDis + _getFinalRefresherMoveDis(moveDis) { + let diffDis = moveDis - this.oldCurrentMoveDis; + this.oldCurrentMoveDis = moveDis; + if (diffDis > 0) { + // 鏍规嵁閰嶇疆鐨勪笅鎷夊埛鏂扮敤鎴锋墜鍔夸綅绉讳笌瀹為檯闇�瑕佺殑浣嶇Щ姣旂巼璁$畻鏈�缁堢殑diffDis + diffDis = diffDis * this.finalRefresherPullRate; + if (this.currentDis > this.finalRefresherThreshold) { + diffDis = diffDis * (1 - this.finalRefresherOutRate); + } + } + // 鎺у埗diffDis杩囧ぇ鐨勬儏鍐碉紝姣斿杩涘叆椤甸潰绐佺劧鐚涚劧涓嬫媺锛屾鏃禿iffDis涓嶅簲杩涜澶ぇ鐨勫亸绉� + diffDis = diffDis > 100 ? diffDis / 100 : diffDis; + this.currentDis += diffDis; + this.currentDis = Math.max(0, this.currentDis); + return this.currentDis; + }, + // 鍒ゆ柇touch鎵嬪娍鏄惁瑕佽Е鍙� + _touchDisabled() { + const checkOldScrollTop = this.oldScrollTop > 5; + return this.loading || this.isRefresherInComplete || this.useChatRecordMode || !this.refresherEnabled || !this.useCustomRefresher ||(this.usePageScroll && this.useCustomRefresher && this.pageScrollTop > 10) || (!(this.usePageScroll && this.useCustomRefresher) && checkOldScrollTop); + }, + // #endif + // 鏇存柊鑷畾涔変笅鎷夊埛鏂皏iew楂樺害 + _updateCustomRefresherHeight() { + this._getNodeClientRect('.zp-custom-refresher-slot-view').then((res) => { + this.customRefresherHeight = res ? res[0].height : 0; + this.showCustomRefresher = this.customRefresherHeight > 0; + if (this.doRefreshAnimateAfter) { + this.doRefreshAnimateAfter = false; + this._doRefresherRefreshAnimate(); + } + }); + }, + // emit pullingDown浜嬩欢 + _emitTouchmove(e) { + // #ifndef APP-NVUE + e.viewHeight = this.finalRefresherThreshold; + // #endif + e.rate = e.viewHeight > 0 ? e.pullingDistance / e.viewHeight : 0; + this.hasTouchmove && this.oldPullingDistance !== e.pullingDistance && this.$emit('refresherTouchmove', e); + this.oldPullingDistance = e.pullingDistance; + }, + // 娓呴櫎refresherCompleteTimeout + _cleanRefresherCompleteTimeout() { + this.refresherCompleteTimeout = this._cleanTimeout(this.refresherCompleteTimeout); + // #ifdef APP-NVUE + this._nRefresherEnd(false); + // #endif + }, + // 娓呴櫎refresherEndTimeout + _cleanRefresherEndTimeout() { + this.refresherEndTimeout = this._cleanTimeout(this.refresherEndTimeout); + }, + } +} diff --git a/src/components/z-paging/js/modules/scroller.js b/src/components/z-paging/js/modules/scroller.js new file mode 100644 index 0000000..17efce7 --- /dev/null +++ b/src/components/z-paging/js/modules/scroller.js @@ -0,0 +1,550 @@ +// [z-paging]scroll鐩稿叧妯″潡 +import u from '.././z-paging-utils' +import Enum from '.././z-paging-enum' + +// #ifdef APP-NVUE +const weexDom = weex.requireModule('dom'); +// #endif + +export default { + props: { + // 浣跨敤椤甸潰婊氬姩锛岄粯璁や负鍚︼紝褰撹缃负鏄椂鍒欎娇鐢ㄩ〉闈㈢殑婊氬姩鑰岄潪姝ょ粍浠跺唴閮ㄧ殑scroll-view鐨勬粴鍔紝浣跨敤椤甸潰婊氬姩鏃秡-paging鏃犻渶璁剧疆纭畾鐨勯珮搴︿笖瀵逛簬闀垮垪琛ㄥ睍绀烘�ц兘鏇撮珮锛屼絾閰嶇疆浼氱暐寰箒鐞� + usePageScroll: { + type: Boolean, + default: u.gc('usePageScroll', false) + }, + // 鏄惁鍙互婊氬姩锛屼娇鐢ㄥ唴缃畇croll-view鍜宯vue鏃舵湁鏁堬紝榛樿涓烘槸 + scrollable: { + type: Boolean, + default: u.gc('scrollable', true) + }, + // 鎺у埗鏄惁鍑虹幇婊氬姩鏉★紝榛樿涓烘槸 + showScrollbar: { + type: Boolean, + default: u.gc('showScrollbar', true) + }, + // 鏄惁鍏佽妯悜婊氬姩锛岄粯璁や负鍚� + scrollX: { + type: Boolean, + default: u.gc('scrollX', false) + }, + // iOS璁惧涓婃粴鍔ㄥ埌椤堕儴鏃舵槸鍚﹀厑璁稿洖寮规晥鏋滐紝榛樿涓哄惁銆傚叧闂洖寮规晥鏋滃悗鍙娇婊氬姩鍒伴《閮ㄤ笌涓嬫媺鍒锋柊鏇磋繛璐紝浣嗘槸鏈夊惛椤秜iew鏃舵粴鍔ㄥ埌椤堕儴鏃跺彲鑳藉嚭鐜版姈鍔ㄣ�� + scrollToTopBounceEnabled: { + type: Boolean, + default: u.gc('scrollToTopBounceEnabled', false) + }, + // iOS璁惧涓婃粴鍔ㄥ埌搴曢儴鏃舵槸鍚﹀厑璁稿洖寮规晥鏋滐紝榛樿涓烘槸銆� + scrollToBottomBounceEnabled: { + type: Boolean, + default: u.gc('scrollToBottomBounceEnabled', true) + }, + // 鍦ㄨ缃粴鍔ㄦ潯浣嶇疆鏃朵娇鐢ㄥ姩鐢昏繃娓★紝榛樿涓哄惁 + scrollWithAnimation: { + type: Boolean, + default: u.gc('scrollWithAnimation', false) + }, + // 鍊煎簲涓烘煇瀛愬厓绱爄d锛坕d涓嶈兘浠ユ暟瀛楀紑澶达級銆傝缃摢涓柟鍚戝彲婊氬姩锛屽垯鍦ㄥ摢涓柟鍚戞粴鍔ㄥ埌璇ュ厓绱� + scrollIntoView: { + type: String, + default: u.gc('scrollIntoView', '') + }, + }, + data() { + return { + scrollTop: 0, + oldScrollTop: 0, + scrollLeft: 0, + oldScrollLeft: 0, + scrollViewStyle: {}, + scrollViewContainerStyle: {}, + scrollViewInStyle: {}, + pageScrollTop: -1, + scrollEnable: true, + privateScrollWithAnimation: -1, + cacheScrollNodeHeight: -1, + superContentHeight: 0, + } + }, + watch: { + oldScrollTop(newVal) { + !this.usePageScroll && this._scrollTopChange(newVal,false); + }, + pageScrollTop(newVal) { + this.usePageScroll && this._scrollTopChange(newVal,true); + }, + usePageScroll: { + handler(newVal) { + this.loaded && this.autoHeight && this._setAutoHeight(!newVal); + // #ifdef H5 + if (newVal) { + this.$nextTick(() => { + const mainScrollRef = this.$refs['zp-scroll-view'].$refs.main; + if (mainScrollRef) { + mainScrollRef.style = {}; + } + }) + } + // #endif + }, + immediate: true + }, + finalScrollTop(newVal) { + this.renderPropScrollTop = newVal < 6 ? 0 : 10; + } + }, + computed: { + finalScrollWithAnimation() { + if (this.privateScrollWithAnimation !== -1) { + return this.privateScrollWithAnimation === 1; + } + return this.scrollWithAnimation; + }, + finalScrollViewStyle() { + if (this.superContentZIndex != 1) { + this.scrollViewStyle['z-index'] = this.superContentZIndex; + this.scrollViewStyle['position'] = 'relative'; + } + return this.scrollViewStyle; + }, + finalScrollTop() { + return this.usePageScroll ? this.pageScrollTop : this.oldScrollTop; + }, + // 褰撳墠鏄惁鏄棫鐗坵ebview + finalIsOldWebView() { + return this.isOldWebView && !this.usePageScroll; + }, + // 褰撳墠scroll-view/list-view鏄惁鍏佽婊氬姩 + finalScrollable() { + return this.scrollable && !this.usePageScroll && this.scrollEnable + && (this.refresherCompleteScrollable ? true : this.refresherStatus !== Enum.Refresher.Complete) + && (this.refresherRefreshingScrollable ? true : this.refresherStatus !== Enum.Refresher.Loading); + } + }, + methods: { + // 婊氬姩鍒伴《閮紝animate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓烘槸 + scrollToTop(animate, checkReverse = true) { + // 濡傛灉鏄亰澶╄褰曟ā寮忓苟涓斿垪琛ㄥ�掔疆浜嗭紝鍒欐粴鍔ㄥ埌椤堕儴瀹為檯涓婃槸婊氬姩鍒板簳閮� + if (this.useChatRecordMode && checkReverse && !this.isChatRecordModeAndNotInversion) { + this.scrollToBottom(animate, false); + return; + } + this.$nextTick(() => { + this._scrollToTop(animate, false); + // #ifdef APP-NVUE + if (this.nvueFastScroll && animate) { + u.delay(() => { + this._scrollToTop(false, false); + }); + } + // #endif + }) + }, + // 婊氬姩鍒板簳閮紝animate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓烘槸 + scrollToBottom(animate, checkReverse = true) { + // 濡傛灉鏄亰澶╄褰曟ā寮忓苟涓斿垪琛ㄥ�掔疆浜嗭紝鍒欐粴鍔ㄥ埌搴曢儴瀹為檯涓婃槸婊氬姩鍒伴《閮� + if (this.useChatRecordMode && checkReverse && !this.isChatRecordModeAndNotInversion) { + this.scrollToTop(animate, false); + return; + } + this.$nextTick(() => { + this._scrollToBottom(animate); + // #ifdef APP-NVUE + if (this.nvueFastScroll && animate) { + u.delay(() => { + this._scrollToBottom(false); + }); + } + // #endif + }) + }, + // 婊氬姩鍒版寚瀹歷iew(vue涓湁鏁�)銆俿el涓洪渶瑕佹粴鍔ㄧ殑view鐨刬d鍊硷紝涓嶅寘鍚�"#"锛沷ffset涓哄亸绉婚噺锛屽崟浣嶄负px锛沘nimate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓哄惁 + scrollIntoViewById(sel, offset, animate) { + this._scrollIntoView(sel, offset, animate); + }, + // 婊氬姩鍒版寚瀹歷iew(vue涓湁鏁�)銆俷odeTop涓洪渶瑕佹粴鍔ㄧ殑view鐨則op鍊�(閫氳繃uni.createSelectorQuery()鑾峰彇)锛沷ffset涓哄亸绉婚噺锛屽崟浣嶄负px锛沘nimate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓哄惁 + scrollIntoViewByNodeTop(nodeTop, offset, animate) { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this._scrollIntoViewByNodeTop(nodeTop, offset, animate); + }) + }, + // y杞存粴鍔ㄥ埌鎸囧畾浣嶇疆(vue涓湁鏁�)銆倅涓轰笌椤堕儴鐨勮窛绂伙紝鍗曚綅涓簆x锛沷ffset涓哄亸绉婚噺锛屽崟浣嶄负px锛沘nimate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓哄惁 + scrollToY(y, offset, animate) { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this._scrollToY(y, offset, animate); + }) + }, + // x杞存粴鍔ㄥ埌鎸囧畾浣嶇疆(闈為〉闈㈡粴鍔ㄤ笖鍦╲ue涓湁鏁�)銆倄涓轰笌宸︿晶鐨勮窛绂伙紝鍗曚綅涓簆x锛沷ffset涓哄亸绉婚噺锛屽崟浣嶄负px锛沘nimate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓哄惁 + scrollToX(x, offset, animate) { + this.scrollLeft = this.oldScrollLeft; + this.$nextTick(() => { + this._scrollToX(x, offset, animate); + }) + }, + // 婊氬姩鍒版寚瀹歷iew(nvue涓拰铏氭嫙鍒楄〃涓湁鏁�)銆俰ndex涓洪渶瑕佹粴鍔ㄧ殑view鐨刬ndex(绗嚑涓紝浠�0寮�濮�)锛沷ffset涓哄亸绉婚噺锛屽崟浣嶄负px锛沘nimate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓哄惁 + scrollIntoViewByIndex(index, offset, animate) { + if (index >= this.realTotalData.length) { + u.consoleErr('褰撳墠婊氬姩鐨刬ndex瓒呭嚭宸叉覆鏌撳垪琛ㄩ暱搴︼紝璇峰厛閫氳繃refreshToPage鍔犺浇鍒板搴攊ndex椤靛苟绛夊緟娓叉煋鎴愬姛鍚庡啀璋冪敤姝ゆ柟娉曪紒'); + return; + } + this.$nextTick(() => { + // #ifdef APP-NVUE + // 鍦╪vue涓紝鏍规嵁index鑾峰彇瀵瑰簲鑺傜偣淇℃伅骞舵粴鍔ㄥ埌姝よ妭鐐逛綅缃� + this._scrollIntoView(index, offset, animate); + // #endif + // #ifndef APP-NVUE + if (this.finalUseVirtualList) { + const isCellFixed = this.cellHeightMode === Enum.CellHeightMode.Fixed; + u.delay(() => { + if (this.finalUseVirtualList) { + // 铏氭嫙鍒楄〃 + 姣忎釜cell楂樺害瀹屽叏鐩稿悓妯″紡涓嬶紝姝ゆ椂婊氬姩鍒板搴攊ndex鐨刢ell灏辨槸婊氬姩鍒皊crollTop = cellHeight * index鐨勪綅缃� + // 铏氭嫙鍒楄〃 + 楂樺害鏄姩鎬侀潪鍥哄畾鐨勬ā寮忎笅锛屾鏃舵粴鍔ㄥ埌瀵瑰簲index鐨刢ell灏辨槸婊氬姩鍒皊crollTop = 缂撳瓨鐨刢ell楂樺害鏁扮粍涓index涓殑lastTotalHeight鐨勪綅缃� + const scrollTop = isCellFixed ? this.virtualCellHeight * index : this.virtualHeightCacheList[index].lastTotalHeight; + this.scrollToY(scrollTop, offset, animate); + } + }, isCellFixed ? 0 : 100) + } + // #endif + }) + }, + // 婊氬姩鍒版寚瀹歷iew(nvue涓湁鏁�)銆倂iew涓洪渶瑕佹粴鍔ㄧ殑view(閫氳繃`this.$refs.xxx`鑾峰彇)锛屼笉鍖呭惈"#"锛沷ffset涓哄亸绉婚噺锛屽崟浣嶄负px锛沘nimate涓烘槸鍚﹀睍绀烘粴鍔ㄥ姩鐢伙紝榛樿涓哄惁 + scrollIntoViewByView(view, offset, animate) { + this._scrollIntoView(view, offset, animate); + }, + // 褰撲娇鐢ㄩ〉闈㈡粴鍔ㄥ苟涓旇嚜瀹氫箟涓嬫媺鍒锋柊鏃讹紝璇峰湪椤甸潰鐨刼nPageScroll涓皟鐢ㄦ鏂规硶锛屽憡鐭-paging褰撳墠鐨刾ageScrollTop锛屽惁鍒欎細瀵艰嚧鍦ㄤ换鎰忎綅缃兘鍙互涓嬫媺鍒锋柊 + updatePageScrollTop(value) { + this.pageScrollTop = value; + }, + // 褰撲娇鐢ㄩ〉闈㈡粴鍔ㄥ苟涓旇缃簡slot="top"鏃讹紝榛樿鍒濇鍔犺浇浼氳嚜鍔ㄨ幏鍙栧叾楂樺害锛屽苟浣垮唴閮ㄥ鍣ㄤ笅绉伙紝褰搒lot="top"鐨剉iew楂樺害鍔ㄦ�佹敼鍙樻椂锛屽湪鍏堕珮搴﹂渶瑕佹洿鏂版椂璋冪敤姝ゆ柟娉� + updatePageScrollTopHeight() { + this._updatePageScrollTopOrBottomHeight('top'); + }, + // 褰撲娇鐢ㄩ〉闈㈡粴鍔ㄥ苟涓旇缃簡slot="bottom"鏃讹紝榛樿鍒濇鍔犺浇浼氳嚜鍔ㄨ幏鍙栧叾楂樺害锛屽苟浣垮唴閮ㄥ鍣ㄤ笅绉伙紝褰搒lot="bottom"鐨剉iew楂樺害鍔ㄦ�佹敼鍙樻椂锛屽湪鍏堕珮搴﹂渶瑕佹洿鏂版椂璋冪敤姝ゆ柟娉� + updatePageScrollBottomHeight() { + this._updatePageScrollTopOrBottomHeight('bottom'); + }, + // 鏇存柊slot="left"鍜宻lot="right"瀹藉害锛屽綋slot="left"鎴杝lot="right"瀹藉害鍔ㄦ�佹敼鍙樻椂璋冪敤 + updateLeftAndRightWidth() { + if (!this.finalIsOldWebView) return; + this.$nextTick(() => this._updateLeftAndRightWidth(this.scrollViewContainerStyle, 'zp-page')); + }, + // 鏇存柊z-paging鍐呯疆scroll-view鐨剆crollTop + updateScrollViewScrollTop(scrollTop, animate = true) { + this._updatePrivateScrollWithAnimation(animate); + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this.scrollTop = scrollTop; + this.oldScrollTop = this.scrollTop; + }); + }, + + // 褰撴粴鍔ㄥ埌椤堕儴鏃� + _onScrollToUpper() { + this._emitScrollEvent('scrolltoupper'); + this.$emit('scrollTopChange', 0); + this.$nextTick(() => { + this.oldScrollTop = 0; + }) + }, + // 褰撴粴鍔ㄥ埌搴曢儴鏃� + _onScrollToLower(e) { + (!e.detail || !e.detail.direction || e.detail.direction === 'bottom') + && this.toBottomLoadingMoreEnabled + && this._onLoadingMore(this.useChatRecordMode ? 'click' : 'toBottom') + }, + // 婊氬姩鍒伴《閮� + _scrollToTop(animate = true, isPrivate = true) { + // #ifdef APP-NVUE + // 鍦╪vue涓渶瑕侀�氳繃weex.scrollToElement婊氬姩鍒伴《閮紝姝ゆ椂鍦ㄩ《閮ㄦ彃鍏ヤ簡涓�涓獀iew锛屼娇寰楁粴鍔ㄥ埌杩欎釜view浣嶇疆 + const el = this.$refs['zp-n-list-top-tag']; + if (this.usePageScroll) { + this._getNodeClientRect('zp-page-scroll-top', false).then(node => { + const nodeHeight = node ? node[0].height : 0; + weexDom.scrollToElement(el, { + offset: -nodeHeight, + animated: animate + }); + }); + } else { + if (!this.isIos && this.nvueListIs === 'scroller') { + this._getNodeClientRect('zp-n-refresh-container', false).then(node => { + const nodeHeight = node ? node[0].height : 0; + weexDom.scrollToElement(el, { + offset: -nodeHeight, + animated: animate + }); + }); + } else { + weexDom.scrollToElement(el, { + offset: 0, + animated: animate + }); + } + } + return; + // #endif + if (this.usePageScroll) { + this.$nextTick(() => { + uni.pageScrollTo({ + scrollTop: 0, + duration: animate ? 100 : 0, + }); + }); + return; + } + this._updatePrivateScrollWithAnimation(animate); + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this.scrollTop = 0; + this.oldScrollTop = this.scrollTop; + }); + }, + // 婊氬姩鍒板簳閮� + async _scrollToBottom(animate = true) { + // #ifdef APP-NVUE + // 鍦╪vue涓渶瑕侀�氳繃weex.scrollToElement婊氬姩鍒伴《閮紝姝ゆ椂鍦ㄥ簳閮ㄦ彃鍏ヤ簡涓�涓獀iew锛屼娇寰楁粴鍔ㄥ埌杩欎釜view浣嶇疆 + const el = this.$refs['zp-n-list-bottom-tag']; + if (el) { + weexDom.scrollToElement(el, { + offset: 0, + animated: animate + }); + } else { + u.consoleErr('婊氬姩鍒板簳閮ㄥけ璐ワ紝鍥犱负鎮ㄨ缃簡hideNvueBottomTag涓簍rue'); + } + return; + // #endif + if (this.usePageScroll) { + this.$nextTick(() => { + uni.pageScrollTo({ + scrollTop: Number.MAX_VALUE, + duration: animate ? 100 : 0, + }); + }); + return; + } + try { + this._updatePrivateScrollWithAnimation(animate); + const pagingContainerNode = await this._getNodeClientRect('.zp-paging-container'); + const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view'); + const pagingContainerH = pagingContainerNode ? pagingContainerNode[0].height : 0; + const scrollViewH = scrollViewNode ? scrollViewNode[0].height : 0; + if (pagingContainerH > scrollViewH) { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this.scrollTop = pagingContainerH - scrollViewH + this.virtualPlaceholderTopHeight; + this.oldScrollTop = this.scrollTop; + }); + } + } catch (e) {} + }, + // 婊氬姩鍒版寚瀹歷iew + _scrollIntoView(sel, offset = 0, animate = false, finishCallback) { + try { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + // #ifdef APP-NVUE + const refs = this.$parent.$refs; + if (!refs) return; + const dataType = Object.prototype.toString.call(sel); + let el = null; + if (dataType === '[object Number]') { + const els = refs[`z-paging-${sel}`]; + el = els ? els[0] : null; + } else if (dataType === '[object Array]') { + el = sel[0]; + } else { + el = sel; + } + if (el) { + weexDom.scrollToElement(el, { + offset: -offset, + animated: animate + }); + } else { + u.consoleErr('鍦╪vue涓粴鍔ㄥ埌鎸囧畾浣嶇疆锛宑ell蹇呴』璁剧疆 :ref="`z-paging-${index}`"'); + } + return; + // #endif + this._getNodeClientRect('#' + sel.replace('#', ''), this.$parent).then((node) => { + if (node) { + let nodeTop = node[0].top; + this._scrollIntoViewByNodeTop(nodeTop, offset, animate); + finishCallback && finishCallback(); + } + }); + }); + } catch (e) {} + }, + // 閫氳繃nodeTop婊氬姩鍒版寚瀹歷iew + _scrollIntoViewByNodeTop(nodeTop, offset = 0, animate = false) { + // 濡傛灉鏄亰澶╄褰曟ā寮忓苟涓斿垪琛ㄥ�掔疆浜嗭紝姝ゆ椂nodeTop闇�瑕佺瓑浜巗croll-view楂樺害 - nodeTop + if (this.isChatRecordModeAndInversion) { + this._getNodeClientRect('.zp-scroll-view').then(sNode => { + if (sNode) { + this._scrollToY(sNode[0].height - nodeTop, offset, animate, true); + } + }) + } else { + this._scrollToY(nodeTop, offset, animate, true); + } + }, + // y杞存粴鍔ㄥ埌鎸囧畾浣嶇疆 + _scrollToY(y, offset = 0, animate = false, addScrollTop = false) { + this._updatePrivateScrollWithAnimation(animate); + u.delay(() => { + if (this.usePageScroll) { + if (addScrollTop && this.pageScrollTop !== -1) { + y += this.pageScrollTop; + } + const scrollTop = y - offset; + uni.pageScrollTo({ + scrollTop, + duration: animate ? 100 : 0 + }); + } else { + if (addScrollTop) { + y += this.oldScrollTop; + } + this.scrollTop = y - offset; + } + }, 10) + }, + // x杞存粴鍔ㄥ埌鎸囧畾浣嶇疆 + _scrollToX(x, offset = 0, animate = false) { + this._updatePrivateScrollWithAnimation(animate); + u.delay(() => { + if (!this.usePageScroll) { + this.scrollLeft = x - offset; + } else { + u.consoleErr('浣跨敤椤甸潰婊氬姩鏃朵笉鏀寔scrollToX'); + } + }, 10) + }, + // scroll-view婊氬姩涓� + _scroll(e) { + this.$emit('scroll', e); + const { scrollTop, scrollLeft } = e.detail; + // #ifndef APP-NVUE + this.finalUseVirtualList && this._updateVirtualScroll(scrollTop, this.oldScrollTop - scrollTop); + // #endif + this.oldScrollTop = scrollTop; + this.oldScrollLeft = scrollLeft; + // 婊氬姩鍖哄煙鍐呭鐨勬�婚珮搴� - 褰撳墠婊氬姩鐨剆crollTop = 褰撳墠婊氬姩鍖哄煙鐨勯《閮ㄤ笌鍐呭搴曢儴鐨勮窛绂� + const scrollDiff = e.detail.scrollHeight - this.oldScrollTop; + // 鍦ㄩ潪ios骞冲彴婊氬姩涓紝鍐嶆楠岃瘉涓�涓嬫槸鍚︽粴鍔ㄥ埌浜嗗簳閮ㄣ�傚洜涓哄湪涓�浜涘畨鍗撹澶囦腑锛屾湁姒傜巼婊氬姩鍒板簳閮ㄤ笉瑙﹀彂@scrolltolower浜嬩欢锛屽洜姝ゆ坊鍔犲弻閲嶆娴嬮�昏緫 + !this.isIos && this._checkScrolledToBottom(scrollDiff); + }, + // emit scrolltolower/scrolltoupper浜嬩欢 + _emitScrollEvent(type) { + const reversedType = type === 'scrolltolower' ? 'scrolltoupper' : 'scrolltolower'; + const eventType = this.useChatRecordMode && !this.isChatRecordModeAndNotInversion + ? reversedType + : type; + + this.$emit(eventType); + }, + // 鏇存柊鍐呯疆鐨剆croll-view鏄惁鍚敤婊氬姩鍔ㄧ敾 + _updatePrivateScrollWithAnimation(animate) { + this.privateScrollWithAnimation = animate ? 1 : 0; + u.delay(() => this.$nextTick(() => { + // 鍦ㄦ粴鍔ㄧ粨鏉熷悗灏嗘粴鍔ㄥ姩鐢荤姸鎬佽缃洖鍒濆鐘舵�� + this.privateScrollWithAnimation = -1; + }), 100, 'updateScrollWithAnimationDelay') + }, + // 妫�娴媠crollView鏄惁瑕侀摵婊″睆骞� + _doCheckScrollViewShouldFullHeight(totalData) { + if (this.autoFullHeight && this.usePageScroll && this.isTotalChangeFromAddData) { + // #ifndef APP-NVUE + this.$nextTick(() => { + this._checkScrollViewShouldFullHeight((scrollViewNode, pagingContainerNode) => { + this._preCheckShowNoMoreInside(totalData, scrollViewNode, pagingContainerNode) + }); + }) + // #endif + // #ifdef APP-NVUE + this._preCheckShowNoMoreInside(totalData) + // #endif + } else { + this._preCheckShowNoMoreInside(totalData) + } + }, + // 妫�娴媧-paging鏄惁瑕佸叏灞忚鐩�(褰撲娇鐢ㄩ〉闈㈡粴鍔ㄥ苟涓斾笉婊″叏灞忔椂锛岄粯璁-paging闇�瑕侀摵婊″叏灞忥紝閬垮厤鏁版嵁杩囧皯鏃跺唴閮ㄧ殑empty-view鏃犳硶姝g‘灞曠ず) + async _checkScrollViewShouldFullHeight(callback) { + try { + const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view'); + const pagingContainerNode = await this._getNodeClientRect('.zp-paging-container-content'); + if (!scrollViewNode || !pagingContainerNode) return; + const scrollViewHeight = pagingContainerNode[0].height; + const scrollViewTop = scrollViewNode[0].top; + if (this.isAddedData && scrollViewHeight + scrollViewTop <= this.windowHeight) { + this._setAutoHeight(true, scrollViewNode); + callback(scrollViewNode, pagingContainerNode); + } else { + this._setAutoHeight(false); + callback(null, null); + } + } catch (e) { + callback(null, null); + } + }, + // 鏇存柊缂撳瓨涓瓃-paging鏁翠釜鍐呭瀹瑰櫒楂樺害 + async _updateCachedSuperContentHeight() { + const superContentNode = await this._getNodeClientRect('.z-paging-content'); + if (superContentNode) { + this.superContentHeight = superContentNode[0].height; + } + }, + // scrollTop鏀瑰彉鏃惰Е鍙� + _scrollTopChange(newVal, isPageScrollTop){ + this.$emit('scrollTopChange', newVal); + this.$emit('update:scrollTop', newVal); + this._checkShouldShowBackToTop(newVal); + // 涔嬪墠鍦ㄥ畨鍗撲腑scroll-view鏈夋鐜囨粴鍔ㄥ埌椤堕儴鏃秙crollTop涓嶄负0瀵艰嚧涓嬫媺鍒锋柊鍒ゆ柇寮傚父锛屽洜姝ゅ垽鏂璼crollTop鍦�105涔嬪唴閮藉厑璁镐笅鎷夊埛鏂帮紝浣嗘鏂规浼氬鑷存煇浜涙儏鍐碉紙渚嬪婊氬姩鍒拌窛绂婚《閮�10px澶勶級涓嬫媺鎶栧姩锛屽洜姝ゆ敼涓洪�氳繃鑾峰彇zp-scroll-view鐨勮妭鐐逛俊鎭腑鐨剆crollTop杩涜楠岃瘉鐨勬柟妗� + // const scrollTop = this.isIos ? (newVal > 5 ? 6 : 0) : (newVal > 105 ? 106 : (newVal > 5 ? 6 : 0)); + const scrollTop = newVal > 5 ? 6 : 0; + if (isPageScrollTop && this.wxsPageScrollTop !== scrollTop) { + this.wxsPageScrollTop = scrollTop; + } else if (!isPageScrollTop && this.wxsScrollTop !== scrollTop) { + this.wxsScrollTop = scrollTop; + if (scrollTop > 6) { + this.scrollEnable = true; + } + } + }, + // 鏇存柊浣跨敤椤甸潰婊氬姩鏃秙lot="top"鎴�"bottom"鎻掑叆view鐨勯珮搴� + _updatePageScrollTopOrBottomHeight(type) { + // #ifndef APP-NVUE + if (!this.usePageScroll) return; + // #endif + this._doCheckScrollViewShouldFullHeight(this.realTotalData); + const node = `.zp-page-${type}`; + const marginText = `margin${type.slice(0,1).toUpperCase() + type.slice(1)}`; + let safeAreaInsetBottomAdd = this.safeAreaInsetBottom; + this.$nextTick(() => { + let delayTime = 0; + // #ifdef MP-BAIDU || APP-NVUE + delayTime = 50; + // #endif + u.delay(() => { + this._getNodeClientRect(node).then((res) => { + if (res) { + let pageScrollNodeHeight = res[0].height; + if (type === 'bottom') { + if (safeAreaInsetBottomAdd) { + pageScrollNodeHeight += this.safeAreaBottom; + } + } else { + this.cacheTopHeight = pageScrollNodeHeight; + } + this.$set(this.scrollViewStyle, marginText, `${pageScrollNodeHeight}px`); + } else if (safeAreaInsetBottomAdd) { + this.$set(this.scrollViewStyle, marginText, `${this.safeAreaBottom}px`); + } + }); + }, delayTime) + }) + }, + } +} diff --git a/src/components/z-paging/js/modules/virtual-list.js b/src/components/z-paging/js/modules/virtual-list.js new file mode 100644 index 0000000..cc95015 --- /dev/null +++ b/src/components/z-paging/js/modules/virtual-list.js @@ -0,0 +1,555 @@ +// [z-paging]铏氭嫙鍒楄〃妯″潡 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' + +export default { + props: { + // 鏄惁浣跨敤铏氭嫙鍒楄〃锛岄粯璁や负鍚� + useVirtualList: { + type: Boolean, + default: u.gc('useVirtualList', false) + }, + // 鍦ㄤ娇鐢ㄨ櫄鎷熷垪琛ㄦ椂锛屾槸鍚︿娇鐢ㄥ吋瀹规ā寮忥紝榛樿涓哄惁 + useCompatibilityMode: { + type: Boolean, + default: u.gc('useCompatibilityMode', false) + }, + // 浣跨敤鍏煎妯″紡鏃朵紶閫掔殑闄勫姞鏁版嵁 + extraData: { + type: Object, + default: u.gc('extraData', {}) + }, + // 鏄惁鍦▃-paging鍐呴儴寰幆娓叉煋鍒楄〃(鍐呯疆鍒楄〃)锛岄粯璁や负鍚︺�傝嫢use-virtual-list涓簍rue锛屽垯姝ら」鎭掍负true + useInnerList: { + type: Boolean, + default: u.gc('useInnerList', false) + }, + // 寮哄埗鍏抽棴inner-list锛岄粯璁や负false锛屽鏋滀负true灏嗗己鍒跺叧闂璱nnerList锛岄�傜敤浜庡紑鍚簡铏氭嫙鍒楄〃鍚庨渶瑕佸己鍒跺叧闂璱nner-list鐨勬儏鍐� + forceCloseInnerList: { + type: Boolean, + default: u.gc('forceCloseInnerList', false) + }, + // 鍐呯疆鍒楄〃cell鐨刱ey鍚嶇О锛屼粎nvue鏈夋晥锛屽湪nvue涓紑鍚痷se-inner-list鏃跺繀椤诲~姝ら」 + cellKeyName: { + type: String, + default: u.gc('cellKeyName', '') + }, + // innerList鏍峰紡 + innerListStyle: { + type: Object, + default: u.gc('innerListStyle', {}) + }, + // innerCell鏍峰紡 + innerCellStyle: { + type: Object, + default: u.gc('innerCellStyle', {}) + }, + // 棰勫姞杞界殑鍒楄〃鍙鑼冨洿(鍒楄〃楂樺害)椤垫暟锛岄粯璁や负12锛屽嵆棰勫姞杞藉綋鍓嶉〉鍙婁笂涓嬪悇12椤电殑cell銆傛鏁板�艰秺澶э紝鍒欒櫄鎷熷垪琛ㄤ腑鍔犺浇鐨刣om瓒婂锛屽唴瀛樻秷鑰楄秺澶�(浼氱淮鎸佸湪涓�涓ǔ瀹氬��)锛屼絾澧炲姞棰勫姞杞介〉闈㈡暟閲忓彲缂撹В蹇�熸粴鍔ㄧ煭鏆傜櫧灞忛棶棰� + preloadPage: { + type: [Number, String], + default: u.gc('preloadPage', 12), + validator: (value) => { + if (value <= 0) u.consoleErr('preload-page蹇呴』澶т簬0锛�'); + return value > 0; + } + }, + // 铏氭嫙鍒楄〃cell楂樺害妯″紡锛岄粯璁や负fixed锛屼篃灏辨槸姣忎釜cell楂樺害瀹屽叏鐩稿悓锛屽皢浠ョ涓�涓猚ell楂樺害涓哄噯杩涜璁$畻銆傚彲閫夊�笺�恉ynamic銆戯紝鍗充唬琛ㄩ珮搴︽槸鍔ㄦ�侀潪鍥哄畾鐨勶紝銆恉ynamic銆戞�ц兘浣庝簬銆恌ixed銆戙�� + cellHeightMode: { + type: String, + default: u.gc('cellHeightMode', Enum.CellHeightMode.Fixed) + }, + // 鍥哄畾鐨刢ell楂樺害锛宑ellHeightMode=fixed鎵嶆湁鏁堬紝鑻ヨ缃簡鍊硷紝鍒欎笉璁$畻绗竴涓猚ell楂樺害鑰屼娇鐢ㄨ缃殑cell楂樺害 + fixedCellHeight: { + type: [Number, String], + default: u.gc('fixedCellHeight', 0) + }, + // 铏氭嫙鍒楄〃鍒楁暟锛岄粯璁や负1銆傚父鐢ㄤ簬姣忚鏈夊鍒楃殑鎯呭喌锛屼緥濡傛瘡琛屾湁2鍒楁暟鎹紝闇�瑕佸皢姝ゅ�艰缃负2 + virtualListCol: { + type: [Number, String], + default: u.gc('virtualListCol', 1) + }, + // 铏氭嫙鍒楄〃scroll鍙栨牱甯х巼锛岄粯璁や负80锛岃繃浣庡鏄撳嚭鐜扮櫧灞忛棶棰橈紝杩囬珮瀹规槗鍑虹幇鍗¢】闂 + virtualScrollFps: { + type: [Number, String], + default: u.gc('virtualScrollFps', 80) + }, + // 铏氭嫙鍒楄〃cell id鐨勫墠缂�锛岄�傜敤浜庝竴涓〉闈㈡湁澶氫釜铏氭嫙鍒楄〃鐨勬儏鍐碉紝鐢ㄤ互鍖哄垎涓嶅悓铏氭嫙鍒楄〃cell鐨刬d锛屾敞鎰忥細璇峰嬁浼犳暟瀛楁垨浠ユ暟瀛楀紑澶寸殑瀛楃涓层�傚璁剧疆涓簂ist1锛屽垯cell鐨刬d搴斾负锛歭ist1-zp-id-${item.zp_index} + virtualCellIdPrefix: { + type: String, + default: u.gc('virtualCellIdPrefix', '') + }, + // 铏氭嫙鍒楄〃鏄惁浣跨敤swiper-item鍖呰9锛岄粯璁や负鍚︼紝姝ゅ睘鎬т负浜嗚В鍐硋ue3+(寰俊灏忕▼搴忔垨QQ灏忕▼搴�)涓紝浣跨敤闈炲唴缃垪琛ㄥ啓娉曟椂锛岃嫢z-paging鍦╯wiper-item鍐呭瓨鍦ㄦ棤娉曡幏鍙杝lot鎻掑叆鐨刢ell楂樺害杩涜�屽鑷磋櫄鎷熷垪琛ㄥけ璐ョ殑闂 + // 浠卾ue3+(寰俊灏忕▼搴忔垨QQ灏忕▼搴�)+闈炲唴缃垪琛ㄥ啓娉曡櫄鎷熷垪琛ㄦ湁鏁堬紝鍏朵粬鎯呭喌姝ゅ睘鎬ц缃换浣曞�奸兘鏃犳晥锛屾墍浠ュ鏋滄偍鍦╯wiper-item鍐呬娇鐢▃-paging鐨勯潪鍐呯疆铏氭嫙鍒楄〃鍐欐硶锛屽皢姝ゅ睘鎬ц缃负true鍗冲彲 + virtualInSwiperSlot: { + type: Boolean, + default: false + }, + }, + data() { + return { + virtualListKey: u.getInstanceId(), + virtualPageHeight: 0, + virtualCellHeight: 0, + virtualScrollTimeStamp: 0, + + virtualList: [], + virtualPlaceholderTopHeight: 0, + virtualPlaceholderBottomHeight: 0, + virtualTopRangeIndex: 0, + virtualBottomRangeIndex: 0, + lastVirtualTopRangeIndex: 0, + lastVirtualBottomRangeIndex: 0, + virtualItemInsertedCount: 0, + + virtualHeightCacheList: [], + + getCellHeightRetryCount: { + fixed: 0, + dynamic: 0 + }, + pagingOrgTop: -1, + updateVirtualListFromDataChange: false + } + }, + watch: { + // 鐩戝惉鎬绘暟鎹殑鏀瑰彉锛屽埛鏂拌櫄鎷熷垪琛ㄥ竷灞� + realTotalData() { + this.updateVirtualListRender(); + }, + // 鐩戝惉铏氭嫙鍒楄〃娓叉煋鏁扮粍鐨勬敼鍙樺苟emit + virtualList(newVal){ + this.$emit('update:virtualList', newVal); + this.$emit('virtualListChange', newVal); + }, + // 鐩戝惉铏氭嫙鍒楄〃椤堕儴鍗犱綅楂樺害鏀瑰彉骞秂mit + virtualPlaceholderTopHeight(newVal) { + this.$emit('virtualTopHeightChange', newVal); + } + }, + computed: { + virtualCellIndexKey() { + return c.listCellIndexKey; + }, + finalUseVirtualList() { + if (this.useVirtualList && this.usePageScroll){ + u.consoleErr('浣跨敤椤甸潰婊氬姩鏃讹紝寮�鍚櫄鎷熷垪琛ㄦ棤鏁堬紒'); + } + return this.useVirtualList && !this.usePageScroll; + }, + finalUseInnerList() { + return this.useInnerList || (this.finalUseVirtualList && !this.forceCloseInnerList); + }, + finalCellKeyName() { + // #ifdef APP-NVUE + if (this.finalUseVirtualList && !this.cellKeyName.length){ + u.consoleErr('鍦╪vue涓紑鍚痷se-virtual-list蹇呴』璁剧疆cell-key-name锛屽惁鍒欏皢鍙兘瀵艰嚧鍒楄〃娓叉煋閿欒锛�'); + } + // #endif + return this.cellKeyName; + }, + finalVirtualPageHeight(){ + return this.virtualPageHeight > 0 ? this.virtualPageHeight : this.windowHeight; + }, + finalFixedCellHeight() { + return u.convertToPx(this.fixedCellHeight); + }, + fianlVirtualCellIdPrefix() { + const prefix = this.virtualCellIdPrefix ? this.virtualCellIdPrefix + '-' : ''; + return prefix + 'zp-id'; + }, + finalPlaceholderTopHeightStyle() { + // #ifdef VUE2 + return { transform: this.virtualPlaceholderTopHeight > 0 ? `translateY(${this.virtualPlaceholderTopHeight}px)` : 'none' }; + // #endif + return {}; + }, + virtualRangePageHeight(){ + return this.finalVirtualPageHeight * this.preloadPage; + }, + virtualScrollDisTimeStamp() { + return 1000 / this.virtualScrollFps; + } + }, + methods: { + // 鍦ㄤ娇鐢ㄥ姩鎬侀珮搴﹁櫄鎷熷垪琛ㄦ椂锛岃嫢鍦ㄥ垪琛ㄦ暟缁勪腑闇�瑕佹彃鍏ユ煇涓猧tem锛岄渶瑕佽皟鐢ㄦ鏂规硶锛沬tem:闇�瑕佹彃鍏ョ殑item锛宨ndex:鎻掑叆鐨刢ell浣嶇疆锛岃嫢index涓�2锛屽垯鎻掑叆鐨刬tem鍦ㄥ師list鐨刬ndex=1涔嬪悗锛宨ndex浠�0寮�濮� + doInsertVirtualListItem(item, index) { + if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return; + this.realTotalData.splice(index, 0, item); + // #ifdef VUE3 + this.realTotalData = [...this.realTotalData]; + // #endif + this.virtualItemInsertedCount ++; + if (!item || Object.prototype.toString.call(item) !== '[object Object]') { + item = { item }; + } + const cellIndexKey = this.virtualCellIndexKey; + item[cellIndexKey] = `custom-${this.virtualItemInsertedCount}`; + item[c.listCellIndexUniqueKey] = `${this.virtualListKey}-${item[cellIndexKey]}`; + this.$nextTick(async () => { + let retryCount = 0; + while (retryCount <= 10) { + await u.wait(c.delayTime); + + const cellNode = await this._getVirtualCellNodeByIndex(item[cellIndexKey]); + // 濡傛灉鑾峰彇褰撳墠cell鐨勮妭鐐逛俊鎭け璐ワ紝鍒欓噸璇曪紙涓嶈秴杩�10娆★級 + if (!cellNode) { + retryCount ++; + continue; + } + + const currentHeight = cellNode ? cellNode[0].height : 0; + const lastHeightCache = this.virtualHeightCacheList[index - 1]; + const lastTotalHeight = lastHeightCache ? lastHeightCache.totalHeight : 0; + // 鍦ㄧ紦瀛樼殑cell楂樺害鏁扮粍涓紝鎻掑叆姝ell楂樺害淇℃伅 + this.virtualHeightCacheList.splice(index, 0, { + height: currentHeight, + lastTotalHeight, + totalHeight: lastTotalHeight + currentHeight + }); + + // 浠庡綋鍓峣ndex璧峰悗缁殑cell缂撳瓨楂樺害鐨刲astTotalHeight鍜宼otalHeight闇�瑕佸姞涓婂綋鍓峜ell鐨勯珮搴� + for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) { + const thisNode = this.virtualHeightCacheList[i]; + thisNode.lastTotalHeight += currentHeight; + thisNode.totalHeight += currentHeight; + } + + this._updateVirtualScroll(this.oldScrollTop); + break; + } + }) + }, + // 鍦ㄤ娇鐢ㄥ姩鎬侀珮搴﹁櫄鎷熷垪琛ㄦ椂锛屾墜鍔ㄦ洿鏂版寚瀹歝ell鐨勭紦瀛橀珮搴�(褰揷ell楂樺害鍦ㄥ垵濮嬪寲涔嬪悗鍐嶆鏀瑰彉鍚庤皟鐢�)锛沬ndex:闇�瑕佹洿鏂扮殑cell鍦ㄥ垪琛ㄤ腑鐨勪綅缃紝浠�0寮�濮� + didUpdateVirtualListCell(index) { + if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return; + const currentNode = this.virtualHeightCacheList[index]; + this.$nextTick(() => { + this._getVirtualCellNodeByIndex(index).then(cellNode => { + // 鏇存柊褰撳墠cell鐨勯珮搴� + const cellNodeHeight = cellNode ? cellNode[0].height : 0; + const heightDis = cellNodeHeight - currentNode.height; + currentNode.height = cellNodeHeight; + currentNode.totalHeight = currentNode.lastTotalHeight + cellNodeHeight; + + // 浠庡綋鍓峣ndex璧峰悗缁殑cell缂撳瓨楂樺害鐨刲astTotalHeight鍜宼otalHeight闇�瑕佸姞涓婂綋鍓峜ell鍙樺寲鐨勯珮搴� + for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) { + const thisNode = this.virtualHeightCacheList[i]; + thisNode.totalHeight += heightDis; + thisNode.lastTotalHeight += heightDis; + } + }); + }) + }, + // 鍦ㄤ娇鐢ㄥ姩鎬侀珮搴﹁櫄鎷熷垪琛ㄦ椂锛岃嫢鍒犻櫎浜嗗垪琛ㄦ暟缁勪腑鐨勬煇涓猧tem锛岄渶瑕佽皟鐢ㄦ鏂规硶浠ユ洿鏂伴珮搴︾紦瀛樻暟缁勶紱index:鍒犻櫎鐨刢ell鍦ㄥ垪琛ㄤ腑鐨勪綅缃紝浠�0寮�濮� + didDeleteVirtualListCell(index) { + if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return; + const currentNode = this.virtualHeightCacheList[index]; + // 浠庡綋鍓峣ndex璧峰悗缁殑cell缂撳瓨楂樺害鐨刲astTotalHeight鍜宼otalHeight闇�瑕佸噺鍘诲綋鍓峜ell鐨勯珮搴� + for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) { + const thisNode = this.virtualHeightCacheList[i]; + thisNode.totalHeight -= currentNode.height; + thisNode.lastTotalHeight -= currentNode.height; + } + // 灏嗗綋鍓峜ell鐨勯珮搴︿俊鎭粠楂樺害缂撳瓨鏁扮粍涓垹闄� + this.virtualHeightCacheList.splice(index, 1); + }, + // 鎵嬪姩瑙﹀彂铏氭嫙鍒楄〃娓叉煋鏇存柊锛屽彲鐢ㄤ簬瑙e喅渚嬪淇敼浜嗚櫄鎷熷垪琛ㄦ暟缁勪腑鍏冪礌锛屼絾灞曠ず鏈洿鏂扮殑鎯呭喌 + updateVirtualListRender() { + // #ifndef APP-NVUE + if (this.finalUseVirtualList) { + this.updateVirtualListFromDataChange = true; + this.$nextTick(() => { + this.getCellHeightRetryCount.fixed = 0; + if (this.realTotalData.length) { + this.cellHeightMode === Enum.CellHeightMode.Fixed && this.isFirstPage && this._updateFixedCellHeight() + } else { + this._resetDynamicListState(!this.isUserPullDown); + } + this._updateVirtualScroll(this.oldScrollTop); + }) + } + // #endif + }, + // 鍒濆鍖栬櫄鎷熷垪琛� + _virtualListInit() { + this.$nextTick(() => { + u.delay(() => { + // 鑾峰彇铏氭嫙鍒楄〃婊氬姩鍖哄煙鐨勯珮搴� + this._getNodeClientRect('.zp-scroll-view').then(node => { + if (node) { + this.pagingOrgTop = node[0].top; + this.virtualPageHeight = node[0].height; + } + }); + }); + }) + }, + // cellHeightMode涓篺ixed鏃惰幏鍙栫涓�涓猚ell楂樺害 + _updateFixedCellHeight() { + if (!this.finalFixedCellHeight) { + this.$nextTick(() => { + u.delay(() => { + this._getVirtualCellNodeByIndex(0).then(cellNode => { + if (!cellNode) { + if (this.getCellHeightRetryCount.fixed > 10) return; + this.getCellHeightRetryCount.fixed ++; + // 濡傛灉鑾峰彇绗竴涓猚ell鐨勮妭鐐逛俊鎭け璐ワ紝鍒欓噸璇曪紙涓嶈秴杩�10娆★級 + this._updateFixedCellHeight(); + } else { + this.virtualCellHeight = cellNode[0].height; + this._updateVirtualScroll(this.oldScrollTop); + } + }); + }, c.delayTime, 'updateFixedCellHeightDelay'); + }) + } else { + this.virtualCellHeight = this.finalFixedCellHeight; + } + }, + // cellHeightMode涓篸ynamic鏃惰幏鍙栨瘡涓猚ell楂樺害 + _updateDynamicCellHeight(list, dataFrom = 'bottom') { + const dataFromTop = dataFrom === 'top'; + const heightCacheList = this.virtualHeightCacheList; + const currentCacheList = dataFromTop ? [] : heightCacheList; + let listTotalHeight = 0; + this.$nextTick(() => { + u.delay(async () => { + for (let i = 0; i < list.length; i++) { + const cellNode = await this._getVirtualCellNodeByIndex(list[i][this.virtualCellIndexKey]); + const currentHeight = cellNode ? cellNode[0].height : 0; + if (!cellNode) { + if (this.getCellHeightRetryCount.dynamic <= 10) { + heightCacheList.splice(heightCacheList.length - i, i); + this.getCellHeightRetryCount.dynamic ++; + // 濡傛灉鑾峰彇褰撳墠cell鐨勮妭鐐逛俊鎭け璐ワ紝鍒欓噸璇曪紙涓嶈秴杩�10娆★級 + this._updateDynamicCellHeight(list, dataFrom); + } + return; + } + const lastHeightCache = currentCacheList.length ? currentCacheList.slice(-1)[0] : null; + const lastTotalHeight = lastHeightCache ? lastHeightCache.totalHeight : 0; + // 缂撳瓨褰撳墠cell鐨勯珮搴︿俊鎭細height-褰撳墠cell楂樺害锛沴astTotalHeight-鍓嶉潰鎵�鏈塩ell鐨勯珮搴︽�诲拰锛泃otalHeight-鍖呭惈褰撳墠cell鐨勬墍鏈夐珮搴︽�诲拰 + currentCacheList.push({ + height: currentHeight, + lastTotalHeight, + totalHeight: lastTotalHeight + currentHeight + }); + if (dataFromTop) { + listTotalHeight += currentHeight; + } + } + // 濡傛灉鏁版嵁鏄粠椤堕儴鎷兼帴鐨� + if (dataFromTop && list.length) { + for (let i = 0; i < heightCacheList.length; i++) { + // 鏇存柊涔嬪墠鎵�鏈夐」鐨勭紦瀛橀珮搴︼紝闇�瑕佸姞涓婃娆℃彃鍏ョ殑鎵�鏈塩ell楂樺害涔嬪拰锛堝洜涓烘槸浠庨《閮ㄦ彃鍏ョ殑cell锛� + const heightCacheItem = heightCacheList[i]; + heightCacheItem.lastTotalHeight += listTotalHeight; + heightCacheItem.totalHeight += listTotalHeight; + } + this.virtualHeightCacheList = currentCacheList.concat(heightCacheList); + } + this._updateVirtualScroll(this.oldScrollTop); + }, c.delayTime, 'updateDynamicCellHeightDelay') + }) + }, + // 璁剧疆cellItem鐨刬ndex + _setCellIndex(list, dataFrom = 'bottom') { + let currentItemIndex = 0; + const cellIndexKey = this.virtualCellIndexKey; + dataFrom === 'bottom' && ([Enum.QueryFrom.Refresh, Enum.QueryFrom.Reload].indexOf(this.queryFrom) >= 0) && this._resetDynamicListState(); + if (this.totalData.length && this.queryFrom !== Enum.QueryFrom.Refresh) { + if (dataFrom === 'bottom') { + currentItemIndex = this.realTotalData.length; + const lastItem = this.realTotalData.length ? this.realTotalData.slice(-1)[0] : null; + if (lastItem && lastItem[cellIndexKey] !== undefined) { + currentItemIndex = lastItem[cellIndexKey] + 1; + } + } else if (dataFrom === 'top') { + const firstItem = this.realTotalData.length ? this.realTotalData[0] : null; + if (firstItem && firstItem[cellIndexKey] !== undefined) { + currentItemIndex = firstItem[cellIndexKey] - list.length; + } + } + } else { + this._resetDynamicListState(); + } + for (let i = 0; i < list.length; i++) { + let item = list[i]; + if (!item || Object.prototype.toString.call(item) !== '[object Object]') { + item = { item }; + } + if (item[c.listCellIndexUniqueKey]) { + item = u.deepCopy(item); + } + item[cellIndexKey] = currentItemIndex + i; + item[c.listCellIndexUniqueKey] = `${this.virtualListKey}-${item[cellIndexKey]}`; + list[i] = item; + } + this.getCellHeightRetryCount.dynamic = 0; + this.cellHeightMode === Enum.CellHeightMode.Dynamic && this._updateDynamicCellHeight(list, dataFrom); + }, + // 鏇存柊scroll婊氬姩锛堣櫄鎷熷垪琛ㄦ粴鍔ㄦ椂瑙﹀彂锛� + _updateVirtualScroll(scrollTop, scrollDiff = 0) { + const currentTimeStamp = u.getTime(); + scrollTop === 0 && this._resetTopRange(); + if (scrollTop !== 0 && this.virtualScrollTimeStamp && currentTimeStamp - this.virtualScrollTimeStamp <= this.virtualScrollDisTimeStamp) { + return; + } + this.virtualScrollTimeStamp = currentTimeStamp; + + let scrollIndex = 0; + const cellHeightMode = this.cellHeightMode; + if (cellHeightMode === Enum.CellHeightMode.Fixed) { + // 濡傛灉鏄浐瀹氶珮搴︾殑铏氭嫙鍒楄〃 + // 璁$畻褰撳墠婊氬姩鍒扮殑cell鐨刬ndex = scrollTop / 铏氭嫙鍒楄〃cell鐨勫浐瀹氶珮搴� + scrollIndex = parseInt(scrollTop / this.virtualCellHeight) || 0; + // 鏇存柊椤堕儴鍜屽簳閮ㄥ崰浣峷iew鐨勯珮搴︼紙涓哄吋瀹硅�冭檻锛岄《閮ㄩ噰鐢╰ransformY鐨勬柟寮忓崰浣�) + this._updateFixedTopRangeIndex(scrollIndex); + this._updateFixedBottomRangeIndex(scrollIndex); + } else if(cellHeightMode === Enum.CellHeightMode.Dynamic) { + // 濡傛灉鏄笉鍥哄畾楂樺害鐨勮櫄鎷熷垪琛� + // 褰撳墠婊氬姩鐨勬柟鍚� + const scrollDirection = scrollDiff > 0 ? 'top' : 'bottom'; + // 瑙嗗浘鍖哄煙鐨勯珮搴� + const rangePageHeight = this.virtualRangePageHeight; + // 椤堕儴瑙嗗浘鍖哄煙澶栫殑楂樺害锛堥《閮ㄤ笉闇�瑕佹覆鏌撹�屾槸闇�瑕佸崰浣嶉儴鍒嗙殑楂樺害锛� + const topRangePageOffset = scrollTop - rangePageHeight; + // 搴曢儴瑙嗗浘鍖哄煙澶栫殑楂樺害锛堝簳閮ㄤ笉闇�瑕佹覆鏌撹�屾槸闇�瑕佸崰浣嶉儴鍒嗙殑楂樺害锛� + const bottomRangePageOffset = scrollTop + this.finalVirtualPageHeight + rangePageHeight; + + let virtualBottomRangeIndex = 0; + let virtualPlaceholderBottomHeight = 0; + let reachedLimitBottom = false; + const heightCacheList = this.virtualHeightCacheList; + const lastHeightCache = !!heightCacheList ? heightCacheList.slice(-1)[0] : null; + + let startTopRangeIndex = this.virtualTopRangeIndex; + // 濡傛灉鏄悜搴曢儴婊氬姩锛堥《閮ㄥ崰浣嶇殑楂樺害涓嶆柇澧炲ぇ锛岄《閮ㄧ殑瀹為檯娓叉煋cell鏁伴噺涓嶆柇鍑忓皯锛� + if (scrollDirection === 'bottom') { + // 浠庨《閮ㄨ鍥捐竟缂樼殑cell鐨勪綅缃紑濮嬪悜鍚庢煡鎵� + for (let i = startTopRangeIndex; i < heightCacheList.length; i++){ + const heightCacheItem = heightCacheList[i]; + // 濡傛灉鏌ユ壘鍒版煇涓猚ell瀵瑰簲鐨則otalHeight澶т簬椤堕儴瑙嗗浘鍖哄煙澶栫殑楂樺害锛屽垯姝ell涓洪《閮ㄨ鍥捐竟缂樼殑cell + if (heightCacheItem && heightCacheItem.totalHeight > topRangePageOffset) { + // 璁板綍椤堕儴瑙嗗浘杈圭紭cell鐨刬ndex骞舵洿鏂伴《閮ㄥ崰浣嶅尯鍩熺殑楂樺害骞跺仠姝㈢户缁煡鎵� + this.virtualTopRangeIndex = i; + this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight; + break; + } + } + } else { + // 濡傛灉鏄悜椤堕儴婊氬姩锛堥《閮ㄥ崰浣嶇殑楂樺害涓嶆柇鍑忓皯锛岄《閮ㄧ殑瀹為檯娓叉煋cell鏁伴噺涓嶆柇澧炲姞锛� + let topRangeMatched = false; + // 浠庨《閮ㄨ鍥捐竟缂樼殑cell鐨勪綅缃紑濮嬪悜鍓嶆煡鎵� + for (let i = startTopRangeIndex; i >= 0; i--){ + const heightCacheItem = heightCacheList[i]; + // 濡傛灉鏌ユ壘鍒版煇涓猚ell瀵瑰簲鐨則otalHeight灏忎簬椤堕儴瑙嗗浘鍖哄煙澶栫殑楂樺害锛屽垯姝ell涓洪《閮ㄨ鍥捐竟缂樼殑cell + if (heightCacheItem && heightCacheItem.totalHeight < topRangePageOffset) { + // 璁板綍椤堕儴瑙嗗浘杈圭紭cell鐨刬ndex骞舵洿鏂伴《閮ㄥ崰浣嶅尯鍩熺殑楂樺害骞跺仠姝㈢户缁煡鎵� + this.virtualTopRangeIndex = i; + this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight; + topRangeMatched = true; + break; + } + } + // 濡傛灉鏌ユ壘涓嶅埌锛屽垯璁や负椤堕儴鍗犱綅楂樺害涓�0浜嗭紝椤堕儴cell涓嶉渶瑕佺户缁鐢紝閲嶇疆topRangeIndex鍜宲laceholderTopHeight + !topRangeMatched && this._resetTopRange(); + } + // 浠庨《閮ㄨ鍥捐竟缂樼殑cell鐨勪綅缃紑濮嬪悜鍚庢煡鎵� + for (let i = this.virtualTopRangeIndex; i < heightCacheList.length; i++){ + const heightCacheItem = heightCacheList[i]; + // 濡傛灉鏌ユ壘鍒版煇涓猚ell瀵瑰簲鐨則otalHeight澶т簬搴曢儴瑙嗗浘鍖哄煙澶栫殑楂樺害锛屽垯姝ell涓哄簳閮ㄨ鍥捐竟缂樼殑cell + if (heightCacheItem && heightCacheItem.totalHeight > bottomRangePageOffset) { + // 璁板綍搴曢儴瑙嗗浘杈圭紭cell鐨刬ndex骞舵洿鏂板簳閮ㄥ崰浣嶅尯鍩熺殑楂樺害骞跺仠姝㈢户缁煡鎵� + virtualBottomRangeIndex = i; + virtualPlaceholderBottomHeight = lastHeightCache.totalHeight - heightCacheItem.totalHeight; + reachedLimitBottom = true; + break; + } + } + if (!reachedLimitBottom || this.virtualBottomRangeIndex === 0) { + this.virtualBottomRangeIndex = this.realTotalData.length ? this.realTotalData.length - 1 : this.pageSize; + this.virtualPlaceholderBottomHeight = 0; + } else { + this.virtualBottomRangeIndex = virtualBottomRangeIndex; + this.virtualPlaceholderBottomHeight = virtualPlaceholderBottomHeight; + } + this._updateVirtualList(); + } + }, + // 鏇存柊fixedCell妯″紡涓媡opRangeIndex&placeholderTopHeight + _updateFixedTopRangeIndex(scrollIndex) { + let virtualTopRangeIndex = this.virtualCellHeight === 0 ? 0 : scrollIndex - (parseInt(this.finalVirtualPageHeight / this.virtualCellHeight) || 1) * this.preloadPage; + virtualTopRangeIndex *= this.virtualListCol; + virtualTopRangeIndex = Math.max(0, virtualTopRangeIndex); + this.virtualTopRangeIndex = virtualTopRangeIndex; + this.virtualPlaceholderTopHeight = (virtualTopRangeIndex / this.virtualListCol) * this.virtualCellHeight; + }, + // 鏇存柊fixedCell妯″紡涓媌ottomRangeIndex&placeholderBottomHeight + _updateFixedBottomRangeIndex(scrollIndex) { + let virtualBottomRangeIndex = this.virtualCellHeight === 0 ? this.pageSize : scrollIndex + (parseInt(this.finalVirtualPageHeight / this.virtualCellHeight) || 1) * (this.preloadPage + 1); + virtualBottomRangeIndex *= this.virtualListCol; + virtualBottomRangeIndex = Math.min(this.realTotalData.length, virtualBottomRangeIndex); + this.virtualBottomRangeIndex = virtualBottomRangeIndex; + this.virtualPlaceholderBottomHeight = (this.realTotalData.length - virtualBottomRangeIndex) * this.virtualCellHeight / this.virtualListCol; + this._updateVirtualList(); + }, + // 鏇存柊virtualList + _updateVirtualList() { + const shouldUpdateList = this.updateVirtualListFromDataChange || (this.lastVirtualTopRangeIndex !== this.virtualTopRangeIndex || this.lastVirtualBottomRangeIndex !== this.virtualBottomRangeIndex); + if (shouldUpdateList) { + this.updateVirtualListFromDataChange = false; + this.lastVirtualTopRangeIndex = this.virtualTopRangeIndex; + this.lastVirtualBottomRangeIndex = this.virtualBottomRangeIndex; + this.virtualList = this.realTotalData.slice(this.virtualTopRangeIndex, this.virtualBottomRangeIndex + 1); + } + }, + // 閲嶇疆鍔ㄦ�乧ell妯″紡涓嬬殑楂樺害缂撳瓨鏁版嵁銆佽櫄鎷熷垪琛ㄥ拰婊氬姩鐘舵�� + _resetDynamicListState(resetVirtualList = false) { + this.virtualHeightCacheList = []; + if (resetVirtualList) { + this.virtualList = []; + } + this.virtualTopRangeIndex = 0; + this.virtualPlaceholderTopHeight = 0; + }, + // 閲嶇疆topRangeIndex鍜宲laceholderTopHeight + _resetTopRange() { + this.virtualTopRangeIndex = 0; + this.virtualPlaceholderTopHeight = 0; + this._updateVirtualList(); + }, + // 妫�娴嬭櫄鎷熷垪琛ㄥ綋鍓嶆粴鍔ㄤ綅缃紝濡傚彂鐜版粴鍔ㄤ綅缃笉姝g‘鍒欓噸鏂拌绠楄櫄鎷熷垪琛ㄧ浉鍏冲弬鏁�(涓鸿В鍐冲湪App涓彲鑳藉嚭鐜扮殑闀挎椂闂磋繘鍏ュ悗鍙板悗鎵撳紑App鐧藉睆鐨勯棶棰�) + _checkVirtualListScroll() { + if (this.finalUseVirtualList) { + this.$nextTick(() => { + this._getNodeClientRect('.zp-paging-touch-view').then(node => { + const currentTop = node ? node[0].top : 0; + if (!node || (currentTop === this.pagingOrgTop && this.virtualPlaceholderTopHeight !== 0)) { + this._updateVirtualScroll(0); + } + }); + }) + } + }, + // 鑾峰彇瀵瑰簲index鐨勮櫄鎷熷垪琛╟ell鑺傜偣淇℃伅 + _getVirtualCellNodeByIndex(index) { + let inDom = this.finalUseInnerList; + // 鍦╲ue3+(寰俊灏忕▼搴忔垨QQ灏忕▼搴�)涓紝浣跨敤闈炲唴缃垪琛ㄥ啓娉曟椂锛岃嫢z-paging鍦╯wiper-item鍐呭瓨鍦ㄦ棤娉曡幏鍙杝lot鎻掑叆鐨刢ell楂樺害鐨勯棶棰� + // 閫氳繃uni.createSelectorQuery().in(this.$parent)鏉ヨВ鍐虫闂 + // #ifdef VUE3 + // #ifdef MP-WEIXIN || MP-QQ + if (this.forceCloseInnerList && this.virtualInSwiperSlot) { + inDom = this.$parent; + } + // #endif + // #endif + return this._getNodeClientRect(`#${this.fianlVirtualCellIdPrefix}-${index}`, inDom); + }, + // 澶勭悊浣跨敤鍐呯疆鍒楄〃鏃剁偣鍑讳簡cell浜嬩欢 + _innerCellClick(item, index) { + this.$emit('innerCellClick', item, index); + } + } +} diff --git a/src/components/z-paging/js/z-paging-constant.js b/src/components/z-paging/js/z-paging-constant.js new file mode 100644 index 0000000..e5694a7 --- /dev/null +++ b/src/components/z-paging/js/z-paging-constant.js @@ -0,0 +1,19 @@ +// [z-paging]甯搁噺 + +export default { + // 褰撳墠鐗堟湰鍙� + version: '2.8.6', + // 寤惰繜鎿嶄綔鐨勯�氱敤鏃堕棿 + delayTime: 100, + // 璇锋眰澶辫触鏃跺�欏叏灞�emit浣跨敤鐨刱ey + errorUpdateKey: 'z-paging-error-emit', + // 鍏ㄥ眬emit complete鐨刱ey + completeUpdateKey: 'z-paging-complete-emit', + // z-paging缂撳瓨鐨勫墠缂�key + cachePrefixKey: 'z-paging-cache', + + // 铏氭嫙鍒楄〃涓垪琛╥ndex鐨刱ey + listCellIndexKey: 'zp_index', + // 铏氭嫙鍒楄〃涓垪琛ㄧ殑鍞竴key + listCellIndexUniqueKey: 'zp_unique_index' +} diff --git a/src/components/z-paging/js/z-paging-enum.js b/src/components/z-paging/js/z-paging-enum.js new file mode 100644 index 0000000..d24b688 --- /dev/null +++ b/src/components/z-paging/js/z-paging-enum.js @@ -0,0 +1,45 @@ +// [z-paging]鏋氫妇 + +export default { + // 褰撳墠鍔犺浇绫诲瀷 refresher:涓嬫媺鍒锋柊 load-more:涓婃媺鍔犺浇鏇村 + LoadingType: { + Refresher: 'refresher', + LoadMore: 'load-more' + }, + // 涓嬫媺鍒锋柊鐘舵�� default:榛樿鐘舵�� release-to-refresh:鏉炬墜绔嬪嵆鍒锋柊 loading:鍒锋柊涓� complete:鍒锋柊缁撴潫 go-f2:鏉炬墜杩涘叆浜屾ゼ + Refresher: { + Default: 'default', + ReleaseToRefresh: 'release-to-refresh', + Loading: 'loading', + Complete: 'complete', + GoF2: 'go-f2' + }, + // 搴曢儴鍔犺浇鏇村鐘舵�� default:榛樿鐘舵�� loading:鍔犺浇涓� no-more:娌℃湁鏇村鏁版嵁 fail:鍔犺浇澶辫触 + More: { + Default: 'default', + Loading: 'loading', + NoMore: 'no-more', + Fail: 'fail' + }, + // @query瑙﹀彂鏉ユ簮 user-pull-down:鐢ㄦ埛涓诲姩涓嬫媺鍒锋柊 reload:閫氳繃reload瑙﹀彂 refresh:閫氳繃refresh瑙﹀彂 load-more:閫氳繃婊氬姩鍒板簳閮ㄥ姞杞芥洿澶氭垨鐐瑰嚮搴曢儴鍔犺浇鏇村瑙﹀彂 + QueryFrom: { + UserPullDown: 'user-pull-down', + Reload: 'reload', + Refresh: 'refresh', + LoadMore: 'load-more' + }, + // 铏氭嫙鍒楄〃cell楂樺害妯″紡 + CellHeightMode: { + // 鍥哄畾楂樺害 + Fixed: 'fixed', + // 鍔ㄦ�侀珮搴� + Dynamic: 'dynamic' + }, + // 鍒楄〃缂撳瓨妯″紡 + CacheMode: { + // 榛樿妯″紡锛屽彧浼氱紦瀛樹竴娆� + Default: 'default', + // 鎬绘槸缂撳瓨锛屾瘡娆″垪琛ㄥ埛鏂�(涓嬫媺鍒锋柊銆佽皟鐢╮eload绛�)閮戒細鏇存柊缂撳瓨 + Always: 'always' + } +} \ No newline at end of file diff --git a/src/components/z-paging/js/z-paging-interceptor.js b/src/components/z-paging/js/z-paging-interceptor.js new file mode 100644 index 0000000..147291a --- /dev/null +++ b/src/components/z-paging/js/z-paging-interceptor.js @@ -0,0 +1,97 @@ +// [z-paging]鎷︽埅鍣� + +const queryKey = 'Query'; +const fetchParamsKey = 'FetchParams'; +const fetchResultKey = 'FetchResult'; +const language2LocalKey = 'Language2Local'; + +// 鎷︽埅&澶勭悊@query浜嬩欢 +function handleQuery(callback) { + _addHandleByKey(queryKey, callback); + return this; +} + +// 鎷︽埅&澶勭悊@query浜嬩欢(绉佹湁锛岃鍕胯皟鐢�) +function _handleQuery(pageNo, pageSize, from, lastItem) { + const callback = _getHandleByKey(queryKey); + return callback ? callback(pageNo, pageSize, from, lastItem) : [pageNo, pageSize, from]; +} + +// 鎷︽埅&澶勭悊:fetch鍙傛暟 +function handleFetchParams(callback) { + _addHandleByKey(fetchParamsKey, callback); + return this; +} + +// 鎷︽埅&澶勭悊:fetch鍙傛暟(绉佹湁锛岃鍕胯皟鐢�) +function _handleFetchParams(parmas, extraParams) { + const callback = _getHandleByKey(fetchParamsKey); + return callback ? callback(parmas, extraParams || {}) : { pageNo: parmas.pageNo, pageSize: parmas.pageSize, ...(extraParams || {}) }; +} + +// 鎷︽埅&澶勭悊:fetch缁撴灉 +function handleFetchResult(callback) { + _addHandleByKey(fetchResultKey, callback); + return this; +} + +// 鎷︽埅&澶勭悊:fetch缁撴灉(绉佹湁锛岃鍕胯皟鐢�) +function _handleFetchResult(result, paging, params) { + const callback = _getHandleByKey(fetchResultKey); + callback && callback(result, paging, params); + return callback ? true : false; +} + +// 鎷︽埅&澶勭悊绯荤粺language杞琲18n local +function handleLanguage2Local(callback) { + _addHandleByKey(language2LocalKey, callback); + return this; +} + +// 鎷︽埅&澶勭悊绯荤粺language杞琲18n local(绉佹湁锛岃鍕胯皟鐢�) +function _handleLanguage2Local(language, local) { + const callback = _getHandleByKey(language2LocalKey); + return callback ? callback(language, local) : local; +} + +// 鑾峰彇褰撳墠app瀵硅薄 +function _getApp(){ + // #ifndef APP-NVUE + return getApp(); + // #endif + // #ifdef APP-NVUE + return getApp({ allowDefault: true }); + // #endif +} + +// 鏄惁鍙互璁块棶globalData +function _hasGlobalData() { + return _getApp() && _getApp().globalData; +} + +// 娣诲姞澶勭悊鍑芥暟 +function _addHandleByKey(key, callback) { + try { + setTimeout(function() { + if (_hasGlobalData()) { + _getApp().globalData[`zp_handle${key}Callback`] = callback; + } + }, 1); + } catch (_) {} +} + +// 鑾峰彇澶勭悊鍥炶皟鍑芥暟 +function _getHandleByKey(key) { + return _hasGlobalData() ? _getApp().globalData[`zp_handle${key}Callback`] : null; +} + +export default { + handleQuery, + _handleQuery, + handleFetchParams, + _handleFetchParams, + handleFetchResult, + _handleFetchResult, + handleLanguage2Local, + _handleLanguage2Local +}; diff --git a/src/components/z-paging/js/z-paging-main.js b/src/components/z-paging/js/z-paging-main.js new file mode 100644 index 0000000..596d690 --- /dev/null +++ b/src/components/z-paging/js/z-paging-main.js @@ -0,0 +1,515 @@ +// [z-paging]鏍稿績js + +import zStatic from './z-paging-static' +import c from './z-paging-constant' +import u from './z-paging-utils' + +import zPagingRefresh from '../components/z-paging-refresh' +import zPagingLoadMore from '../components/z-paging-load-more' +import zPagingEmptyView from '../../z-paging-empty-view/z-paging-empty-view' + +// modules +import commonLayoutModule from './modules/common-layout' +import dataHandleModule from './modules/data-handle' +import i18nModule from './modules/i18n' +import nvueModule from './modules/nvue' +import emptyModule from './modules/empty' +import refresherModule from './modules/refresher' +import loadMoreModule from './modules/load-more' +import loadingModule from './modules/loading' +import chatRecordModerModule from './modules/chat-record-mode' +import scrollerModule from './modules/scroller' +import backToTopModule from './modules/back-to-top' +import virtualListModule from './modules/virtual-list' + +import Enum from './z-paging-enum' + +const systemInfo = u.getSystemInfoSync(); +export default { + name: "z-paging", + components: { + zPagingRefresh, + zPagingLoadMore, + zPagingEmptyView + }, + mixins: [ + commonLayoutModule, + dataHandleModule, + i18nModule, + nvueModule, + emptyModule, + refresherModule, + loadMoreModule, + loadingModule, + chatRecordModerModule, + scrollerModule, + backToTopModule, + virtualListModule + ], + data() { + return { + // --------------闈欐�佽祫婧�--------------- + base64BackToTop: zStatic.base64BackToTop, + + // -------------鍏ㄥ眬鏁版嵁鐩稿叧-------------- + // 褰撳墠鍔犺浇绫诲瀷 + loadingType: Enum.LoadingType.Refresher, + requestTimeStamp: 0, + wxsPropType: '', + renderPropScrollTop: -1, + checkScrolledToBottomTimeOut: null, + cacheTopHeight: -1, + statusBarHeight: systemInfo.statusBarHeight, + + // --------------鐘舵��&鍒ゆ柇--------------- + insideOfPaging: -1, + isLoadFailed: false, + isIos: systemInfo.platform === 'ios', + disabledBounce: false, + fromCompleteEmit: false, + disabledCompleteEmit: false, + pageLaunched: false, + active: false, + + // ---------------wxs鐩稿叧--------------- + wxsIsScrollTopInTopRange: true, + wxsScrollTop: 0, + wxsPageScrollTop: 0, + wxsOnPullingDown: false, + }; + }, + props: { + // 璋冪敤complete鍚庡欢杩熷鐞嗙殑鏃堕棿锛屽崟浣嶄负姣锛岄粯璁�0姣锛屼紭鍏堢骇楂樹簬minDelay + delay: { + type: [Number, String], + default: u.gc('delay', 0), + }, + // 瑙﹀彂@query鍚庢渶灏忓欢杩熷鐞嗙殑鏃堕棿锛屽崟浣嶄负姣锛岄粯璁�0姣锛屼紭鍏堢骇浣庝簬delay锛堝亣璁捐缃负300姣锛岃嫢鍒嗛〉璇锋眰鏃堕棿灏忎簬300姣锛屽垯鍦ㄨ皟鐢╟omplete鍚庡欢杩焄300姣-璇锋眰鏃堕暱]锛涜嫢璇锋眰鏃堕暱澶т簬300姣锛屽垯涓嶅欢杩燂級锛屽綋show-refresher-when-reload涓簍rue鎴杛eload(true)鏃讹紝鍏舵渶灏忓�间负400 + minDelay: { + type: [Number, String], + default: u.gc('minDelay', 0), + }, + // 璁剧疆z-paging鐨剆tyle锛岄儴鍒嗗钩鍙�(濡傚井淇″皬绋嬪簭)鏃犳硶鐩存帴淇敼缁勪欢鐨剆tyle锛屽彲浣跨敤姝ゅ睘鎬т唬鏇� + pagingStyle: { + type: Object, + default: u.gc('pagingStyle', {}), + }, + // z-paging鐨勯珮搴︼紝浼樺厛绾т綆浜巔agingStyle涓缃殑height锛涗紶瀛楃涓诧紝濡�100px銆�100rpx銆�100% + height: { + type: String, + default: u.gc('height', '') + }, + // z-paging鐨勫搴︼紝浼樺厛绾т綆浜巔agingStyle涓缃殑width锛涗紶瀛楃涓诧紝濡�100px銆�100rpx銆�100% + width: { + type: String, + default: u.gc('width', '') + }, + // z-paging鐨勬渶澶у搴︼紝浼樺厛绾т綆浜巔agingStyle涓缃殑max-width锛涗紶瀛楃涓诧紝濡�100px銆�100rpx銆�100%銆傞粯璁や负绌猴紝涔熷氨鏄摵婊$獥鍙e搴︼紝鑻ヨ缃簡鐗瑰畾鍊煎垯浼氳嚜鍔ㄦ坊鍔爉argin: 0 auto + maxWidth: { + type: String, + default: u.gc('maxWidth', '') + }, + // z-paging鐨勮儗鏅壊锛屼紭鍏堢骇浣庝簬pagingStyle涓缃殑background銆備紶瀛楃涓诧紝濡�"#ffffff" + bgColor: { + type: String, + default: u.gc('bgColor', '') + }, + // 璁剧疆z-paging鐨勫鍣�(鎻掓Ы鐨勭埗view)鐨剆tyle + pagingContentStyle: { + type: Object, + default: u.gc('pagingContentStyle', {}), + }, + // z-paging鏄惁鑷姩楂樺害锛岃嫢鑷姩楂樺害鍒欎細鑷姩閾烘弧灞忓箷 + autoHeight: { + type: Boolean, + default: u.gc('autoHeight', false) + }, + // z-paging鏄惁鑷姩楂樺害鏃讹紝闄勫姞鐨勯珮搴︼紝娉ㄦ剰娣诲姞鍗曚綅px鎴杛px锛岃嫢闇�瑕佸噺灏戦珮搴︼紝鍒欎紶璐熸暟 + autoHeightAddition: { + type: [Number, String], + default: u.gc('autoHeightAddition', '0px') + }, + // loading(涓嬫媺鍒锋柊銆佷笂鎷夊姞杞芥洿澶�)鐨勪富棰樻牱寮忥紝鏀寔black锛寃hite锛岄粯璁lack + defaultThemeStyle: { + type: String, + default: u.gc('defaultThemeStyle', 'black') + }, + // z-paging鏄惁浣跨敤fixed甯冨眬锛岃嫢浣跨敤fixed甯冨眬锛屽垯z-paging鐨勭埗view鏃犻渶鍥哄畾楂樺害锛寊-paging楂樺害榛樿涓�100%锛岄粯璁や负鏄�(褰撲娇鐢ㄥ唴缃畇croll-view婊氬姩鏃舵湁鏁�) + fixed: { + type: Boolean, + default: u.gc('fixed', true) + }, + // 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤 + safeAreaInsetBottom: { + type: Boolean, + default: u.gc('safeAreaInsetBottom', false) + }, + // 寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤鍚庯紝鏄惁浣跨敤placeholder褰㈠紡瀹炵幇锛岄粯璁や负鍚︺�備负鍚︽椂婊氬姩鍖哄煙浼氳嚜鍔ㄩ伩寮�搴曢儴瀹夊叏鍖哄煙锛屼篃灏辨槸鎵�鏈夋粴鍔ㄥ唴瀹归兘涓嶄細鎸′綇搴曢儴瀹夊叏鍖哄煙锛岃嫢璁剧疆涓烘槸锛屽垯婊氬姩鏃舵粴鍔ㄥ唴瀹逛細鎸′綇搴曢儴瀹夊叏鍖哄煙锛屼絾鏄綋婊氬姩鍒板簳閮ㄦ椂鎵嶄細閬垮紑搴曢儴瀹夊叏鍖哄煙 + useSafeAreaPlaceholder: { + type: Boolean, + default: u.gc('useSafeAreaPlaceholder', false) + }, + // z-paging bottom鐨勮儗鏅壊锛岄粯璁ら�忔槑锛屼紶瀛楃涓诧紝濡�"#ffffff" + bottomBgColor: { + type: String, + default: u.gc('bottomBgColor', '') + }, + // slot="top"鐨剉iew鐨剒-index锛岄粯璁や负99锛屼粎浣跨敤椤甸潰婊氬姩鏃舵湁鏁� + topZIndex: { + type: Number, + default: u.gc('topZIndex', 99) + }, + // z-paging鍐呭瀹瑰櫒鐖秜iew鐨剒-index锛岄粯璁や负1 + superContentZIndex: { + type: Number, + default: u.gc('superContentZIndex', 1) + }, + // z-paging鍐呭瀹瑰櫒閮ㄥ垎鐨剒-index锛岄粯璁や负1 + contentZIndex: { + type: Number, + default: u.gc('contentZIndex', 1) + }, + // z-paging浜屾ゼ鐨剒-index锛岄粯璁や负100 + f2ZIndex: { + type: Number, + default: u.gc('f2ZIndex', 100) + }, + // 浣跨敤椤甸潰婊氬姩鏃讹紝鏄惁鍦ㄤ笉婊″睆鏃惰嚜鍔ㄥ~鍏呮弧灞忓箷锛岄粯璁や负鏄� + autoFullHeight: { + type: Boolean, + default: u.gc('autoFullHeight', true) + }, + // 鏄惁鐩戝惉鍒楄〃瑙︽懜鏂瑰悜鏀瑰彉锛岄粯璁や负鍚� + watchTouchDirectionChange: { + type: Boolean, + default: u.gc('watchTouchDirectionChange', false) + }, + // z-paging涓竷灞�鐨勫崟浣嶏紝榛樿涓簉px + unit: { + type: String, + default: u.gc('unit', 'rpx') + } + }, + created() { + // 缁勪欢鍒涘缓鏃讹紝妫�娴嬫槸鍚﹀紑濮嬪姞杞界姸鎬� + if (this.createdReload && !this.refresherOnly && this.auto) { + this._startLoading(); + this.$nextTick(this._preReload); + } + }, + mounted() { + this.active = true; + this.wxsPropType = u.getTime().toString(); + this.renderJsIgnore; + if (!this.createdReload && !this.refresherOnly && this.auto) { + // 寮�濮嬮鍔犺浇 + u.delay(() => this.$nextTick(this._preReload), 0); + } + // 濡傛灉寮�鍚簡鍒楄〃缂撳瓨锛屽湪鍒濆鍖栫殑鏃跺�欓�氳繃缂撳瓨鏁版嵁濉厖鍒楄〃鏁版嵁 + this.finalUseCache && this._setListByLocalCache(); + let delay = 0; + // #ifdef H5 || MP + delay = c.delayTime; + // #endif + this.$nextTick(() => { + // 鍒濆鍖杝ystemInfo + this.systemInfo = u.getSystemInfoSync(); + // 鍒濆鍖杬-paging楂樺害 + !this.usePageScroll && this.autoHeight && this._setAutoHeight(); + // #ifdef MP-KUAISHOU + this._setFullScrollViewInHeight(); + // #endif + this.loaded = true; + u.delay(() => { + // 鏇存柊fixed妯″紡涓媧-paging鐨勫竷灞�锛屼富瑕佹槸鏇存柊windowTop銆亀indowBottom + this.updateFixedLayout(); + // 鏇存柊缂撳瓨涓瓃-paging鏁翠釜鍐呭瀹瑰櫒楂樺害 + this._updateCachedSuperContentHeight(); + }); + }) + // 鍒濆鍖栭〉闈㈡粴鍔ㄦā寮忎笅slot="top"銆乻lot="bottom"楂樺害 + this.updatePageScrollTopHeight(); + this.updatePageScrollBottomHeight(); + // 鍒濆鍖杝lot="left"銆乻lot="right"瀹藉害 + this.updateLeftAndRightWidth(); + if (this.finalRefresherEnabled && this.useCustomRefresher) { + this.$nextTick(() => { + this.isTouchmoving = true; + }) + } + // 鐩戝惉uni.$emit涓叏灞�emit鐨刢omplete error绛変簨浠� + this._onEmit(); + // #ifdef APP-NVUE + if (!this.isIos && !this.useChatRecordMode) { + this.nLoadingMoreFixedHeight = true; + } + // 鍦╪vue涓洿鏂皀vue涓嬫媺鍒锋柊view瀹瑰櫒鐨勫搴︼紝鑰屼笉鏄啓姝婚粯璁ょ殑750rpx锛岄渶瑕佽�冭檻鍒楄〃瀹藉害涓嶆槸閾烘弧灞忓箷鐨勬儏鍐� + this._nUpdateRefresherWidth(); + // #endif + // #ifndef APP-NVUE + // 铏氭嫙鍒楄〃妯″紡鏃讹紝鍒濆鍖栨暟鎹� + this.finalUseVirtualList && this._virtualListInit(); + // #endif + // #ifndef APP-PLUS + this.$nextTick(() => { + // 闈瀉pp骞冲彴涓紝鍦ㄩ�氳繃鑾峰彇css璁剧疆鐨勫簳閮ㄥ畨鍏ㄥ尯鍩熷崰浣峷iew楂樺害璁剧疆bottom璺濈鍚庯紝鏇存柊椤甸潰婊氬姩搴曢儴楂樺害 + setTimeout(() => { + this._getCssSafeAreaInsetBottom(() => this.safeAreaInsetBottom && this.updatePageScrollBottomHeight()); + }, delay) + }) + // #endif + }, + destroyed() { + this._handleUnmounted(); + }, + // #ifdef VUE3 + unmounted() { + this._handleUnmounted(); + }, + // #endif + watch: { + defaultThemeStyle: { + handler(newVal) { + if (newVal.length) { + this.finalRefresherDefaultStyle = newVal; + } + }, + immediate: true + }, + autoHeight(newVal) { + this.loaded && !this.usePageScroll && this._setAutoHeight(newVal); + }, + autoHeightAddition(newVal) { + this.loaded && !this.usePageScroll && this.autoHeight && this._setAutoHeight(newVal); + }, + }, + computed: { + // 褰撳墠z-paging鐨勫唴缃牱寮� + finalPagingStyle() { + const pagingStyle = { ...this.pagingStyle }; + if (!this.systemInfo) return pagingStyle; + const { windowTop, windowBottom } = this; + if (!this.usePageScroll && this.fixed) { + if (windowTop && !pagingStyle.top) { + pagingStyle.top = windowTop + 'px'; + } + if (windowBottom && !pagingStyle.bottom) { + pagingStyle.bottom = windowBottom + 'px'; + } + } + if (this.bgColor.length && !pagingStyle['background']) { + pagingStyle['background'] = this.bgColor; + } + if (this.height.length && !pagingStyle['height']) { + pagingStyle['height'] = this.height; + } + if (this.width.length && !pagingStyle['width']) { + pagingStyle['width'] = this.width; + } + if (this.maxWidth.length && !pagingStyle['max-width']) { + pagingStyle['max-width'] = this.maxWidth; + pagingStyle['margin'] = '0 auto'; + } + return pagingStyle; + }, + // 褰撳墠z-paging鍐呭鐨勬牱寮� + finalPagingContentStyle() { + if (this.contentZIndex != 1) { + this.pagingContentStyle['z-index'] = this.contentZIndex; + this.pagingContentStyle['position'] = 'relative'; + } + return this.pagingContentStyle; + }, + + renderJsIgnore() { + if ((this.usePageScroll && this.useChatRecordMode) || (!this.refresherEnabled && this.scrollable) || !this.useCustomRefresher) { + this.$nextTick(() => { + this.renderPropScrollTop = 10; + }) + } + return 0; + }, + windowHeight() { + if (!this.systemInfo) return 0; + return this.systemInfo.windowHeight || 0; + }, + windowBottom() { + if (!this.systemInfo) return 0; + let windowBottom = this.systemInfo.windowBottom || 0; + // 濡傛灉寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤骞朵笖涓嶄娇鐢╬laceholder鐨勫舰寮忎綋鐜板苟涓斾笉鏄亰澶╄褰曟ā寮忥紙鍥犱负鑱婂ぉ璁板綍妯″紡鍦╧eyboardHeight璁$畻鍒濆凡娣诲姞浜嗗簳閮ㄥ畨鍏ㄥ尯鍩燂級锛屽湪windowBottom娣诲姞搴曢儴瀹夊叏鍖哄煙楂樺害 + if (this.safeAreaInsetBottom && !this.useSafeAreaPlaceholder && !this.useChatRecordMode) { + windowBottom += this.safeAreaBottom; + } + return windowBottom; + }, + isIosAndH5() { + // #ifndef H5 + return false; + // #endif + return this.isIos; + } + }, + methods: { + // 褰撳墠鐗堟湰鍙� + getVersion() { + return `z-paging v${c.version}`; + }, + // 璁剧疆nvue List鐨剆pecialEffects + setSpecialEffects(args) { + this.setListSpecialEffects(args); + }, + // 涓巗etSpecialEffects绛夋晥锛屽吋瀹规棫鐗堟湰 + setListSpecialEffects(args) { + this.nFixFreezing = args && Object.keys(args).length; + if (this.isIos) { + this.privateRefresherEnabled = 0; + } + !this.usePageScroll && this.$refs['zp-n-list'].setSpecialEffects(args); + }, + // #ifdef APP-VUE + // 褰揳pp闀挎椂闂磋繘鍏ュ悗鍙板悗杩涘叆鍓嶅彴锛屽洜绯荤粺鍐呭瓨绠$悊瀵艰嚧app閲嶆柊鍔犺浇鏃讹紝杩涜涓�浜涢�傞厤澶勭悊 + _handlePageLaunch() { + // 棣栨瑙﹀彂涓嶈繘琛屽鐞嗭紝鍙湁杩涘叆鍚庡彴鍚庢墦寮�app閲嶆柊鍔犺浇鏃舵墠澶勭悊 + if (this.pageLaunched) { + // 瑙e喅鍦╲ue3+ios涓紝app ReLaunch鏃堕《閮ㄤ笅鎷夊埛鏂板睍绀轰綅缃悜涓嬪亸绉荤殑闂 + // #ifdef VUE3 + this.refresherThresholdUpdateTag = 1; + this.$nextTick(() => { + this.refresherThresholdUpdateTag = 0; + }) + // #endif + // 瑙e喅浣跨敤铏氭嫙鍒楄〃鏃讹紝app ReLaunch鏃剁櫧灞忛棶棰� + this._checkVirtualListScroll(); + } + this.pageLaunched = true; + }, + // #endif + // 浣挎墜鏈哄彂鐢熻緝鐭椂闂寸殑鎸姩锛�15ms锛� + _doVibrateShort() { + // #ifndef H5 + + // #ifdef APP-PLUS + if (this.isIos) { + const UISelectionFeedbackGenerator = plus.ios.importClass('UISelectionFeedbackGenerator'); + const feedbackGenerator = new UISelectionFeedbackGenerator(); + feedbackGenerator.init(); + setTimeout(() => { + feedbackGenerator.selectionChanged(); + }, 0) + } else { + plus.device.vibrate(15); + } + // #endif + // #ifndef APP-PLUS + uni.vibrateShort(); + // #endif + + // #endif + }, + // 璁剧疆z-paging楂樺害 + async _setAutoHeight(shouldFullHeight = true, scrollViewNode = null) { + const heightKey = 'min-height'; + try { + if (shouldFullHeight) { + // 濡傛灉闇�瑕侀摵婊″叏灞忥紝鍒欒绠楀綋鍓嶅叏灞忓彲鏄尯鍩熺殑楂樺害 + let finalScrollViewNode = scrollViewNode || await this._getNodeClientRect('.zp-scroll-view'); + let finalScrollBottomNode = await this._getNodeClientRect('.zp-page-bottom'); + if (finalScrollViewNode) { + const scrollViewTop = finalScrollViewNode[0].top; + let scrollViewHeight = this.windowHeight - scrollViewTop; + scrollViewHeight -= finalScrollBottomNode ? finalScrollBottomNode[0].height : 0; + const additionHeight = u.convertToPx(this.autoHeightAddition); + // 鍦ㄦ敮浠樺疂灏忕▼搴忎腑锛屾坊鍔�!important浼氬鑷磎in-height澶辨晥锛屽洜姝ゅ湪鏀粯瀹濆皬绋嬪簭涓渶瑕佸幓鎺� + let importantSuffix = ' !important'; + // #ifdef MP-ALIPAY + importantSuffix = ''; + // #endif + const finalHeight = scrollViewHeight + additionHeight - (this.insideMore ? 1 : 0) + 'px' + importantSuffix; + this.$set(this.scrollViewStyle, heightKey, finalHeight); + this.$set(this.scrollViewInStyle, heightKey, finalHeight); + } + } else { + this.$delete(this.scrollViewStyle, heightKey); + this.$delete(this.scrollViewInStyle, heightKey); + } + } catch (e) {} + }, + // #ifdef MP-KUAISHOU + // 璁剧疆scroll-view鍐呭鍣ㄧ殑鏈�灏忛珮搴︾瓑浜巗croll-view鐨勯珮搴�(涓轰簡瑙e喅鍦ㄥ揩鎵嬪皬绋嬪簭涓唴瀹硅緝灏戞椂scroll-view鍐呭鍣ㄩ珮搴︽棤娉曢摵婊croll-view鐨勯棶棰�) + async _setFullScrollViewInHeight() { + try { + // 濡傛灉闇�瑕侀摵婊″叏灞忥紝鍒欒绠楀綋鍓嶅叏灞忓彲鏄尯鍩熺殑楂樺害 + const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view'); + scrollViewNode && this.$set(this.scrollViewInStyle, 'min-height', scrollViewNode[0].height + 'px'); + } catch (e) {} + }, + // #endif + // 缁勪欢閿�姣佸悗缁鐞� + _handleUnmounted() { + this.active = false; + this._offEmit(); + // 鍙栨秷鐩戝惉閿洏楂樺害鍙樺寲浜嬩欢锛圚5銆佺櫨搴﹀皬绋嬪簭銆佹姈闊冲皬绋嬪簭銆侀涔﹀皬绋嬪簭銆丵Q灏忕▼搴忋�佸揩鎵嬪皬绋嬪簭涓嶆敮鎸侊級 + // #ifndef H5 || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU + this.useChatRecordMode && uni.offKeyboardHeightChange(this._handleKeyboardHeightChange); + // #endif + }, + // 瑙﹀彂鏇存柊鏄惁瓒呭嚭椤甸潰鐘舵�� + _updateInsideOfPaging() { + this.insideMore && this.insideOfPaging === true && setTimeout(this.doLoadMore, 200) + }, + // 娓呴櫎timeout + _cleanTimeout(timeout) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + return timeout; + }, + // 娣诲姞鍏ㄥ眬emit鐩戝惉 + _onEmit() { + uni.$on(c.errorUpdateKey, (errorMsg) => { + if (this.loading) { + if (!!errorMsg) { + this.customerEmptyViewErrorText = errorMsg; + } + this.complete(false).catch(() => {}); + } + }) + uni.$on(c.completeUpdateKey, (data) => { + setTimeout(() => { + if (this.loading) { + if (!this.disabledCompleteEmit) { + const type = data.type || 'normal'; + const list = data.list || data; + const rule = data.rule; + this.fromCompleteEmit = true; + switch (type){ + case 'normal': + this.complete(list); + break; + case 'total': + this.completeByTotal(list, rule); + break; + case 'nomore': + this.completeByNoMore(list, rule); + break; + case 'key': + this.completeByKey(list, rule); + break; + default: + break; + } + } else { + this.disabledCompleteEmit = false; + } + } + }, 1); + }) + }, + // 閿�姣佸叏灞�emit鍜宭istener鐩戝惉 + _offEmit(){ + uni.$off(c.errorUpdateKey); + uni.$off(c.completeUpdateKey); + }, + }, +}; diff --git a/src/components/z-paging/js/z-paging-mixin.js b/src/components/z-paging/js/z-paging-mixin.js new file mode 100644 index 0000000..9d09caf --- /dev/null +++ b/src/components/z-paging/js/z-paging-mixin.js @@ -0,0 +1,22 @@ +// [z-paging]浣跨敤椤甸潰婊氬姩鏃跺紩鍏ユmixin锛岀敤浜庣洃鍚拰澶勭悊onPullDownRefresh绛夐〉闈㈢敓鍛藉懆鏈熸柟娉� + +export default { + onPullDownRefresh() { + if (this.isPagingRefNotFound()) return; + this.$refs.paging.reload().catch(() => {}); + }, + onPageScroll(e) { + if (this.isPagingRefNotFound()) return; + this.$refs.paging.updatePageScrollTop(e.scrollTop); + e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore(); + }, + onReachBottom() { + if (this.isPagingRefNotFound()) return; + this.$refs.paging.pageReachBottom(); + }, + methods: { + isPagingRefNotFound() { + return !this.$refs.paging; + } + } +} diff --git a/src/components/z-paging/js/z-paging-static.js b/src/components/z-paging/js/z-paging-static.js new file mode 100644 index 0000000..dbd02bc --- /dev/null +++ b/src/components/z-paging/js/z-paging-static.js @@ -0,0 +1,13 @@ +// [z-paging]鍏敤鐨勯潤鎬佸浘鐗囪祫婧� + +export default { + base64Arrow: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAD1BMVEVHcExRUVFMTExRUVFRUVE9CdWsAAAABHRSTlMAjjrY9ZnUjwAAAQFJREFUWMPt2MsNgzAMgGEEE1B1gKJmAIRYoCH7z9RCXrabh33iYktcIv35EEg5ZBh07pvxJU6MFSPOSRnjnBUjUsaciRUjMsb4xIoRCWNiYsUInzE5sWKEyxiYWDbyefqHx1zIeiYTk7mQYziTYecxHvEJjwmIT3hMQELCYSISEg4TkZj0mYTEpM8kJCU9JiMp6TEZyUmbAUhO2gxAQNJiIAKSFgMRmNQZhMCkziAEJTUGIyipMRjBSZkhCE7KDEFIUmTeGCHJxWz0zXaE0GTCG8ZFtEaS347r/1fe11YyHYVfubxayfjoHmc0YYwmmmiiiSaaaKLJ7ckyz5ve+dw3Xw2emdwm9xSbAAAAAElFTkSuQmCC', + base64ArrowWhite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAElBMVEVHcEz///////////////////+IGTx/AAAABnRSTlMA/dAkXZOhASU/AAABYElEQVRYw+2YwXLCIBCGsdAHWGbyAKZ4zxi9O017rxLf/1UaWFAgA1m8dcpedNSPf/l/Vh0Ya/Wn6hN0JcGvoCqRM4C8VBFiDwBqqNuJKV0rAnCgy3AUqZE57x0iqTL8Br4U3WBf/YWaIlTKfAcELU/h9w72CSVPa3C3OCDvhpHbRp/s2vq4fHhCeiCl2A3m4Qd71DQR257mFBlMcTlbFnFWzNtHxewYEfSiaLS4el8d8nyhmKJd1CF4eOS0keLMAuSxubLBIeIGQW8YHCFFo7EH9+YDcQt9FMZEswTheaNxTHwHT8SZorJjMrEVwo4Zo0U8HSEyZvJMOg4RjnmmRr8nDYeIz3OMkbfE/QhBo+U9RnZJxjGCRh/WKmHEMWLNkfPKsGh/CWJk1JjG0kcuJggTt34VDP8aWAFhp4nybVb5+9qQhjSkIQ1pSEMa8k+Q5U9rV3dF8MpFBK+/7miVq1/HZ2qmo9D+pAAAAABJRU5ErkJggg==', + base64Flower: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEVHcEzDw8Ovr6+pqamUlJTCwsKenp61tbWxsbGysrLNzc2bm5u5ubmjo6MpovhuAAAACnRSTlMA/P79/sHDhiZS0DxZowAABBBJREFUWMPtl89rE0EUx7ctTXatB3MI1SWnDbUKPUgXqh4ED8Uf7KUVSm3ooVSpSii0Fn/gD4j4o+APiEoVmos9FO2celiqZVgwgaKHPQiCCkv+F99kM7Ozm5kxq1dfD91k9pPve9/3ZjbRNHHok/mKli4eIPNgSuRObuN9SqSEzM20iGnm0yIbqCuV7NSSSIV7uyPM6JMBYdeTOanh/QihJYZsUCSby+VkMj2AvOt0rAeQAwqE3lfKMZVlQCZk1QOCKkkVPadITCfIRNKxfoJI5+0OIFtJx14CMSg1mRSDko7VAfksRQzEbGYqxOJcVTWMCH2I1/IACNW0PWU2M8cmAVHtnH5mM1VRWtwKZjOd5JbF6s1IbaYqaotjNlPHgDAnlAizubTR6ovMYn052g/U5qcmOpi0WL8xTS/3IfSet5m8MEr5ajjF5le6dq/OJpobrdY0t3i9QgefWrxW9/1BLhk0E9m8FeUMhhXal499iD0eQRfDF+ts/tttORRerfp+oV7f4xJj82iUYm1Yzod+ZQEAlS/8mMBwKebVmCVp1f0JLS6zKd17+iwRKTARVg2SHtz3iEbBH+Q+U28zW2Jiza8Tjb1YFoYZMsJyjDqp3M9XBQdSdPLFdxEpvOB37JrHcmR/y9+LgoTlCFGZEa2sc6d4PGlweEa2JSVPoVm+IfGG3ZL037iV9oH+P+Jxc4HGVflNq1M0pivao/EopO4b/ojVCP9GjmiXOeS0DOn1o/iiccT4ORnyvBGF3yUywkQajW4Ti0SGuiy/wVSg/L8w+X/8Q+hvUx8Xd90z4oV5a1i88MbFWHz0WZZ1UrTwBGPX3Rat9AFiXRMRjoMdIdJLEOt2h7jrYOzgOamKZSWSNspOS0X8SAqRYmxRL7sg4eLzYmNehcxh3uoyud/BH2Udux4ywxFTc1xC7Mgf4vMhc5S+kSH3Y7yj+qpwIWSoPTVCOOPVthGx9FbGqrwFw6wSFxJr+17zeKcztt3u+2roAEVgUjDd+AHGuxHy2rZHaa8JMkTHEeyi85ANPO9j9BVuBRD2FY5LDMo/Sz/2hReqGIs/KiFin+CsPsYO/yvM3jL2vE8EbX7/Bf8ejtr2GLN65bioAdgLd8Bis/mD5GmP2qeqyo2ZwQEOtAjRIDH7mBKpUcMoApbZJ5UIxkEwxyMZyMxW/uKFvHCFR3SSmerHyDNQ2dF4JG6zIMpBgLfjSF9x1D6smFcYnGApjmSLICO3ecCDWrQ48geba9DI3STy2i7ax6WIB62fSyIZIiO3GFQqSURp8wCo7GhJBGwuSovJBNjb7kT6FPVnIa9qJ2Ko+l9mefGIdinaMp0yC1URYiwsdfNE45EuA5Cx9EhalfvN5s+UyItm81vaB3p4joniN+SCP7Qc1hblAAAAAElFTkSuQmCC', + base64FlowerWhite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAElBMVEX///9HcEz///////////////84chYNAAAABnRSTlP/AGzCOYZj5g1nAAACfklEQVRYw+2YTVPDIBCGtza9Jw25a0bvcax30o73OOr//yvma2F3YWlpPTijXNpAHrK8LLALVPFium2vNIFSbwGKTGQA2GUiHcD29yDNy3sMIdUBQl7r2H8mOEVqAHgPkYZUS6Qc2zYhQqtjyDZEximCZwWZLIBeIgYShs2NzxKpSUehYpMJhURGb+O+w5BpMCAREKPnCDHbIY20SzhM5yxziAXpOiBXydrekT9i5XDEq4NIIHHgyU5mRGqviII4mREJJA4QJzMiILwlRJzpKxJKvCBm8OsBBbLux0tsPl4RKYm5aPu6jw1U4mGxEUR9g8M1PcqBEp/WJliNgYOXueBzS4jZSIcgY5lCtevgDSgyzE+rAfuOTQMq0yzvoGH18qju27Mayzs4fPyMziCx81NJa5RNfW7vPYK9KOfDiVkBxFHG8hAj9txuoBuSWORsFfkpBf7xKFLSeaOefEojh5jz22DJEqMP8fUyaKdQx+RnG+yXMpe8Aars8ueR1pVH/bW3FyyvPRw90upLDHwpgBDtg4aUBNkxRLXMAi03IhcZtr1m+FeI/O/JNyDmmL1djLOauSlNflBpW18RQ2bPqXI22MXXEk75KRHTnkPkYbESbdKP2ZFk0r5sIwffAjy1lx+vx7NLjB6/E7Jfv5ERKhzpN0w8IDE8IGFDv5dhz10s7GFiXRZcUeLCEG5P5nDq9k4PFDcoMpE3GY4OuxuCXhmuyNB6k0RsLIAvqp9NE5r8ZCSS8gxnUp7ODdYhZTqxuiJ9uyJJtPmpqJ7wVj+XVieS903iViHziqAhchLEJAyb7jWU647EpUofQ0ziUuXXXhDddtlllSwjgSQu7r4BRWhQqfDPMVwAAAAASUVORK5CYII=', + base64Success: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAElBMVEVRUVFHcExTU1NRUVFRUVFRUVFOSlSUAAAABnRSTlP/AI6+VySB3ZENAAACcElEQVRYw+2YyYKCMAyGI8hdpdxdZu7gcpdZ7jL6/s8yYheSNi0aPdqbwOffpGmaFOYPD3gj4bisN7vddv17N/JVgxn5x12IWgIaWTuO/IE3PseQbwjGPo2cgRmHFLJwdm/X643zwiqOKPPJ1nj3sjEP2iiifZWj5bhopSyGaEO2HX5fbQJzwJ+W7x/jw5ZFjsEU0PMph9xE8i5EqprKALW95eJQURkgzw98uJ/JvwGecR7bIjWWsUgVrrIfFZ2HlLy3sKETD1mmRLRMRhGVssRa0xJkdn3SpJBymBkM8+pSSDXMDNyDaToVHd2fgpNt0sjwiUZO19+jGQ+gQEg9Oq+bufmAVGihomNmjQG7UG3020vrlm7lkFnKFGU3kZ0KGAdmKe821pipQ+qEKcrZeTL2g5FsUks4cStjEZWwXg0b0n4GxmEpkWwIs5VBynjgK7xZaz1/0D7OxkVuLpsY5BQNFyLS84VBjjbg0iL2r2EQHBOxBhikuUOkdxODVF1cxHoWtPPsiyXO455Iv34hssCO8EV4ZIYTjS8SR4qYSHRiTiYQ4ZFbHi0iIhhBTi6dTCgSWRcnw4h4yGTuyTAiOGBIWGoZTgSHJQl+LcOJ4OCnW6yX2bMnJ9pidCOXtkTkTrIGpYuOynAiOF14SamMiOCk5Ke+mq8BcOrrvym8d0zKIQnWT+M1WwOQNO4fFiWb18hhERxJPx2fblbPHHyC41VyiAtKBUFBIih7JMWVoIQTFIr3lKPN80WvoLSWFPC653ioTZA0I0FrQ7qU6asaK0H7JmkSJa2ooOGVtNUsc3j9FYHkIkJy3SG6VHnfXKXGP9t4N9Q4Ye98AAAAAElFTkSuQmCC', + base64SuccessWhite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAAB3RSTlMAiVYk6KvDHLfaegAAAo1JREFUWMPtWEtzmzAQNhCTq910ytXpiyvxTNOr60zrayepx9d02gnX4sTm7xcEiJX2gdnkGJ1A4tOnfWqXyeR1vMRYzrcPD9v5h5MBl3/Ldvx4cxIg/FWC8X0xjLjalM54uhhCfCrRuJURX0pi3EmIqZV7O59vrRZmguStHL9b7S7ftfLwOtiZDw7AHMtmquAQ12b5Wwbnordm8g9zLLO49qc/m2n6aKnhwPOGZ08hAiNHhheiHae1lOUPGZpQkPKa3q0mOUjaRzSRaGUjpy/mmWSwySSpllcEteBKAT52KEnSbblA51pJEPxBQoiH1FP4E3s5+FJv07h6/ylD6ui7B+9fq/ehrFB98ghec9EoVtyjK8pqCHLmCBOwMWSCeWFNN4MbPAk55NhsvoFHSSVR0k5TCTTEzlUGcqV/nVp7n9oIVkmtaqbAEqEgfdgHJPwsEAyZ9r4VAZXFjpEwyaw3+H2v42KYxKhs1XvY/gSSGv+IHyUSuHXCeZhLAgVI3EjgSGo1Fb3xO0tGGU9S2/KAIbtjxpJASG73qox6w5LUq0cEOa+iIONIWIilQSQ0pPa2jgaRQAgQP7c0mITRWGxpMAmEQFN2NAQJNCV0mI6GIIEO47hlQ0ORQLd0nL+hoUjg1m6I1TRr8uYEAriBHLcVFQ5UEMiBe3XkTBEG04WXlGKGxPnMS305XQPA1Ocn2JiuAZwE66fxnKwBnDTuXxZTMq85lwW6kt5ndLqZPefiU1yvmktcUSooChJF2aMprhQlnKJQ5FxRKkcVRa+itNYU8Io2oVkY14w0NMWYlqft91Bj9VHq+ca3b43BxjWJmla0sfKohlfTVpPN+93L/yLQ/IjQ/O5Q/VR5HdL4D7mlxmjwVdELAAAAAElFTkSuQmCC', + base64Empty: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAALeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTAxLTEzVDE5OjA5OjQwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wMS0xM1QxOTowOTo0MCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZWQwMWYzNWQtOWRjOC00MDBiLWEyMmQtNjM5OGZiNzVhNGRiIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDhlMzQ3ZmEtMDY2My1jYTRiLTgzNTctNTk4YjBkNGIzOTU2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6T3JpZW50YXRpb249IjEiIHRpZmY6WFJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iMSIgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMwMCIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjMwMCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBzdEV2dDp3aGVuPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNjg2NzJkLWY5NDMtOTU0Mi1iMDBiLTVlMDExNmE1NmIzZSIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxMDoyNjoxNiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDphYmJkZmUyZC0xY2Q2LTJiNDgtYjUyNS05YzlhZjdlNjA4NDMiIHN0RXZ0OndoZW49IjIwMjQtMDEtMTNUMTE6MjM6NDArMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTQ5MjM5MDAtNDhiZC03YTQ1LWI4NGItYmVlZTVjOWUxYTM1IiBzdEV2dDp3aGVuPSIyMDI0LTAxLTEzVDExOjIzOjQwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVkMDFmMzVkLTlkYzgtNDAwYi1hMjJkLTYzOThmYjc1YTRkYiIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxOTowOTo0MCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmFiYmRmZTJkLTFjZDYtMmI0OC1iNTI1LTljOWFmN2U2MDg0MyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjM2ZGQ4NTQxLWQ0MWEtYmY0Yy1iZjA3LWNmNjZhNjZhMDg2MSIgc3RSZWY6b3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmQwODAyODAyLTM1MmEtODU0YS05MWI3LTZkZTZkNTJlYjNkMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm30U/gAAAAJcEhZcwAALiMAAC4jAXilP3YAAAA/UExURUdwTODg4O3t7e7u7unp6d7e3uTk5M/Pz8nJyePj4+jo6Pj4+MrKyszMzO7u7unp6fb29vLy8vr6+v7+/sHBweag3xAAAAAOdFJOUwAxia5pF0n+/vzX3KbULQ2DYQAACG1JREFUeNrtm4l2o7gShi20IWFrAd7/WUc7EosDWKZ976Hc7WTmdMKXv0qlqpLyeNx222233Xbbbbfddtv/mOHn8xexSNsiRH5PrbFtW4p+DetpsF4v8Gs+HA3WEwOAfwzriYxaLTVsP8X1QK0z+vqQCzewYogi60aL9SEX5oyxphYVCFTGjfSJCTmN1jBruN5KTGCUS8bhySQGHRaohmW4glwtldbOeYJYKlgvbyUuA8aFFEKc++aIM4hrRnyiMnIZKq1PrihcM3GNKboMF1Naa9X9+8T1KrxIlVbGjv3cAEHOYYMqqgUsVuJqqehV3+sjDwB+DTJp0lYtMCyZpxqjF4e+74+sRcQSFZO8UonUSEFzuUY+DKo59A2kZDatGCjzCauy/2AmhSyCq0WHEj0KTNJDmVeNhErMt1Q8W4xti4/FwMJ4jaxl05TKFiNtD3kBGrHnhiph9V0eXQc6DkyE2xX830AlKshFTErXeuCZXK/9m41wFsGSfZ4lcGeyZ98PrylJ7MWCojQZ3qSukL2QslgdngqJnTEPdTJhXvbNBoR/+7wabIxWduN/Ja5dWEivm4XSZ2uQckNzmRlHrn2lc6eiafvS4V2Hd12tesau8toZW0CtWoZYb9t+OqxdCYKYjVPF16pVbILIy/gR7MVaWMHYPCoa2VkzkX4Iry2rirXbumGyAjGC1h62YLw6ApsNKZph3fpIWHt08JovRWD62sejpXhTrhWrPpl6zZ6PW2oTG5ltlvgtF6weNYCWKeJJSfg4W6PNJlj3sVZgOXV4lc8n4RlkMTLEBDVoYc3nI09kpyzzfgWsjyzBZSNDKF2/wjh+sxYvn8Y1scxlfLF9T1RBO3wVHsnq8Fk4oGkEh/0KJPSa8T2CeWE5X9BPmgLsaRIGeNL2kshCsWoLBmdPJW5Wbz1ndAKUXjPwxXYAUpSV3fy5BJg1aa1tyVXHHMgVH31ewDVrleHr9XqC684SUF4mecR3+wW5SC2QNvxUizRv98mLDhPgYiMDb+v8g0OADxqxcnf9w01mZYJF0fUVP5LcdswbsMmy1DVs5PlE5NpNiTR8M8qAWZkOy6aN13VcoOF2/s3xn3Mes8Xza05tgR/BuNz69nlNzMR0fH45p+G4R9oxh2mKt9MF4J7K/lvWUojwF5nCgCpuRUptnZMQ3au0nSo2UsHgV3xpmeLYzGml3ZFBBzYGPCpOQRwXs1/GG1J74dlZc6JKUOtjBAz9XjVxucGWHbZVJDPJQGYDRl1Qmf1ovk2Sbghb6MQlnF7mBzM1bgOqJAPpoOQaVe+4Skcit3uqHMyG/Sh1rHNN0gAfM0nnPrmulfLVBSm20TSZSdWa0LJl2ukVyE4vTYCgP3uQkwv1TKtQWgxDzBSg80OQjCs4klKvuUzHLCfIbDKIE/S5VIGqD1iD2819pkAqTWdmeina+oZABi7X5B1MGoTJqJSchuk6JNHcgUPAcsVFk0+N0oDN68Vo7FQSmCXjx46OEtUk1lpY2ZFQGr/AcpqVato4wPUD+RhfAeyQI5sJ6l2sDwnKqNFSJvpiyJbFl3kTOjZ2ievwCR7hkUoWeV2vOLAXvB39AJoyqYa81A5cvaAidXYTFTycKDBcalVK5f3XS89kzLVl9txfL+K+p6NUnitz5KkKm7D3DrRPNq4bk7l20aFRppNilmuQI+uzTtj9wPBkTsVwM7HbJ5pwGgujyRyZDzQLNoiRFluRtQ+GzEguqRxUL+ZMFqulMzIfaP3ARj2k/txB8c+2HyjmDizCaVWtNoE5MvMlKs/4VQ7HUJZCrU6qCKcNJ2aSWUZhJZu4VI0LB4CHFdj77DRuGi28WKAxoRyZyzGVrmc0jmk1nP5QaxZo1puqq1YIAqgZb8e/rABZJWNCNxV7DSTpOO7Aail9J9nYHtua/4ouE/aS0X1qtXQzwGx+rnbi2vhF/TfZG52oc6DPo1WCi3RTDnRk7TEntoEp38gg+DjYs2opkR3JW5EpL9rU0XSK5/6LOTAVS+72x7pm60zSf5HMdldjhzJqw1FRcxXdS3ZNZp0s92FiyluUvBPoD9ynZNkBiu2NF11ofnlnQbZgKqvusj9R/f6DOzgVsahbNlXxlsxU8y7qrbTupitRyxFBKG6H3aEPUqj7YrzAymq41FXlZLlO4WLbvG2Kg4vYB+wPfWS2B5Rq8TW9ROpAZbiF6MmCTsx1NLLsx7NOoOiZup2CNbZ36xc96ErcxzuILGrmmFhimjtwKo/yTm7feTVwB61IzbnW4967Kt3cDDotGt8JKrTiUyO3Uy2PZZt9tapXEfXhWmTgcoB+JchFWsiCKvYnhmn/tKuJDbgly897FnFfkE1rQLKy810OU7xW3bEJHCD5gERtuTGuxoJqA6qI9TNMa6MbvZomsiubbPYx78YXDaaRqqsyqfSaLZdjYGHLu65rDgydXCWm1P5EvcQ828f9pcBapTILSMv1nZCAc0WzFIFsGfUi/kmAxc6cFqDSYuPSMIbs1OVrwITTQM9HVRFJ5JL56qcoFzzT1uVcd2v9jFw8BHlcWtmEI86hp5Dy/zOlK8cUp/rVseRUBqawz6kmAcPLM9l5m8h4V53Iz/2mFJaTCvF8JbsMvPjU/7crbUXart0v4WyE0LnDPcAX95Knj4VUE8HCdNdUP8BDcOXKdPl4uSWbh4LfOV0HDdfipOmu+eIRrDsNPkIT7np/8ZAzVdOd1u8wHIqeXt8VqtgiO50ePeNaGG+uO9rHiKdL71pnIun8jxEKXv2r2HYBzO/mz96vFKoMM5WLk7tQXS9U5kwCu5lk7n6++kdCFWRaTUzm0/5fClWGWTrM/AGhCrJO/ZBQhTPFLwmV7ebgcdttt91222233Xbbbf+H9h+2WEtdHVinLAAAAABJRU5ErkJggg==', + base64Error: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAALeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTAxLTEzVDE5OjEwOjEwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wMS0xM1QxOToxMDoxMCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTQ3NTExNjAtZDY5MC00ZTkzLWFhNGUtNGMwYTViNGU1ZGFjIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRiNzlkYWMtZTJmYS1iNzQ0LWIxM2ItOWU1N2VjMDhhM2YwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6T3JpZW50YXRpb249IjEiIHRpZmY6WFJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iMSIgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMwMCIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjMwMCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBzdEV2dDp3aGVuPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNjg2NzJkLWY5NDMtOTU0Mi1iMDBiLTVlMDExNmE1NmIzZSIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxMDoyNjoxNiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZjk1NTE1OC04MjFiLTA4NDUtYWJmNS05YTE1NGM1ZTY4NjEiIHN0RXZ0OndoZW49IjIwMjQtMDEtMTNUMTE6MDQ6MDQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGM1Y2IyNWItZDZlNC0yZjQ2LTgyODQtZmUwOTNlY2M2ZTkxIiBzdEV2dDp3aGVuPSIyMDI0LTAxLTEzVDExOjA0OjA0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0NzUxMTYwLWQ2OTAtNGU5My1hYTRlLTRjMGE1YjRlNWRhYyIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxOToxMDoxMCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmNmOTU1MTU4LTgyMWItMDg0NS1hYmY1LTlhMTU0YzVlNjg2MSIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjM2ZGQ4NTQxLWQ0MWEtYmY0Yy1iZjA3LWNmNjZhNjZhMDg2MSIgc3RSZWY6b3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmQwODAyODAyLTM1MmEtODU0YS05MWI3LTZkZTZkNTJlYjNkMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph2LDQsAAAAJcEhZcwAACxMAAAsTAQCanBgAAAA5UExURUdwTNra2s7Ozq2tre3t7dPT087OzuPj4+3t7dbW1u/v79bW1vz8/MrKytDQ0Nzc3MPDw/X19bi4uMZQDnEAAAAKdFJOUwBqEPywotz+wzqApqiTAAAHW0lEQVR42u1b25akIAwcbx2UFoj//7HLTQVBRcSZfTDnbM/uTl/KSlEkwf75eeONN95444033njjjTduR9/0/yOsbqoevObL7101tYX1HFs9QFtfZalRP+rpQVgdAFx990ZnT8L6eZItUl99jeGpf1DxdV/VP9fV1f/PFlF1bYHoVFSRC60IyVjrFRnuB8IoxpExSrstsErKHpJw1eqybNLbAQvAYkKjUrjoBgKRqAaeIjG5+qaps6hKcMWmcdSwqAJWBbAgCZZaIYbsqggqqlHNbFFa5yVR4jKvrKEErOEjNCqNSwHrfE8lpLsod/u+cOPPMPBJ+Gz5dM0cXNgclre+pSxhYI1WW5Tf9ENSMIdLCiWs6q9hwQprBVYKFqyPlx4WtoSvrT9lC/wkGt8qlkQooC3hi6sgW3Bb8gtdpSV/za/mn49pC0oYhONbfyd5hzDLFivKFpTS1gKM0we0tQCEncfgQn7Rt+DC/299i1MSRJcBC0r7VviG5KZvwV5WIUobxHyrJKy8VRjXVgFYsPu5kOtbxdhycCDuihziXVLoW7xwEiUmDgd544B46luWLW+nugMLB2BimmC3cxTNxCDg8xFtuUSNqoFsDKzY8psa+XtBNWXr74N6qxwsS5T6VL5robKl10+ZRu5S9qBvUYuJwVHzjwjrE3G33qKh+WXBgmkmCvHYquTvZ8oo7rLFA4PJgYW0MdePIRQIGUPNbSMw5lubJMKtJI6+Wk6cVFMmACO+VVryeL7ZgI8MhwS2fnNPPK0geHBRd11eJSiyL4KjrL2umm1XIpRii1MKB/mU/iCZwF+pt5z3UJ7UiF3nQqadAXC3T3xEW2IyuDBe3yDTe0+A64it2WTyYSGVHymUI/EduvSWKJ80Dtv2NbYSoQxbMkVC7yzNGIWFvDF7gRD79RYrWW/BDGti4wwLtgvO7gWKUZ8Mt94qX8vLJE70+xVNwzDm9ghNM+FX7p/jlZUId2HJD+Tf79hMe3WNrAK/30E+C8/6xOCqbqxE5JNMYrNbnaLUvJAewfCg8zF0Ba/tbviWLvPYfsGFA1PVD8ZdnjlVc/DS/o7LK4NHjOjKKbfCTSCo5XmwKbaZM4jlc9NGEYd9Ijd0QS5ZGaOR2O+DPlGyRb2nXZzgnI1GdFWF+0gh3ifyTRqvzpXI2eElk58FeHziCF5hY+hSMV9Ge/mohUTGuQ4vzHYe8bW5sNdFQ58St22Vcf5zzJbtcGT4iYQ7iz8dFuxoWRYMjAM7KCnypHOTLSqdUwYIFpndOD/6B2FBzNQxYmW/zxYE4j8yLHga1s2Rbm/O5PXtGcuNDIW1dTj5hpjGsO+7z2Kk9NP1JWDlnWKAM4H6zCUNM05KyVPHBclYzUbgjE3N3tP2JWHBmbqD4GLeCs2jhMT13lMVljwcEbetwZgtHUxVQ21ho3fE7inf2s8vzMWq0EWpfOBg5hcDSGwaF2+LaysRIzNFqRgBv2sMhi/Ix0WiW8rBKNBv4ExBI7eorx9ANazsPCb5FkSNH+Reacos+AYxaFzX76KMH65c8ytzZ40YvpFAqtgC/otn1eCmMI5K8yVRQVVwq3aVtU+jJktwjyP7x+BKv8vtoH098vXYSJcrWGJcAW11r8WVRxe5vgcuFbXqwnaEZejS6mrLwYKUg1ch2RJswTFYgMOwoau+AQsSp/FuDhVZi7J402ifgGla/GJIzGLYG5H4rnKMCUydL9wcsmZSuPikR2QmjQbWqaV2ob2RdMvaLEvFlRiXpYeTwqVOtMZF+qi0dS4uEjJKMvWuYK3S0jHZwaq7BylYp/O2uu3q04lNqudLWEJQd/3paTBz12IaLIPtzE5P1AUuW9TB8NVzaG9/TIfV+eXsWeezz6HWlptEbo4SIAeWur/Y/RZC/gmZTiLzUY2j5ct6fjKsFvxqgyQxE9sbmfYtnJMIciEKo6+FL0wziJmtkzspIcUl0PgWrL7VCKP7hl61U4WLeN+7Ieli2vZhmq0VgjDOgIyhJ62sSpDkWNZa1wiB8WoLlxzy29XpGVPgn1ut5VYcGyRLK7OCiJaDYMrAneJUkZWdw0yDgNm5nDowqLc0Kp581FO7QS4pC9S/YRW9xkVdNOj0ZHCp9anEZw3VEK/fopiDrkMObkcdJtT1g6+uzQ60bIdUPztdWZWy53m+v/zFYPOGHO4AZsalmtJNkyHrCAx1RXX7mt5g1L1pDezpkXv8wJwpVRSSaf2c26Y0rrXXxyWBptu/ovdak+VhkqjGBZUdvKygqANKA/MqZ/36kcGwFn90RnWp66ksKuHgitLFY8BU+F2ZvqpxpMY9qR3YwOUJ12fc0KUHVKdswcKXuwetErCnwvMKuXxfc/3RVJ2yFc+iosQd3X+WGSVz1UiuN2J156FyVyHbsOUp3krezaPUT/VxXqdfwvknb/Zgp+idTxTbrkLqYuKreRnhy65Gf4W0NsDoYiqf6uZsvr8V9eo6XWc5+3TVf/3N1TfeeOONN95444033njjjTfeSI1/IeOYOeO4fGAAAAAASUVORK5CYII=', + base64BackToTop: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAElBMVEVRUVH+/v5HcEyZmZlRUVFRUVGm1ByOAAAABnRSTlPMzADMTZAJBBGsAAAEnElEQVR42t2cS27jMAyGf7/2U+QCQeDsbeQCgZDujaC5/1UmkzaJn+JDFGcw3LdfflKibJkkDnxrL7dbg7sNt6+L4O8OYBM+B0ys+QrGkHZG+OEEQ8g6go8Bx1GIGMdpNOQyIG6XdMgnSPtKhLQDGEZFBgYMkhKFtGBb0EIEjDgFRowoBVaMGAWpMedEfxMiZtwpUsgZCqtlkCNUdpVAWigtCCCDFtLwIWeoreZCWiRYYEKGFEjDg+yRZCUH0iLRAgNyToXUNCRZyMqWhGnUN2IPm3wSlwJ7IUspyCBkIQUZhCykIIeQuRTkEDKXAuM9srrtYbrZN7Y98giZSoFd+t1OxmMITG0dcrSFXFchZ1tIvQZpYWxhBbK3hpQrkMEa0iwh5t4a+QvZvDXyF7J5a+Qv5PPW21/I5623v5DPW29/IaO3Xv5Clrw1y1/Ikrdm+Qs5svw83yNnSJ5BQb4F/F7EIEJSnThGBAXxkFQfLOviQUE8JAUPsosHBfGQfDAtHhREQ1JxIV00KIgmrnRI84S0yAd5BAXxxJUck0f6Qnwr9qmr6xF5xLMjcwn/iudIEAdWnyjkEXlQKZiRVzoqRyLbgeUKKR8Q4alY7cSnoxzSf2ggsqehKr6YVpcXpOd7H93f60cKhOd7Re2LteUF4eLqiVS1mr0ge4io6C2+soaFkJ7MuuuQs1yITEp9hwwKISIpzR2iESKSIoT0rLNwuVHQqoSIpAQJpGce60vIUSdEIuUqgPTsJ5QFZK8UIpBS8iG94GFrDjlrhfCl8CG96Llxmle4kEr6vKWBPIVo9kqDQSRk9/3cWoikcCFPAd33v4dIChPyEvLzBA6RlEYWke4JEUnhKXkLeUEKxRHJFfKCQHGucIW8IdZSRkLeEGMpYyEjiK2UsZARxFTKRMgYYillImQMMZQyFTKB2EmZCplAuFLIHT8TMoWwpQwiIVMIUwqpZP5bp5CCvCTiQKr5f5lCQN+tPCBn2ZvVDFJwIDUP0m1BYAfZYRNSsCB7BqTbhoARePIxtZ9tgwWkoJcwCalmv3MBAemtO4R6dah2HaKQqj8Zvp9sQDjvJ21+SPCBHPJDDk6QITekEV7gqCC19CpKAym9IMfckKv4olMBCeIrWwVEfvkshzQekO9r9P1/ALk+IG1eSPCDiCJfyG+FyU+A6ZCa/piZDinpz7LpkCv5gdkAEshP5emQhv7onw6pGeULyZCSUYiRDAmMkpJkCKs4JhFSq8p8hJBSVbAkhARV6ZUQoisik0FqXTmcDHLVFfbJIEFXoiiCNMpiSxGkVJaNiiBBWQArgTTaUl4JpNQWJUsgQVteXQg+AKkLxQWFGKW+5J2+eVp4S168X3CF1CltCKdTJ8lb84YK2bUBO+wZW0Pqv9nk4tKu49N45NJC5dMM5tLW5tOg59Jq6NM06dL+abFXwr/RkuvTXJwae1abtE/Dt0/ruksTvs84AZ/BCC4jHnyGVfiM3VBQFANEXEah+Ax18RlP4zNox2dkkM/wI58xTn8yDCXGYCDV3W5RGSajtXyGhG1jbpbjzpwGt/0MJft8jqC7iUbQ/QZaxdnKqcIftwAAAABJRU5ErkJggg==', +} diff --git a/src/components/z-paging/js/z-paging-utils.js b/src/components/z-paging/js/z-paging-utils.js new file mode 100644 index 0000000..a97e7f0 --- /dev/null +++ b/src/components/z-paging/js/z-paging-utils.js @@ -0,0 +1,302 @@ +// [z-paging]宸ュ叿绫� + +import zLocalConfig from '../config/index' +import c from './z-paging-constant' + +const storageKey = 'Z-PAGING-REFRESHER-TIME-STORAGE-KEY'; +let config = null; +let configLoaded = false; +let cachedSystemInfo = null; +const timeoutMap = {}; + +// 鑾峰彇榛樿閰嶇疆淇℃伅 +function gc(key, defaultValue) { + // 杩欓噷return涓�涓嚱鏁颁互瑙e喅鍦╲ue3+appvue涓紝props榛樿閰嶇疆璇诲彇鍦╩ain.js涔嬪墠鎵ц瀵艰嚧uni.$zp鍏ㄥ眬閰嶇疆鏃犳晥鐨勯棶棰樸�傜浉褰撲簬props鐨刣efault涓紶鍏ヤ竴涓甫鏈夎繑鍥炲�肩殑鍑芥暟 + return () => { + // 澶勭悊z-paging鍏ㄥ眬閰嶇疆 + _handleDefaultConfig(); + // 濡傛灉鍏ㄥ眬閰嶇疆涓嶅瓨鍦紝鍒欒繑鍥為粯璁ゅ�� + if (!config) return defaultValue; + const value = config[key]; + // 濡傛灉鍏ㄥ眬閰嶇疆瀛樺湪浣嗗搴旂殑閰嶇疆椤逛笉瀛樺湪锛屽垯杩斿洖榛樿鍊硷紱鍙嶄箣杩斿洖閰嶇疆椤� + return value === undefined ? defaultValue : value; + }; +} + +// 鑾峰彇鏈�缁堢殑touch浣嶇疆 +function getTouch(e) { + let touch = null; + if (e.touches && e.touches.length) { + touch = e.touches[0]; + } else if (e.changedTouches && e.changedTouches.length) { + touch = e.changedTouches[0]; + } else if (e.datail && e.datail != {}) { + touch = e.datail; + } else { + return { touchX: 0, touchY: 0 } + } + return { + touchX: touch.clientX, + touchY: touch.clientY + }; +} + +// 鍒ゆ柇褰撳墠鎵嬪娍鏄惁鍦▃-paging鍐呰Е鍙� +function getTouchFromZPaging(target) { + if (target && target.tagName && target.tagName !== 'BODY' && target.tagName !== 'UNI-PAGE-BODY') { + const classList = target.classList; + if (classList && classList.contains('z-paging-content')) { + // 姝ゅ棰濆璁板綍褰撳墠z-paging鏄惁鏄〉闈㈡粴鍔ㄣ�佹槸鍚︽粴鍔ㄥ埌浜嗛《閮ㄣ�佹槸鍚︽槸鑱婂ぉ璁板綍妯″紡浠ヤ紶缁檙enderjs銆傞伩鍏嶄笉鍚寊-paging缁勪欢renderjs鍐呴儴鍒ゆ柇鏁版嵁浜掔浉褰卞搷瀵艰嚧鐨勫悇绉嶉棶棰� + return { + isFromZp: true, + isPageScroll: classList.contains('z-paging-content-page'), + isReachedTop: classList.contains('z-paging-reached-top'), + isUseChatRecordMode: classList.contains('z-paging-use-chat-record-mode') + }; + } else { + return getTouchFromZPaging(target.parentNode); + } + } else { + return { isFromZp: false }; + } +} + +// 閫掑綊鑾峰彇z-paging鎵�鍦ㄧ殑parent锛屽鏋滄煡鎵句笉鍒板垯杩斿洖null +function getParent(parent) { + if (!parent) return null; + if (parent.$refs.paging) return parent; + return getParent(parent.$parent); +} + +// 鎵撳嵃閿欒淇℃伅 +function consoleErr(err) { + console.error(`[z-paging]${err}`); +} + +// 寤舵椂鎿嶄綔锛屽鏋渒ey瀛樺湪锛岃皟鐢ㄦ椂娓呴櫎瀵瑰簲key涔嬪墠鐨勫欢鏃舵搷浣� +function delay(callback, ms = c.delayTime, key) { + const timeout = setTimeout(callback, ms);; + if (!!key) { + timeoutMap[key] && clearTimeout(timeoutMap[key]); + timeoutMap[key] = timeout; + } + return timeout; +} + +// 璁剧疆涓嬫媺鍒锋柊鏃堕棿 +function setRefesrherTime(time, key) { + const datas = getRefesrherTime() || {}; + datas[key] = time; + uni.setStorageSync(storageKey, datas); +} + +// 鑾峰彇涓嬫媺鍒锋柊鏃堕棿 +function getRefesrherTime() { + return uni.getStorageSync(storageKey); +} + +// 閫氳繃涓嬫媺鍒锋柊鏍囪瘑key鑾峰彇涓嬫媺鍒锋柊鏃堕棿 +function getRefesrherTimeByKey(key) { + const datas = getRefesrherTime(); + return datas && datas[key] ? datas[key] : null; +} + +// 閫氳繃涓嬫媺鍒锋柊鏍囪瘑key鑾峰彇涓嬫媺鍒锋柊鏃堕棿(鏍煎紡鍖栦箣鍚�) +function getRefesrherFormatTimeByKey(key, textMap) { + const time = getRefesrherTimeByKey(key); + const timeText = time ? _timeFormat(time, textMap) : textMap.none; + return `${textMap.title}${timeText}`; +} + +// 灏嗘枃鏈殑px鎴栬�卹px杞负px鐨勫�� +function convertToPx(text) { + const dataType = Object.prototype.toString.call(text); + if (dataType === '[object Number]') return text; + let isRpx = false; + if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) { + text = text.replace('rpx', '').replace('upx', ''); + isRpx = true; + } else if (text.indexOf('px') !== -1) { + text = text.replace('px', ''); + } + if (!isNaN(text)) { + if (isRpx) return Number(rpx2px(text)); + return Number(text); + } + return 0; +} + +// rpx => px锛岄鐣欑殑鍏煎澶勭悊 +function rpx2px(rpx) { + return uni.upx2px(rpx); +} + +// 鍚屾鑾峰彇绯荤粺淇℃伅锛屽吋瀹逛笉鍚屽钩鍙� +function getSystemInfoSync(useCache = false) { + if (useCache && cachedSystemInfo) { + return cachedSystemInfo; + } + // 鐩墠鍙敤鍒颁簡deviceInfo銆乤ppBaseInfo鍜寃indowInfo涓殑淇℃伅锛屽洜姝や粎鏁村悎杩欎袱涓俊鎭暟鎹� + const infoTypes = ['DeviceInfo', 'AppBaseInfo', 'WindowInfo']; + const { deviceInfo, appBaseInfo, windowInfo } = infoTypes.reduce((acc, key) => { + const method = `get${key}`; + if (uni[method] && uni.canIUse(method)) { + acc[key.charAt(0).toLowerCase() + key.slice(1)] = uni[method](); + } + return acc; + }, {}); + // 濡傛灉deviceInfo銆乤ppBaseInfo鍜寃indowInfo閮藉彲浠ヤ粠鍚勮嚜涓撳睘鐨刟pi涓幏鍙栵紝鍒欐暣鍚堝畠浠殑鏁版嵁 + if (deviceInfo && appBaseInfo && windowInfo) { + cachedSystemInfo = { ...deviceInfo, ...appBaseInfo, ...windowInfo }; + } else { + // 浣跨敤uni.getSystemInfoSync鍏滃簳锛岀‘淇濊兘鑾峰彇鍒版渶缁堢殑绯荤粺淇℃伅 + cachedSystemInfo = uni.getSystemInfoSync(); + } + return cachedSystemInfo; +} + +// 鑾峰彇褰撳墠鏃堕棿 +function getTime() { + return (new Date()).getTime(); +} + +// 鑾峰彇z-paging瀹炰緥id锛岄殢鏈虹敓鎴�10浣嶆暟瀛�+瀛楁瘝 +function getInstanceId() { + const s = []; + const hexDigits = "0123456789abcdef"; + for (let i = 0; i < 10; i++) { + s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); + } + return s.join('') + getTime(); +} + +// 绛夊緟涓�娈垫椂闂� +function wait(ms) { + return new Promise(resolve => { + setTimeout(resolve, ms); + }); +} + +// 鏄惁鏄痯romise +function isPromise(func) { + return Object.prototype.toString.call(func) === '[object Promise]'; +} + +// 娣诲姞鍗曚綅 +function addUnit(value, unit) { + if (Object.prototype.toString.call(value) === '[object String]') { + let tempValue = value; + tempValue = tempValue.replace('rpx', '').replace('upx', '').replace('px', ''); + if (value.indexOf('rpx') === -1 && value.indexOf('upx') === -1 && value.indexOf('px') !== -1) { + tempValue = parseFloat(tempValue) * 2; + } + value = tempValue; + } + return unit === 'rpx' ? value + 'rpx' : (value / 2) + 'px'; +} + +// 娣辨嫹璐� +function deepCopy(obj) { + if (typeof obj !== 'object' || obj === null) return obj; + let newObj = Array.isArray(obj) ? [] : {}; + for (let key in obj) { + if (obj.hasOwnProperty(key)) { + newObj[key] = deepCopy(obj[key]); + } + } + return newObj; +} + +// ------------------ 绉佹湁鏂规硶 ------------------------ +// 澶勭悊鍏ㄥ眬閰嶇疆 +function _handleDefaultConfig() { + // 纭繚鍙姞杞戒竴娆″叏灞�閰嶇疆 + if (configLoaded) return; + // 浼樺厛浠巆onfig.js涓鍙� + if (zLocalConfig && Object.keys(zLocalConfig).length) { + config = zLocalConfig; + } + // 濡傛灉鍦╟onfig.js涓鍙栦笉鍒帮紝鍒欏皾璇曞埌uni.$zp璇诲彇 + if (!config && uni.$zp) { + config = uni.$zp.config; + } + // 灏哻onfig涓殑鐭í绾垮啓娉曞叏閮ㄨ浆涓洪┘宄板啓娉曪紝浣垮緱璇诲彇閰嶇疆鏃跺彲浠ョ洿鎺ラ�氳繃key鍘诲尮閰嶏紝鑰岄潪璇诲彇姣忎釜閰嶇疆鏃跺�欏啀鍘昏浆锛屽噺灏戜笉蹇呰鐨勬�ц兘寮�鏀� + config = config ? Object.keys(config).reduce((result, key) => { + result[_toCamelCase(key)] = config[key]; + return result; + }, {}) : null; + configLoaded = true; +} + +// 鏃堕棿鏍煎紡鍖� +function _timeFormat(time, textMap) { + const date = new Date(time); + const currentDate = new Date(); + // 璁剧疆time瀵瑰簲鐨勫ぉ锛屽幓闄ゆ椂鍒嗙锛屼娇寰楀彲浠ョ洿鎺ユ瘮杈冩棩鏈� + const dateDay = new Date(time).setHours(0, 0, 0, 0); + // 璁剧疆褰撳墠鐨勫ぉ锛屽幓闄ゆ椂鍒嗙锛屼娇寰楀彲浠ョ洿鎺ユ瘮杈冩棩鏈� + const currentDateDay = new Date().setHours(0, 0, 0, 0); + const disTime = dateDay - currentDateDay; + let dayStr = ''; + const timeStr = _dateTimeFormat(date); + if (disTime === 0) { + dayStr = textMap.today; + } else if (disTime === -86400000) { + dayStr = textMap.yesterday; + } else { + dayStr = _dateDayFormat(date, date.getFullYear() !== currentDate.getFullYear()); + } + return `${dayStr} ${timeStr}`; +} + +// date鏍煎紡鍖栦负骞存湀鏃� +function _dateDayFormat(date, showYear = true) { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return showYear ? `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}` : `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`; +} + +// data鏍煎紡鍖栦负鏃跺垎 +function _dateTimeFormat(date) { + const hour = date.getHours(); + const minute = date.getMinutes(); + return `${_fullZeroToTwo(hour)}:${_fullZeroToTwo(minute)}`; +} + +// 涓嶆弧2浣嶅湪鍓嶉潰濉厖0 +function _fullZeroToTwo(str) { + str = str.toString(); + return str.length === 1 ? '0' + str : str; +} + +// 椹煎嘲杞煭妯嚎 +function _toKebab(value) { + return value.replace(/([A-Z])/g, "-$1").toLowerCase(); +} + +// 鐭í绾胯浆椹煎嘲 +function _toCamelCase(value) { + return value.replace(/-([a-z])/g, (_, group1) => group1.toUpperCase()); +} + + +export default { + gc, + setRefesrherTime, + getRefesrherFormatTimeByKey, + getTouch, + getTouchFromZPaging, + getParent, + convertToPx, + getTime, + getInstanceId, + consoleErr, + delay, + wait, + isPromise, + addUnit, + deepCopy, + rpx2px, + getSystemInfoSync +}; diff --git a/src/components/z-paging/wxs/z-paging-renderjs.js b/src/components/z-paging/wxs/z-paging-renderjs.js new file mode 100644 index 0000000..359f1ac --- /dev/null +++ b/src/components/z-paging/wxs/z-paging-renderjs.js @@ -0,0 +1,67 @@ +// [z-paging]浣跨敤renderjs鍦╝pp-vue鍜宧5涓touchmove浜嬩欢鍐掓场杩涜澶勭悊 + +import u from '../js/z-paging-utils' +const data = { + startY: 0, + isTouchFromZPaging: false, + isUsePageScroll: false, + isReachedTop: true, + isIosAndH5: false, + useChatRecordMode: false, + appLaunched: false +} + +export default { + mounted() { + if (window) { + this._handleTouch(); + // #ifdef APP-VUE + this.$ownerInstance.callMethod('_handlePageLaunch'); + // #endif + } + }, + methods: { + // 鎺ユ敹閫昏緫灞傚彂閫佺殑鏁版嵁锛堟槸鍚︽槸ios+h5锛� + renderPropIsIosAndH5Change(newVal) { + if (newVal === -1) return; + data.isIosAndH5 = newVal; + }, + + // 鎷︽埅澶勭悊touch浜嬩欢 + _handleTouch() { + if (!window.$zPagingRenderJsInited) { + window.$zPagingRenderJsInited = true; + window.addEventListener('touchstart', this._handleTouchstart, { passive: true }) + window.addEventListener('touchmove', this._handleTouchmove, { passive: false }) + } + }, + // 澶勭悊touch寮�濮� + _handleTouchstart(e) { + const touch = u.getTouch(e); + data.startY = touch.touchY; + const touchResult = u.getTouchFromZPaging(e.target); + data.isTouchFromZPaging = touchResult.isFromZp; + data.isUsePageScroll = touchResult.isPageScroll; + data.isReachedTop = touchResult.isReachedTop; + data.useChatRecordMode = touchResult.isUseChatRecordMode; + }, + // 澶勭悊touch涓� + _handleTouchmove(e) { + const touch = u.getTouch(e); + const moveY = touch.touchY - data.startY; + // 濡傛灉鏄湪z-paging鍐呰Е鎽稿苟涓旓紙鏄湪椤堕儴浣嶇疆涓旀槸涓嬫媺鐨勬儏鍐典笅锛堟垨涓嶆槸鑱婂ぉ璁板綍婊氬姩妯″紡骞朵笖鍦╥OS+h5+scroll-view骞朵笖鏄線涓婃媺鐨勬儏鍐碉細閬垮厤鍦ㄦ骞冲彴涓粴鍔ㄥ埌搴曢儴鍚庝笂鎷夋湁涓郴缁熺伆鑹查伄缃╁鑷村垪琛ㄨ鐭殏閿佸畾鐨勯棶棰橈級锛� + // (data.useChatRecordMode ? moveY < 0 : moveY > 0)鏄负浜嗗垽鏂槸鍚︽槸涓婃媺鐨勬儏鍐碉紝鑱婂ぉ璁板綍妯″紡鍒楄〃鍊掔疆锛屽洜姝oveY < 0涓轰笂鎷� + if (data.isTouchFromZPaging && ((data.isReachedTop && (data.useChatRecordMode ? moveY < 0 : moveY > 0)) || (!data.useChatRecordMode && data.isIosAndH5 && !data.isUsePageScroll && moveY < 0))) { + if (e.cancelable && !e.defaultPrevented) { + // 闃绘浜嬩欢鍐掓场锛屼互閬垮厤鍦ㄤ竴浜涘钩鍙颁腑涓嬫媺鍒锋柊鏃舵暣涓猵age璺熺潃涓�璧蜂笅鎷�&鍦╥OS+h5+scroll-view涓湪搴曢儴涓婃媺鏈変釜绯荤粺鐏拌壊閬僵瀵艰嚧鍒楄〃琚煭鏆傞攣瀹氱殑闂 + e.preventDefault(); + } + } + }, + // 绉婚櫎touch鐩稿叧浜嬩欢鐩戝惉 + _removeAllEventListener(){ + window.removeEventListener('touchstart'); + window.removeEventListener('touchmove'); + } + } +}; diff --git a/src/components/z-paging/wxs/z-paging-wxs.wxs b/src/components/z-paging/wxs/z-paging-wxs.wxs new file mode 100644 index 0000000..ed21959 --- /dev/null +++ b/src/components/z-paging/wxs/z-paging-wxs.wxs @@ -0,0 +1,382 @@ +// [z-paging]寰俊灏忕▼搴忋�丵Q灏忕▼搴忋�乤pp-vue銆乭5涓婁娇鐢╳xs瀹炵幇鑷畾涔変笅鎷夊埛鏂帮紝闄嶄綆閫昏緫灞備笌瑙嗗浘灞傜殑閫氫俊鎶樻崯锛屾彁鍗囨�ц兘 + +var currentDis = 0; +var isPCFlag = -1; +var startY = -1; + +// 鐩戝惉js灞備紶杩囨潵鐨勬暟鎹� +function propObserver(newVal, oldVal, ownerIns, ins) { + var state = ownerIns.getState() || {}; + state.currentIns = ins; + var dataset = ins.getDataset(); + var loading = dataset.loading == true; + // 濡傛灉鏄笅鎷夊埛鏂扮粨鏉燂紝鏇存柊transform + if (newVal && newVal.indexOf('end') != -1) { + var transition = newVal.split('end')[0]; + _setTransform('translateY(0px)', ins, false, transition); + state.moveDis = 0; + state.oldMoveDis = 0; + currentDis = 0; + } else if (newVal && newVal.indexOf('begin') != -1) { + // 濡傛灉鏄笅鎷夊埛鏂板紑濮嬶紝鏇存柊transform + var refresherThreshold = ins.getDataset().refresherthreshold; + _setTransformValue(refresherThreshold, ins, state, false); + } +} + +// touch寮�濮� +function touchstart(e, ownerIns) { + var ins = _getIns(ownerIns); + var state = {}; + var dataset = {}; + ownerIns.callMethod('_handleListTouchstart'); + if (ins) { + state = ins.getState(); + dataset = ins.getDataset(); + if (_touchDisabled(e, ins, 0)) return; + } + var isTouchEnded = state.isTouchEnded; + state.oldMoveDis = 0; + var touch = _getTouch(e); + var loading = _isTrue(dataset.loading); + state.startY = touch.touchY; + startY = state.startY; + state.lastTouch = touch; + if (!loading && isTouchEnded) { + state.isTouchmoving = false; + } + state.isTouchEnded = false; + // 閫氱煡js灞倀ouch寮�濮� + ownerIns.callMethod('_handleRefresherTouchstart', touch); +} + +// touch涓� +function touchmove(e, ownerIns) { + var touch = _getTouch(e); + var ins = _getIns(ownerIns); + var dataset = ins.getDataset(); + var refresherThreshold = dataset.refresherthreshold; + var refresherF2Threshold = dataset.refresherf2threshold; + var refresherF2Enabled = _isTrue(dataset.refresherf2enabled); + var isIos = _isTrue(dataset.isios); + var state = ins.getState(); + var watchTouchDirectionChange = _isTrue(dataset.watchtouchdirectionchange); + var moveDisObj = {}; + var moveDis = 0; + var prevent = false; + // 濡傛灉闇�瑕佺洃鍚瑃ouch鏂瑰悜鐨勬敼鍙� + if (watchTouchDirectionChange) { + moveDisObj = _getMoveDis(e, ins); + moveDis = moveDisObj.currentDis; + prevent = moveDisObj.isDown; + var direction = prevent ? 'top' : 'bottom'; + // 纭繚鍙湪touch鏂瑰悜鏀瑰彉鏃堕�氱煡涓�娆s灞傦紝鑰屼笉鏄痶ouchmove涓寔缁�氱煡 + if (prevent == state.oldTouchDirection && prevent != state.oldEmitedTouchDirection) { + ownerIns.callMethod('_handleTouchDirectionChange', { direction: direction }); + state.oldEmitedTouchDirection = prevent; + } + state.oldTouchDirection = prevent; + } + // 鍒ゆ柇鏄惁鍏佽涓嬫媺鍒锋柊 + if (_touchDisabled(e, ins, 1)) { + _handlePullingDown(state, ownerIns, false); + return true; + } + // 鍒ゆ柇涓嬫媺鍒锋柊鐨勮搴︽槸鍚﹀湪瑕佹眰鑼冨洿鍐� + if (!_getAngleIsInRange(e, touch, state, dataset)) { + _handlePullingDown(state, ownerIns, false); + return true; + } + moveDisObj = _getMoveDis(e, ins); + moveDis = moveDisObj.currentDis; + prevent = moveDisObj.isDown; + if (moveDis < 0) { + // moveDis灏忎簬0锛屽皢transform閲嶇疆涓�0 + _setTransformValue(0, ins, state, false); + _handlePullingDown(state, ownerIns, false); + return true; + } + if (prevent && !state.disabledBounce) { + // 濡傛灉鏄敤鎴蜂笅鎷夊苟涓旈渶瑕佽Е鍙戜笅鎷夊埛鏂帮紝闇�瑕侀�氱煡js灞傚皢鍒楄〃绂佹婊氬姩锛岄槻姝㈠湪涓嬫媺鍒锋柊杩囩▼涓垪琛ㄤ篃鍙互婊氬姩瀵艰嚧鐨勪笅鎷夊埛鏂板亸绉昏繃澶х殑闂锛堝湪涓嬫媺鍒锋柊杩囩▼涓粎閫氱煡涓�娆★級 + ownerIns.callMethod('_handleScrollViewBounce', { bounce: false }); + state.disabledBounce = true; + _handlePullingDown(state, ownerIns, prevent); + return !prevent; + } + // 鏇存柊transform + _setTransformValue(moveDis, ins, state, false); + var oldRefresherStatus = state.refresherStatus; + var oldIsTouchmoving = _isTrue(dataset.oldistouchmoving); + var hasTouchmove = _isTrue(dataset.hastouchmove); + var isTouchmoving = state.isTouchmoving; + state.refresherStatus = moveDis >= refresherThreshold ? (refresherF2Enabled && moveDis > refresherF2Threshold ? 'goF2' : 'releaseToRefresh') : 'default'; + if (!isTouchmoving) { + state.isTouchmoving = true; + isTouchmoving = true; + } + if (state.isTouchEnded) { + state.isTouchEnded = false; + } + // 濡傛灉闇�瑕佸疄鏃剁洃鍚笅鎷変綅缃亸绉伙紝鍒欓渶瑕佸疄鏃堕�氱煡js灞傦紝姝ゆ搷浣滀細浣縲xs灞備笌js灞傞绻侀�氫俊浠庤�屽鑷村湪涓�浜涙�ц兘杈冨樊璁惧涓笅鎷夊埛鏂板崱椤� + if (hasTouchmove) { + ownerIns.callMethod('_handleWxsPullingDown', { moveDis: moveDis, diffDis: moveDisObj.diffDis }); + } + // 鍦ㄤ笅鎷夊埛鏂扮姸鎬佹敼鍙樻椂閫氱煡js灞� + if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving != isTouchmoving) { + ownerIns.callMethod('_handleRefresherTouchmove', moveDis, touch); + } + _handlePullingDown(state, ownerIns, prevent); + return !prevent; +} + +// touch缁撴潫 +function touchend(e, ownerIns) { + var touch = _getTouch(e); + var ins = _getIns(ownerIns); + var dataset = ins.getDataset(); + var state = ins.getState(); + if (state.disabledBounce) { + // 閫氱煡js鍏佽鍒楄〃婊氬姩 + ownerIns.callMethod('_handleScrollViewBounce', { bounce: true }); + state.disabledBounce = false; + } + if (_touchDisabled(e, ins, 2)) return; + state.reachMaxAngle = true; + state.hitReachMaxAngleCount = 0; + state.fixedIsTopHitCount = 0; + if (!state.isTouchmoving) return; + var oldRefresherStatus = state.refresherStatus; + var oldMoveDis = state.moveDis; + var refresherThreshold = ins.getDataset().refresherthreshold; + var moveDis = _getMoveDis(e, ins).currentDis; + if (!(moveDis >= refresherThreshold && oldRefresherStatus === 'releaseToRefresh')) { + state.isTouchmoving = false; + } + // 閫氱煡js灞倀ouch缁撴潫 + ownerIns.callMethod('_handleRefresherTouchend', moveDis); + state.isTouchEnded = true; + if (oldMoveDis < refresherThreshold) return; + var animate = false; + if (moveDis >= refresherThreshold) { + moveDis = refresherThreshold; + animate = true; + } + _setTransformValue(moveDis, ins, state, animate); +} + +// #ifdef H5 +// 鍒ゆ柇鏄惁鏄痯c骞冲彴 +function isPC() { + if (!navigator) return false; + if (isPCFlag != -1) return isPCFlag; + var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; + isPCFlag = agents.every(function(item) { return navigator.userAgent.indexOf(item) < 0 }); + return isPCFlag; +} + +var movable = false; + +// 鍦╬c骞冲彴鐩戝惉mousedown銆乵ousemove銆乵ouseup绛夌浉鍏充簨浠跺苟杞负瀵瑰簲touch浜嬩欢澶勭悊锛屼娇寰楀湪pc骞冲彴涔熸敮鎸侀�氳繃榧犳爣杩涜涓嬫媺鍒锋柊 + +function mousedown(e, ins) { + if (!isPC()) return; + touchstart(e, ins); + movable = true; +} + +function mousemove(e, ins) { + if (!isPC() || !movable) return; + touchmove(e, ins); +} + +function mouseup(e, ins) { + if (!isPC()) return; + touchend(e, ins); + movable = false; +} + +function mouseleave(e, ins) { + if (!isPC()) return; + movable = false; +} +// #endif + + +// 淇敼瑙嗗浘灞倀ransform +function _setTransformValue(value, ins, state, animate) { + value = value || 0; + if (state.moveDis == value) return; + state.moveDis = value; + _setTransform('translateY(' + value + 'px)', ins, animate, ''); +} + +// 璁剧疆瑙嗗浘灞倀ransform锛岀洿鎺ュ湪瑙嗗浘灞傛搷浣滀笅鎷夊埛鏂帮紝浣垮緱js灞備笉闇�瑕侀绻佸拰瑙嗗浘灞傞�氫俊锛屼粠鑰屽ぇ澶ф彁鍗囦笅鎷夊埛鏂版�ц兘 +function _setTransform(transform, ins, animate, transition) { + var dataset = ins.getDataset(); + if (_isTrue(dataset.refreshernotransform)) return; + transform = transform == 'translateY(0px)' ? 'none' : transform; + ins.requestAnimationFrame(function() { + var stl = { 'transform': transform }; + if (animate) { + stl['transition'] = 'transform .1s linear'; + } + if (transition.length) { + stl['transition'] = transition; + } + ins.setStyle(stl); + }) +} + +// 杩涗竴姝ュ鐞嗕笅鎷夊埛鏂扮殑鍋忕Щ鏁版嵁 +function _getMoveDis(e, ins) { + var state = ins.getState(); + var refresherThreshold = parseFloat(ins.getDataset().refresherthreshold); + var refresherOutRate = parseFloat(ins.getDataset().refresheroutrate); + var refresherPullRate = parseFloat(ins.getDataset().refresherpullrate); + var touch = _getTouch(e); + var currentStartY = !state.startY || state.startY == 'NaN' ? startY : state.startY; + var moveDis = touch.touchY - currentStartY; + var oldMoveDis = state.oldMoveDis || 0; + state.oldMoveDis = moveDis; + // 鑾峰彇褰撳墠涓嬫媺鍒锋柊浣嶇疆涓庝笂娆$殑鍋忕Щ閲� + var diffDis = moveDis - oldMoveDis; + if (diffDis > 0) { + // 瀵瑰亸绉婚噺杩涜杩涗竴姝ュ鐞嗭紝閫氳繃refresherPullRate绛夐厤缃繘琛岀害鏉� + diffDis = diffDis * refresherPullRate; + if (currentDis > refresherThreshold) { + diffDis = diffDis * (1 - refresherOutRate); + } + } + // 鎺у埗diffDis杩囧ぇ鐨勬儏鍐碉紝姣斿杩涘叆椤甸潰绐佺劧鐚涚劧涓嬫媺锛屾鏃禿iffDis涓嶅簲杩涜澶ぇ鐨勫亸绉� + diffDis = diffDis > 100 ? diffDis / 100 : (diffDis > 20 ? diffDis / 2.2 : diffDis); + currentDis += diffDis; + currentDis = Math.max(0, currentDis); + return { + currentDis: currentDis, + diffDis: diffDis, + isDown: diffDis > 0 + }; +} + +// 鑾峰彇缁忚繃缁熶竴鏍煎紡鍖呰鐨勫綋鍓峵ouch瀵硅薄 +function _getTouch(e) { + var touch = e; + if (e.touches && e.touches.length) { + touch = e.touches[0]; + } else if (e.changedTouches && e.changedTouches.length) { + touch = e.changedTouches[0]; + } else if (e.datail && e.datail != {}) { + touch = e.datail; + } + return { + touchX: touch.clientX, + touchY: touch.clientY + }; +} + +// 鑾峰彇褰撳墠currentIns +function _getIns(ownerIns) { + var ins = ownerIns.getState().currentIns; + if (!ins) { + ownerIns.callMethod('_handlePropUpdate'); + } + return ins; +} + +// 鍒ゆ柇褰撳墠鐘舵�佹槸鍚﹀厑璁镐笅鎷夊埛鏂� +function _touchDisabled(e, ins, processTag) { + var dataset = ins.getDataset(); + var state = ins.getState(); + var loading = _isTrue(dataset.loading); + var useChatRecordMode = _isTrue(dataset.usechatrecordmode); + var refresherEnabled = _isTrue(dataset.refresherenabled); + var useCustomRefresher = _isTrue(dataset.usecustomrefresher); + var usePageScroll = _isTrue(dataset.usepagescroll); + var pageScrollTop = parseFloat(dataset.pagescrolltop); + var scrollTop = parseFloat(dataset.scrolltop); + var finalScrollTop = usePageScroll ? pageScrollTop : scrollTop; + var fixedIsTop = false; + // 鏄惁瑕佸鐞嗘粴鍔ㄥ埌椤堕儴scrollTop涓嶄负0鏃跺�欑殑瀹归敊锛屼负瑙e喅鍦ㄥ畨鍗撲腑scroll-view鏈夋鐜囨粴鍔ㄥ埌椤堕儴鏃秙crollTop涓嶄负0瀵艰嚧涓嬫媺鍒锋柊鍒ゆ柇寮傚父锛屼絾姝ゆ柟妗堜細瀵艰嚧鏌愪簺鎯呭喌锛堜緥濡傛粴鍔ㄥ埌璺濈椤堕儴10px澶勶級涓嬫媺鎶栧姩锛屽洜姝ゆ敼涓洪�氳繃鑾峰彇zp-scroll-view鐨勮妭鐐逛俊鎭腑鐨剆crollTop杩涜楠岃瘉鐨勬柟妗� + var handleFaultTolerantMove = false; + if (handleFaultTolerantMove && finalScrollTop == (state.startScrollTop || 0) && finalScrollTop <= 105) { + fixedIsTop = true; + } + var fixedIsTopHitCount = state.fixedIsTopHitCount || 0; + if (fixedIsTop) { + fixedIsTopHitCount ++; + if (fixedIsTopHitCount <= 2) { + fixedIsTop = false; + } + state.fixedIsTopHitCount = fixedIsTopHitCount; + } else { + state.fixedIsTopHitCount = 0; + } + if (handleFaultTolerantMove && processTag === 0) { + state.startScrollTop = finalScrollTop || 0; + } + if (handleFaultTolerantMove && processTag === 2) { + fixedIsTop = true; + } + return loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher || + ((usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) || + ((!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop); +} + +// 鍒ゆ柇涓嬫媺鍒锋柊鐨勮搴︽槸鍚﹀湪瑕佹眰鑼冨洿鍐� +function _getAngleIsInRange(e, touch, state, dataset) { + var maxAngle = dataset.refreshermaxangle; + var refresherAecc = _isTrue(dataset.refresheraecc); + var lastTouch = state.lastTouch; + var reachMaxAngle = state.reachMaxAngle; + var moveDis = state.oldMoveDis; + if (!lastTouch) return true; + if (maxAngle >= 0 && maxAngle <= 90 && lastTouch) { + // 鑰冭檻涓嬫媺鍒锋柊鎵嬪娍鐢辨按骞崇Щ鍔ㄨ浆涓哄瀭鐩存柟鍚戠Щ鍔ㄧ殑鎯呭喌锛屾鏃朵笉搴斿綋鍙垽鏂瀭鐩存柟鍚戣搴︽槸鍚︾鍚堣姹傦紝搴斿綋鐩存帴绂佹浠ラ伩鍏嶅湪swiper涓娇鐢ㄤ笅鎷夊埛鏂版椂锛屾í鍚戝垏鎹wiper閫斾腑鎵嬫湭绂诲紑灞忓箷杩樺彲浠ヤ笅鎷夊埛鏂扮殑闂 + if ((!moveDis || moveDis < 1) && !refresherAecc && reachMaxAngle != null && !reachMaxAngle) return false; + var x = Math.abs(touch.touchX - lastTouch.touchX); + var y = Math.abs(touch.touchY - lastTouch.touchY); + var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); + if ((x || y) && x > 1) { + // 鑾峰彇涓嬫媺鍒锋柊鍓嶅悗涓ゆ浣嶇Щ鐨勮搴� + var angle = Math.asin(y / z) / Math.PI * 180; + if (angle < maxAngle) { + // 濡傛灉瑙掑害灏忎簬閰嶇疆瑕佹眰锛屽垯return锛屽悓鏃堕�氳繃hitReachMaxAngleCount鎺у埗瑙掑害鍒ゆ柇鐨勭伒鏁忕▼搴︿互鏈�澶х▼搴﹀吋瀹瑰悇绉嶄娇鐢ㄥ満鏅� + var hitReachMaxAngleCount = state.hitReachMaxAngleCount || 0; + state.hitReachMaxAngleCount = ++hitReachMaxAngleCount; + if (state.hitReachMaxAngleCount > 2) { + state.lastTouch = touch; + state.reachMaxAngle = false; + } + return false; + } + } + } + state.lastTouch = touch; + return true; +} + +// 杩涗竴姝ュ鐞嗘槸鍚﹀湪涓嬫媺鍒锋柊骞堕�氱煡js灞� +function _handlePullingDown(state, ins, onPullingDown) { + var oldOnPullingDown = state.onPullingDown || false; + if (oldOnPullingDown != onPullingDown) { + ins.callMethod('_handleWxsPullingDownStatusChange', onPullingDown); + } + state.onPullingDown = onPullingDown; +} + +// 鍒ゆ柇js灞備紶杩囨潵鐨勫�兼槸鍚︿负true +function _isTrue(value) { + value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false; + return value == true || value == 'true'; +} + +module.exports = { + touchstart: touchstart, + touchmove: touchmove, + touchend: touchend, + mousedown: mousedown, + mousemove: mousemove, + mouseup: mouseup, + mouseleave: mouseleave, + propObserver: propObserver +} diff --git a/src/components/z-paging/z-paging.vue b/src/components/z-paging/z-paging.vue new file mode 100644 index 0000000..7c0bff8 --- /dev/null +++ b/src/components/z-paging/z-paging.vue @@ -0,0 +1,538 @@ + <!-- _ + ____ _ __ __ _ __ _(_)_ __ __ _ + |_ /____| '_ \ / _` |/ _` | | '_ \ / _` | + / /_____| |_) | (_| | (_| | | | | | (_| | + /___| | .__/ \__,_|\__, |_|_| |_|\__, | + |_| |___/ |___/ +v2.8.6 (2025-03-17) +@author ZXLee <admin@zxlee.cn> +--> +<!-- 鏂囨。鍦板潃锛歨ttps://z-paging.zxlee.cn --> +<!-- github鍦板潃锛歨ttps://github.com/SmileZXLee/uni-z-paging --> +<!-- dcloud鍦板潃锛歨ttps://ext.dcloud.net.cn/plugin?id=3935 --> +<!-- 鍙嶉QQ缇わ細343409055 --> + +<template name="z-paging"> + <!-- #ifndef APP-NVUE --> + <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> + <!-- 椤堕儴鍥哄畾鐨剆lot --> + <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}]"> + <slot name="top" /> + </view> + <view :class="{'zp-view-super':true,'zp-scroll-view-super':!usePageScroll}" :style="[finalScrollViewStyle]"> + <view v-if="zSlots.left" :class="{'zp-page-left':true,'zp-absoulte':finalIsOldWebView}"> + <slot name="left" /> + </view> + <view :class="{'zp-scroll-view-container':true,'zp-absoulte':finalIsOldWebView}" :style="[scrollViewContainerStyle]"> + <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-left="scrollLeft" :scroll-x="scrollX" + :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" + :refresher-default-style="finalRefresherDefaultStyle" :refresher-background="refresherBackground" + :refresher-triggered="finalRefresherTriggered" @scroll="_scroll" @scrolltolower="_onScrollToLower" + @scrolltoupper="_onScrollToUpper" @refresherrestore="_onRestore" @refresherrefresh="_onRefresh(true)" + > + <view class="zp-paging-touch-view" + <!-- #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 --> + @touchstart="_refresherTouchstart" @touchmove="_refresherTouchmove" @touchend="_refresherTouchend" @touchcancel="_refresherTouchend" + <!-- #endif --> + <!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 --> + @touchstart="pagingWxs.touchstart" @touchmove="pagingWxs.touchmove" @touchend="pagingWxs.touchend" @touchcancel="pagingWxs.touchend" + @mousedown="pagingWxs.mousedown" @mousemove="pagingWxs.mousemove" @mouseup="pagingWxs.mouseup" @mouseleave="pagingWxs.mouseleave" + <!-- #endif --> + > + <view v-if="finalRefresherFixedBacHeight>0" class="zp-fixed-bac-view" :style="[{'background': refresherFixedBackground,'height': `${finalRefresherFixedBacHeight}px`}]"></view> + <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-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" + :data-refresherAecc="refresherAngleEnableChangeContinued" :data-usePageScroll="usePageScroll" :data-watchTouchDirectionChange="watchTouchDirectionChange" + :data-oldIsTouchmoving="isTouchmoving" :data-refresherOutRate="finalRefresherOutRate" :data-refresherPullRate="finalRefresherPullRate" :data-hasTouchmove="hasTouchmove" + <!-- #endif --> + <!-- #ifdef APP-VUE || H5 --> + :change:renderPropIsIosAndH5="pagingRenderjs.renderPropIsIosAndH5Change" :renderPropIsIosAndH5="isIosAndH5" + <!-- #endif --> + > + <view v-if="showRefresher" class="zp-custom-refresher-view" :style="[{'margin-top': `-${finalRefresherThreshold+refresherThresholdUpdateTag}px`,'background': refresherBackground,'opacity': isTouchmoving ? 1 : 0}]"> + <view class="zp-custom-refresher-container" :style="[{'height': `${finalRefresherThreshold}px`,'background': refresherBackground}]"> + <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)&&!(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" :isIos="isIos" + :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" /> + </view> + </view> + <view class="zp-paging-container" :style="[{justifyContent:useChatRecordMode?'flex-end':'flex-start'}]"> + <!-- 鍏ㄥ睆Loading --> + <slot v-if="showLoading&&zSlots.loading&&!loadingFullFixed" name="loading" /> + <!-- 涓讳綋鍐呭 --> + <view class="zp-paging-container-content" :style="[finalPlaceholderTopHeightStyle,finalPagingContentStyle]"> + <!-- #ifdef VUE3 --> + <!-- 铏氭嫙鍒楄〃椤堕儴鍗犱綅view --> + <view v-if="useVirtualList" class="zp-virtual-placeholder" :style="[{height:virtualPlaceholderTopHeight+'px'}]"/> + <!-- #endif --> + <slot /> + <!-- 鍐呯疆鍒楄〃&铏氭嫙鍒楄〃 --> + <template v-if="finalUseInnerList"> + <slot name="header"/> + <view class="zp-list-container" :style="[innerListStyle]"> + <template v-if="finalUseVirtualList"> + <view class="zp-list-cell" :style="[innerCellStyle]" :id="`${fianlVirtualCellIdPrefix}-${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绗�103琛屼腑娉ㄩ噴杩欎竴琛岋紝骞舵墦寮�涓嬮潰涓�琛屾敞閲�</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> + </template> + <template v-else> + <view class="zp-list-cell" v-for="(item,index) in realTotalData" :key="index" @click="_innerCellClick(item,index)"> + <slot name="cell" :item="item" :index="index"/> + </view> + </template> + </view> + <slot name="footer"/> + </template> + <!-- 鑱婂ぉ璁板綍妯″紡鍔犺浇鏇村loading --> + <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> + <slot v-if="zSlots.chatLoading" :loadingMoreStatus="loadingStatus" name="chatLoading" /> + <z-paging-load-more v-else @doClick="_onLoadingMore('click')" :zConfig="zLoadMoreConfig" /> + </template> + </view> + </template> + <!-- 铏氭嫙鍒楄〃搴曢儴鍗犱綅view --> + <view v-if="useVirtualList" class="zp-virtual-placeholder" :style="[{height:virtualPlaceholderBottomHeight+'px'}]"/> + <!-- 涓婃媺鍔犺浇鏇村view --> + <!-- #ifndef MP-ALIPAY --> + <slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" /> + <slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" /> + <slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" /> + <slot v-else-if="showLoadingMoreFail" name="loadingMoreFail" /> + <z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMoreCustom" :zConfig="zLoadMoreConfig" /> + <!-- #endif --> + <!-- #ifdef MP-ALIPAY --> + <slot v-if="loadingStatus===M.Default&&zSlots.loadingMoreDefault&&showLoadingMore&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreDefault" /> + <slot v-else-if="loadingStatus===M.Loading&&zSlots.loadingMoreLoading&&showLoadingMore&&loadingMoreEnabled" name="loadingMoreLoading" /> + <slot v-else-if="loadingStatus===M.NoMore&&zSlots.loadingMoreNoMore&&showLoadingMore&&showLoadingMoreNoMoreView&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreNoMore" /> + <slot v-else-if="loadingStatus===M.Fail&&zSlots.loadingMoreFail&&showLoadingMore&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreFail" /> + <z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMore&&showDefaultLoadingMoreText&&!(loadingStatus===M.NoMore&&!showLoadingMoreNoMoreView)&&loadingMoreEnabled&&!useChatRecordMode" :zConfig="zLoadMoreConfig" /> + <!-- #endif --> + <view v-if="safeAreaInsetBottom&&useSafeAreaPlaceholder&&!useChatRecordMode" class="zp-safe-area-placeholder" :style="[{height:safeAreaBottom+'px'}]" /> + </view> + <!-- 绌烘暟鎹浘 --> + <view v-if="showEmpty" :class="{'zp-empty-view':true,'zp-empty-view-center':emptyViewCenter}" :style="[emptyViewSuperStyle,chatRecordRotateStyle]"> + <slot v-if="zSlots.empty" name="empty" :isLoadFailed="isLoadFailed"/> + <z-paging-empty-view v-else :emptyViewImg="finalEmptyViewImg" :emptyViewText="finalEmptyViewText" :showEmptyViewReload="finalShowEmptyViewReload" + :emptyViewReloadText="finalEmptyViewReloadText" :isLoadFailed="isLoadFailed" :emptyViewStyle="emptyViewStyle" :emptyViewTitleStyle="emptyViewTitleStyle" + :emptyViewImgStyle="emptyViewImgStyle" :emptyViewReloadStyle="emptyViewReloadStyle" :emptyViewZIndex="emptyViewZIndex" :emptyViewFixed="emptyViewFixed" :unit="unit" + @reload="_emptyViewReload" @viewClick="_emptyViewClick" /> + </view> + </view> + </view> + </view> + </scroll-view> + </view> + <view v-if="zSlots.right" :class="{'zp-page-right':true,'zp-absoulte zp-right':finalIsOldWebView}"> + <slot name="right" /> + </view> + </view> + <!-- 搴曢儴鍥哄畾鐨剆lot --> + <view class="zp-page-bottom-container" :style="{'background': bottomBgColor}"> + <slot v-if="!usePageScroll&&zSlots.bottom" name="bottom" /> + <view class="zp-page-bottom" @touchmove.stop.prevent v-else-if="usePageScroll&&zSlots.bottom" :style="[{'bottom': `${windowBottom}px`}]"> + <slot name="bottom" /> + </view> + <!-- 鑱婂ぉ璁板綍妯″紡搴曢儴鍗犱綅 --> + <template v-if="useChatRecordMode&&autoAdjustPositionWhenChat"> + <view :style="[{height:chatRecordModeSafeAreaBottom+'px'}]" /> + <view class="zp-page-bottom-keyboard-placeholder-animate" :style="[{height:keyboardHeight+'px'}]" /> + </template> + </view> + <!-- 鐐瑰嚮杩斿洖椤堕儴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" :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"> + <slot name="loading" /> + </view> + </view> + <!-- #endif --> + <!-- #ifdef APP-NVUE --> + <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> + <!-- 椤堕儴鍥哄畾鐨剆lot --> + <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" /> + </view> + <!-- 鑱婂ぉ璁板綍妯″紡鍔犺浇鏇村loading锛坙oading鏃跺�欐樉绀猴級 --> + <view v-if="useChatRecordMode&&loadingStatus!==M.NoMore&&showChatLoadingWhenReload&&showLoading"> + <slot v-if="zSlots.chatLoading" :loadingMoreStatus="loadingStatus" name="chatLoading" /> + <z-paging-load-more v-else @doClick="_onLoadingMore('click')" :zConfig="zLoadMoreConfig" /> + </view> + <component :is="finalNvueSuperListIs" class="zp-n-list-container" :scrollable="false"> + <view v-if="zSlots.left" class="zp-page-left"> + <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" :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"> + <view ref="zp-n-refresh-container" class="zp-n-refresh-container" :style="[{background:refresherBackground,width:nRefresherWidth}]" id="zp-n-refresh-container"> + <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" :isIos="isIos" + :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" /> + </view> + </refresh> + <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> + <component :is="nViewIs" v-if="nShowRefresherReveal" ref="zp-n-list-refresher-reveal" :style="[{transform:`translateY(-${nShowRefresherRevealHeight}px)`},{background:refresherBackground}]"> + <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" :isIos="isIos" + :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" /> + </component> + <!-- 鍐呯疆鍒楄〃 --> + <template v-if="finalUseInnerList"> + <component :is="nViewIs"> + <slot name="header"/> + </component> + <component :is="nViewIs" class="zp-list-cell" v-for="(item,index) in realTotalData" :key="finalCellKeyName.length?item[finalCellKeyName]:index"> + <slot name="cell" :item="item" :index="index"/> + </component> + <component :is="nViewIs"> + <slot name="footer"/> + </component> + </template> + <template v-else> + <slot /> + </template> + <!-- 鍏ㄥ睆Loading --> + <component :is="nViewIs" v-if="showLoading&&zSlots.loading&&!loadingFullFixed" :class="{'z-paging-content-fixed':usePageScroll}" style="flex:1" :style="[chatRecordRotateStyle]"> + <slot name="loading" /> + </component> + <!-- 涓婃媺鍔犺浇鏇村view --> + <component :is="nViewIs" v-if="!refresherOnly&&loadingMoreEnabled&&!showEmpty"> + <!-- 鑱婂ぉ璁板綍妯″紡鍔犺浇鏇村loading锛堟粴鍔ㄥ埌椤堕儴鍔犺浇鏇村鎴栨棤鏇村鏁版嵁鏃舵樉绀猴級 --> + <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> + <slot v-if="zSlots.chatLoading" :loadingMoreStatus="loadingStatus" name="chatLoading" /> + <z-paging-load-more v-else @doClick="_onLoadingMore('click')" :zConfig="zLoadMoreConfig" /> + </template> + </view> + </template> + + <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" /> + <slot v-else-if="showLoadingMoreFail" name="loadingMoreFail" /> + <z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMoreCustom" :zConfig="zLoadMoreConfig" /> + <view v-if="safeAreaInsetBottom&&useSafeAreaPlaceholder&&!useChatRecordMode" class="zp-safe-area-placeholder" :style="[{height:safeAreaBottom+'px'}]" /> + </view> + </component> + <!-- 绌烘暟鎹浘 --> + <component :is="nViewIs" v-if="showEmpty" :class="{'z-paging-content-fixed':usePageScroll}" :style="[{flex:emptyViewCenter?1:0},emptyViewSuperStyle,chatRecordRotateStyle]"> + <view :class="{'zp-empty-view':true,'zp-empty-view-center':emptyViewCenter}"> + <slot v-if="zSlots.empty" name="empty" :isLoadFailed="isLoadFailed" /> + <z-paging-empty-view v-else :emptyViewImg="finalEmptyViewImg" :emptyViewText="finalEmptyViewText" :showEmptyViewReload="finalShowEmptyViewReload" + :emptyViewReloadText="finalEmptyViewReloadText" :isLoadFailed="isLoadFailed" :emptyViewStyle="emptyViewStyle" :emptyViewTitleStyle="emptyViewTitleStyle" + :emptyViewImgStyle="emptyViewImgStyle" :emptyViewReloadStyle="emptyViewReloadStyle" :emptyViewZIndex="emptyViewZIndex" :emptyViewFixed="emptyViewFixed" :unit="unit" + @reload="_emptyViewReload" @viewClick="_emptyViewClick" /> + </view> + </component> + <component :is="nViewIs" v-if="!hideNvueBottomTag" ref="zp-n-list-bottom-tag" class="zp-n-list-bottom-tag"></component> + </component> + <view v-if="zSlots.right" class="zp-page-right"> + <slot name="right" /> + </view> + </component> + <!-- 搴曢儴鍥哄畾鐨剆lot --> + <view class="zp-page-bottom-container" :style="{'background': bottomBgColor}"> + <slot name="bottom" /> + <!-- 鑱婂ぉ璁板綍妯″紡搴曢儴鍗犱綅 --> + <template v-if="useChatRecordMode&&autoAdjustPositionWhenChat"> + <view :style="[{height:chatRecordModeSafeAreaBottom+'px'}]" /> + <view class="zp-page-bottom-keyboard-placeholder-animate" :style="[{height:keyboardHeight+'px'}]" /> + </template> + </view> + <!-- 鐐瑰嚮杩斿洖椤堕儴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" :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"> + <slot name="loading" /> + </view> + </component> + <!-- #endif --> +</template> +<script module="pagingRenderjs" lang="renderjs"> + import pagingRenderjs from './wxs/z-paging-renderjs.js'; + /** + * z-paging 鍒嗛〉缁勪欢 + * @description z-paging 鍒嗛〉缁勪欢锛岄珮鎬ц兘锛屽叏骞冲彴鍏煎銆傛敮鎸佽嚜瀹氫箟涓嬫媺鍒锋柊銆佷笂鎷夊姞杞芥洿澶氥�佽櫄鎷熷垪琛ㄣ�佷笅鎷夎繘鍏ヤ簩妤笺�佽嚜鍔ㄧ鐞嗙┖鏁版嵁鍥俱�佸叏鑷姩鍒嗛〉銆佹棤闂姩鑱婂ぉ鍒嗛〉銆佹湰鍦板垎椤电瓑锛屼篃鏀寔浣滀负鍩烘湰甯冨眬瀹瑰櫒浣跨敤 + * @tutorial https://z-paging.zxlee.cn + * @property {Array} value 鐖剁粍浠秜-model鎵�缁戝畾鐨刲ist鐨勫�硷紝榛樿涓篬] + * @property {Number|String} defaultPageNo 鑷畾涔夊垵濮嬬殑pageNo锛岄粯璁や负1 + * @property {Number|String} defaultPageSize 鑷畾涔塸ageSize(姣忛〉鏄剧ず澶氬皯鏉�)锛岄粯璁や负10 + * @property {Boolean} fixed z-paging鏄惁浣跨敤fixed甯冨眬锛岄粯璁や负true + * @property {Boolean} safeAreaInsetBottom 鏄惁寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤锛岄粯璁や负false + * @property {Boolean} useSafeAreaPlaceholder 寮�鍚簳閮ㄥ畨鍏ㄥ尯鍩熼�傞厤鍚庯紝鏄惁浣跨敤placeholder褰㈠紡瀹炵幇锛岄粯璁や负false + * @property {Boolean} usePageScroll 浣跨敤椤甸潰婊氬姩锛岄粯璁や负false + * @property {Boolean} autoFullHeight 浣跨敤椤甸潰婊氬姩鏃讹紝鏄惁鍦ㄤ笉婊″睆鏃惰嚜鍔ㄥ~鍏呮弧灞忓箷锛岄粯璁や负true + * @property {String} defaultThemeStyle loading(涓嬫媺鍒锋柊銆佷笂鎷夊姞杞芥洿澶�)鐨勪富棰樻牱寮忥紝鏀寔black锛寃hite锛岄粯璁や负black + * @property {Object} pagingStyle 璁剧疆z-paging鐨剆tyle锛岄儴鍒嗗钩鍙�(濡傚井淇″皬绋嬪簭)鏃犳硶鐩存帴淇敼缁勪欢鐨剆tyle锛屽彲浣跨敤姝ゅ睘鎬т唬鏇� + * @property {String} height z-paging鐨勯珮搴︼紝浼樺厛绾т綆浜巔agingStyle涓缃殑height锛屼紶瀛楃涓诧紝濡�100px銆�100rpx銆�100% + * @property {String} width z-paging鐨勫搴︼紝浼樺厛绾т綆浜巔agingStyle涓缃殑width锛屼紶瀛楃涓诧紝濡�100px銆�100rpx銆�100% + * @property {String} maxWidth z-paging鐨勬渶澶у搴︼紝浼樺厛绾т綆浜巔agingStyle涓缃殑max-width锛岄粯璁や负绌� + * @property {String} bgColor z-paging鐨勮儗鏅壊(涓篶ss涓殑background锛屽洜姝や篃鍙互璁剧疆娓愬彉锛岃儗鏅浘鐗囩瓑)锛屼紭鍏堢骇浣庝簬pagingStyle涓缃殑background-color + * @property {Boolean} watchTouchDirectionChange 鏄惁鐩戝惉鍒楄〃瑙︽懜鏂瑰悜鏀瑰彉锛岄粯璁や负false + * @property {Number|String} delay 璋冪敤complete鍚庡欢杩熷鐞嗙殑鏃堕棿锛屽崟浣嶄负姣锛屼紭鍏堢骇楂樹簬min-delay锛岄粯璁や负0 + * @property {Number|String} minDelay 瑙﹀彂@query鍚庢渶灏忓欢杩熷鐞嗙殑鏃堕棿锛屽崟浣嶄负姣锛屼紭鍏堢骇浣庝簬delay锛岄粯璁や负0 + * @property {Boolean} callNetworkReject 璇锋眰澶辫触鏄惁瑙﹀彂reject锛岄粯璁や负true + * @property {String} unit z-paging涓粯璁ゅ竷灞�鐨勫崟浣嶏紝榛樿涓簉px + * @property {Boolean} concat 鑷姩鎷兼帴complete涓紶杩囨潵鐨勬暟缁勶紝榛樿涓簍rue + * @property {Number|String|Object} dataKey 涓轰繚璇佹暟鎹竴鑷达紝璁剧疆褰撳墠tab鍒囨崲鏃剁殑鏍囪瘑key锛屽苟鍦╟omplete涓紶閫掔浉鍚宬ey锛岃嫢浜岃�呬笉涓�鑷达紝鍒檆omplete灏嗕笉浼氱敓鏁� + * @property {String} autowireListName 銆愭瀬绠�鍐欐硶銆戣嚜鍔ㄦ敞鍏ョ殑list鍚嶏紝鍙嚜鍔ㄤ慨鏀圭埗view(鍖呭惈ref="paging")涓搴攏ame鐨刲ist鍊� + * @property {String} autowireQueryName 銆愭瀬绠�鍐欐硶銆戣嚜鍔ㄦ敞鍏ョ殑query鍚嶏紝鍙嚜鍔ㄨ皟鐢ㄧ埗view(鍖呭惈ref="paging")涓殑query鏂规硶 + * @property {Function} fetch 銆愭瀬绠�鍐欐硶銆戣幏鍙栧垎椤垫暟鎹瓼unction锛屽姛鑳戒笌@query绫讳技銆傝嫢璁剧疆浜唂etch鍒橜query灏嗕笉鍐嶈Е鍙� + * @property {Object} fetchParams fetch鐨勯檮鍔犲弬鏁帮紝fetch閰嶇疆鍚庢湁鏁� + * @property {Boolean} auto [z-paging]mounted鍚庢槸鍚﹁嚜鍔ㄨ皟鐢╮eload鏂规硶(mounted鍚庤嚜鍔ㄨ皟鐢ㄦ帴鍙�)锛岄粯璁や负true + * @property {Boolean} autoScrollToTopWhenReload reload鏃惰嚜鍔ㄦ粴鍔ㄥ埌椤堕儴锛岄粯璁や负true + * @property {Boolean} autoCleanListWhenReload reload鏃剁珛鍗宠嚜鍔ㄦ竻绌哄師list锛岄粯璁や负true + * @property {Boolean} showRefresherWhenReload 鍒楄〃鍒锋柊鏃惰嚜鍔ㄦ樉绀轰笅鎷夊埛鏂皏iew锛岄粯璁や负false + * @property {Boolean} showLoadingMoreWhenReload 鍒楄〃鍒锋柊鏃惰嚜鍔ㄦ樉绀哄姞杞芥洿澶歷iew锛屼笖涓哄姞杞戒腑鐘舵�侊紝榛樿涓篺alse + * @property {Boolean} createdReload 缁勪欢created鏃剁珛鍗宠Е鍙憆eload锛岄粯璁や负false + * @property {Boolean} refresherEnabled 鏄惁寮�鍚笅鎷夊埛鏂帮紝榛樿涓簍rue + * @property {Number|String} refresherThreshold 璁剧疆鑷畾涔変笅鎷夊埛鏂伴槇鍊硷紝榛樿鍗曚綅涓簆x锛岄粯璁や负80rpx + * @property {Boolean} useRefresherStatusBarPlaceholder 鏄惁寮�鍚笅鎷夊埛鏂扮姸鎬佹爮鍗犱綅锛岄粯璁や负false + * @property {Boolean} refresherOnly 鏄惁鍙娇鐢ㄤ笅鎷夊埛鏂帮紝榛樿涓篺alse + * @property {Boolean} useCustomRefresher 鏄惁浣跨敤鑷畾涔夌殑涓嬫媺鍒锋柊锛岄粯璁や负true + * @property {Boolean} reloadWhenRefresh 鐢ㄦ埛涓嬫媺鍒锋柊鏃舵槸鍚﹁Е鍙憆eload鏂规硶锛岄粯璁や负true + * @property {String} refresherThemeStyle 涓嬫媺鍒锋柊鐨勪富棰樻牱寮忥紝鏀寔black锛寃hite锛岄粯璁や负black + * @property {Object} refresherImgStyle 鑷畾涔変笅鎷夊埛鏂颁腑宸︿晶鍥炬爣鐨勬牱寮� + * @property {Object} refresherTitleStyle 鑷畾涔変笅鎷夊埛鏂颁腑鍙充晶鐘舵�佹弿杩版枃瀛楃殑鏍峰紡 + * @property {Object} refresherUpdateTimeStyle 鑷畾涔変笅鎷夊埛鏂颁腑鍙充晶鏈�鍚庢洿鏂版椂闂存枃瀛楃殑鏍峰紡 + * @property {Boolean} watchRefresherTouchmove 鏄惁瀹炴椂鐩戝惉涓嬫媺鍒锋柊涓繘搴︼紝骞堕�氳繃@refresherTouchmove浼犻�掔粰鐖剁粍浠讹紝榛樿涓篺alse + * @property {Boolean} showRefresherUpdateTime 鏄惁鏄剧ず鏈�鍚庢洿鏂版椂闂达紝榛樿涓篺alse + * @property {String|Object} refresherDefaultText 鑷畾涔変笅鎷夊埛鏂伴粯璁ょ姸鎬佷笅鐨勬枃瀛� + * @property {String|Object} refresherPullingText 鑷畾涔変笅鎷夊埛鏂版澗鎵嬬珛鍗冲埛鏂扮姸鎬佷笅鐨勬枃瀛� + * @property {String|Object} refresherRefreshingText 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佷笅鐨勬枃瀛� + * @property {String|Object} refresherCompleteText 鑷畾涔変笅鎷夊埛鏂板埛鏂扮粨鏉熺姸鎬佷笅鐨勬枃瀛� + * @property {String} refresherDefaultImg 鑷畾涔変笅鎷夊埛鏂伴粯璁ょ姸鎬佷笅鐨勫浘鐗� + * @property {String} refresherPullingImg 鑷畾涔変笅鎷夊埛鏂版澗鎵嬬珛鍗冲埛鏂扮姸鎬佷笅鐨勫浘鐗� + * @property {String} refresherRefreshingImg 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佷笅鐨勫浘鐗� + * @property {String} refresherCompleteImg 鑷畾涔変笅鎷夊埛鏂板埛鏂扮粨鏉熺姸鎬佷笅鐨勫浘鐗� + * @property {Boolean} refresherRefreshingAnimated 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佷笅鏄惁灞曠ず鏃嬭浆鍔ㄧ敾锛岄粯璁や负true + * @property {Boolean} refresherEndBounceEnabled 鏄惁寮�鍚嚜瀹氫箟涓嬫媺鍒锋柊鍒锋柊缁撴潫鍥炲脊鍔ㄧ敾鏁堟灉锛岄粯璁や负true + * @property {String} refresherDefaultStyle 璁剧疆绯荤粺涓嬫媺鍒锋柊榛樿鏍峰紡锛屾敮鎸佽缃産lack锛寃hite锛宯one锛岄粯璁や负black + * @property {String} refresherBackground 璁剧疆鑷畾涔変笅鎷夊埛鏂板尯鍩熻儗鏅鑹诧紝榛樿涓�#FFFFFF00 + * @property {String} refresherFixedBackground 璁剧疆鍥哄畾鐨勮嚜瀹氫箟涓嬫媺鍒锋柊鍖哄煙鑳屾櫙棰滆壊锛岄粯璁や负#FFFFFF00 + * @property {Number|String} refresherFixedBacHeight 璁剧疆鍥哄畾鐨勮嚜瀹氫箟涓嬫媺鍒锋柊鍖哄煙楂樺害锛岄粯璁や负0 + * @property {Number|String} refresherDefaultDuration 璁剧疆鑷畾涔変笅鎷夊埛鏂伴粯璁ょ姸鎬佷笅鍥炲脊鍔ㄧ敾鏃堕棿锛屽崟浣嶄负姣锛岄粯璁や负100 + * @property {Number|String} refresherCompleteDelay 鑷畾涔変笅鎷夊埛鏂扮粨鏉熶互鍚庡欢杩熸敹鍥炵殑鏃堕棿锛屽崟浣嶄负姣锛岄粯璁や负0 + * @property {Number|String} refresherCompleteDuration 鑷畾涔変笅鎷夊埛鏂扮粨鏉熸敹鍥炲姩鐢绘椂闂达紝鍗曚綅涓烘绉掞紝榛樿涓�300 + * @property {Boolean} refresherVibrate 涓嬫媺鍒锋柊鏃朵笅鎷夊埌鈥滄澗鎵嬬珛鍗冲埛鏂扳�濈姸鎬佹椂鏄惁浣挎墜鏈虹煭鎸姩锛岄粯璁や负false + * @property {Boolean} refresherRefreshingScrollable 鑷畾涔変笅鎷夊埛鏂板埛鏂颁腑鐘舵�佹槸鍚﹀厑璁稿垪琛ㄦ粴鍔紝榛樿涓簍rue + * @property {Boolean} refresherCompleteScrollable 鑷畾涔変笅鎷夊埛鏂扮粨鏉熺姸鎬佷笅鏄惁鍏佽鍒楄〃婊氬姩锛岄粯璁や负false + * @property {Number} refresherOutRate 璁剧疆鑷畾涔変笅鎷夊埛鏂颁笅鎷夎秴鍑洪槇鍊煎悗缁х画涓嬫媺浣嶇Щ琛板噺鐨勬瘮渚嬶紝榛樿涓�0.65 + * @property {Boolean} refresherF2Enabled 鏄惁寮�鍚笅鎷夎繘鍏ヤ簩妤煎姛鑳斤紝榛樿涓篺alse + * @property {Number|String} refresherF2Threshold 涓嬫媺杩涘叆浜屾ゼ闃堝�硷紝榛樿涓�200rpx + * @property {Number|String} refresherF2Duration 涓嬫媺杩涘叆浜屾ゼ鍔ㄧ敾鏃堕棿锛屽崟浣嶄负姣锛岄粯璁や负200 + * @property {Boolean} showRefresherF2 涓嬫媺杩涘叆浜屾ゼ鐘舵�佹澗鎵嬪悗鏄惁寮瑰嚭浜屾ゼ锛岄粯璁や负true + * @property {Number} refresherPullRate 璁剧疆鑷畾涔変笅鎷夊埛鏂颁笅鎷夋椂瀹為檯涓嬫媺浣嶇Щ涓庣敤鎴蜂笅鎷夎窛绂荤殑姣斿�硷紝榛樿涓�0.75 + * @property {Number|String} refresherFps 鑷畾涔変笅鎷夊埛鏂颁笅鎷夊抚鐜囷紝榛樿涓�40 + * @property {Number|String} refresherMaxAngle 鑷畾涔変笅鎷夊埛鏂板厑璁歌Е鍙戠殑鏈�澶т笅鎷夎搴︼紝榛樿涓�40搴� + * @property {Boolean} refresherAngleEnableChangeContinued 鑷畾涔変笅鎷夊埛鏂扮殑瑙掑害鐢辨湭杈惧埌鏈�澶ц搴﹀彉鍒拌揪鍒版渶澶ц搴︽椂锛屾槸鍚︾户缁笅鎷夊埛鏂版墜鍔匡紝榛樿涓篺alse + * @property {Boolean} refresherNoTransform 涓嬫媺鍒锋柊鏃舵槸鍚︾姝笅鎷夊埛鏂皏iew璺熼殢鐢ㄦ埛瑙︽懜绔栫洿绉诲姩锛岄粯璁や负false + * @property {Boolean} loadingMoreEnabled 鏄惁鍚敤鍔犺浇鏇村鏁版嵁(鍚粦鍔ㄥ埌搴曢儴鍔犺浇鏇村鏁版嵁鍜岀偣鍑诲姞杞芥洿澶氭暟鎹�)锛岄粯璁や负true + * @property {Number|String} lowerThreshold 璺濆簳閮�/鍙宠竟澶氳繙鏃讹紝瑙﹀彂scrolltolower浜嬩欢锛岄粯璁ゅ崟浣嶄负px锛岄粯璁や负100rpx + * @property {Boolean} toBottomLoadingMoreEnabled 鏄惁鍚敤婊戝姩鍒板簳閮ㄥ姞杞芥洿澶氭暟鎹紝榛樿涓簍rue + * @property {String} loadingMoreThemeStyle 搴曢儴鍔犺浇鏇村鐨勪富棰樻牱寮忥紝鏀寔black锛寃hite锛岄粯璁や负black + * @property {Object} loadingMoreCustomStyle 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氭牱寮� + * @property {Object} loadingMoreTitleCustomStyle 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氭枃瀛楁牱寮� + * @property {Object} loadingMoreLoadingIconCustomStyle 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氬姞杞戒腑鍔ㄧ敾鏍峰紡 + * @property {String} loadingMoreLoadingIconType 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氬姞杞戒腑鍔ㄧ敾鍥炬爣绫诲瀷锛屽彲閫塮lower鎴朿ircle锛岄粯璁や负flower + * @property {String} loadingMoreLoadingIconCustomImage 鑷畾涔夊簳閮ㄥ姞杞芥洿澶氬姞杞戒腑鍔ㄧ敾鍥炬爣鍥剧墖 + * @property {Boolean} loadingMoreLoadingAnimated 搴曢儴鍔犺浇鏇村鍔犺浇涓璿iew鏄惁灞曠ず鏃嬭浆鍔ㄧ敾锛岄粯璁や负true + * @property {String|Object} loadingMoreDefaultText 婊戝姩鍒板簳閮�"榛樿"鏂囧瓧 + * @property {String|Object} loadingMoreLoadingText 婊戝姩鍒板簳閮�"鍔犺浇涓�"鏂囧瓧 + * @property {String|Object} loadingMoreNoMoreText 婊戝姩鍒板簳閮�"娌℃湁鏇村"鏂囧瓧 + * @property {String|Object} loadingMoreFailText 婊戝姩鍒板簳閮�"鍔犺浇澶辫触"鏂囧瓧 + * @property {Boolean} hideNoMoreInside 褰撴病鏈夋洿澶氭暟鎹笖鍒嗛〉鍐呭鏈秴鍑簔-paging鏃舵槸鍚﹂殣钘忔病鏈夋洿澶氭暟鎹殑view锛岄粯璁や负false + * @property {Number} hideNoMoreByLimit 褰撴病鏈夋洿澶氭暟鎹笖鍒嗛〉鏁扮粍闀垮害灏戜簬杩欎釜鍊兼椂锛岄殣钘忔病鏈夋洿澶氭暟鎹殑view锛岄粯璁や负0 + * @property {Boolean} insideMore 褰撳垎椤垫湭婊′竴灞忔椂锛屾槸鍚﹁嚜鍔ㄥ姞杞芥洿澶氾紝榛樿涓篺alse + * @property {Boolean} loadingMoreDefaultAsLoading 婊戝姩鍒板簳閮ㄧ姸鎬佷负榛樿鐘舵�佹椂锛屼互鍔犺浇涓殑鐘舵�佸睍绀猴紝榛樿涓篺alse + * @property {Boolean} showLoadingMoreNoMoreView 鏄惁鏄剧ず娌℃湁鏇村鏁版嵁鐨剉iew锛岄粯璁や负true + * @property {Boolean} showDefaultLoadingMoreText 鏄惁鏄剧ず榛樿鐨勫姞杞芥洿澶歵ext锛岄粯璁や负true + * @property {Boolean} showLoadingMoreNoMoreLine 鏄惁鏄剧ず娌℃湁鏇村鏁版嵁鐨勫垎鍓茬嚎锛岄粯璁や负true + * @property {Object} loadingMoreNoMoreLineCustomStyle 鑷畾涔夊簳閮ㄦ病鏈夋洿澶氭暟鎹殑鍒嗗壊绾挎牱寮� + * @property {Boolean} hideEmptyView 鏄惁寮哄埗闅愯棌绌烘暟鎹浘锛岄粯璁や负false + * @property {Boolean} emptyViewFixed 绌烘暟鎹浘鐗囨槸鍚﹂摵婊-paging锛岄粯璁や负false + * @property {Boolean} emptyViewCenter 绌烘暟鎹浘鐗囨槸鍚﹀瀭鐩村眳涓紝榛樿涓簍rue + * @property {String|Object} emptyViewText 绌烘暟鎹浘鎻忚堪鏂囧瓧 + * @property {String} emptyViewImg 绌烘暟鎹浘鍥剧墖 + * @property {String} emptyViewErrorImg 绌烘暟鎹浘鈥滃姞杞藉け璐モ�濆浘鐗� + * @property {String|Object} emptyViewReloadText 绌烘暟鎹浘鐐瑰嚮閲嶆柊鍔犺浇鏂囧瓧 + * @property {String|Object} emptyViewErrorText 绌烘暟鎹浘鈥滃姞杞藉け璐モ�濇弿杩版枃瀛� + * @property {Object} emptyViewSuperStyle 绌烘暟鎹浘鐖秜iew鏍峰紡 + * @property {Object} emptyViewStyle 绌烘暟鎹浘鏍峰紡 + * @property {Object} emptyViewImgStyle 绌烘暟鎹浘img鏍峰紡 + * @property {Object} emptyViewTitleStyle 绌烘暟鎹浘鎻忚堪鏂囧瓧鏍峰紡 + * @property {Object} emptyViewReloadStyle 绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳鏍峰紡 + * @property {Boolean} showEmptyViewReload 鏄惁鏄剧ず绌烘暟鎹浘閲嶆柊鍔犺浇鎸夐挳(鏃犳暟鎹椂)锛岄粯璁や负false + * @property {Boolean} showEmptyViewReloadWhenError 鍔犺浇澶辫触鏃舵槸鍚︽樉绀虹┖鏁版嵁鍥鹃噸鏂板姞杞芥寜閽紝榛樿涓簍rue + * @property {Boolean} autoHideEmptyViewWhenLoading 鍔犺浇涓椂鏄惁鑷姩闅愯棌绌烘暟鎹浘锛岄粯璁や负true + * @property {Boolean} autoHideEmptyViewWhenPull 鐢ㄦ埛涓嬫媺鍒楄〃瑙﹀彂涓嬫媺鍒锋柊鍔犺浇涓椂鏄惁鑷姩闅愯棌绌烘暟鎹浘锛岄粯璁や负true + * @property {Boolean} autoHideLoadingAfterFirstLoaded 绗竴娆″姞杞藉悗鑷姩闅愯棌loading slot锛岄粯璁や负true + * @property {Boolean} loadingFullFixed loading slot鐨勭埗view鏄惁閾烘弧灞忓箷骞跺浐瀹氾紝榛樿涓篺alse + * @property {Boolean} autoShowSystemLoading 鏄惁鑷姩鏄剧ず绯荤粺Loading锛氬嵆uni.showLoading锛岄粯璁や负false + * @property {String|Object} systemLoadingText 鏄剧ず绯荤粺Loading鏃舵樉绀虹殑鏂囧瓧 + * @property {Boolean} systemLoadingMask 鏄剧ず绯荤粺Loading鏃舵槸鍚︽樉绀洪�忔槑钂欏眰锛岄槻姝㈣Е鎽哥┛閫忥紝榛樿涓簍rue + * @property {Boolean} autoShowBackToTop 鑷姩鏄剧ず鐐瑰嚮杩斿洖椤堕儴鎸夐挳锛岄粯璁や负false + * @property {Number|String} backToTopThreshold 鐐瑰嚮杩斿洖椤堕儴鎸夐挳鏄剧ず/闅愯棌鐨勯槇鍊�(婊氬姩璺濈)锛岄粯璁ゅ崟浣嶄负px锛岄粯璁や负400rpx + * @property {String} backToTopImg 鐐瑰嚮杩斿洖椤堕儴鎸夐挳鐨勮嚜瀹氫箟鍥剧墖鍦板潃 + * @property {Boolean} backToTopWithAnimate 鐐瑰嚮杩斿洖椤堕儴鎸夐挳杩斿洖鍒伴《閮ㄦ椂鏄惁灞曠ず杩囨浮鍔ㄧ敾锛岄粯璁や负true + * @property {Number|String} backToTopBottom 鐐瑰嚮杩斿洖椤堕儴鎸夐挳涓庡簳閮ㄧ殑璺濈锛岄粯璁ゅ崟浣嶄负px锛岄粯璁や负160rpx + * @property {Object} backToTopStyle 鐐瑰嚮杩斿洖椤堕儴鎸夐挳鐨勮嚜瀹氫箟鏍峰紡 + * @property {Boolean} useVirtualList 鏄惁浣跨敤铏氭嫙鍒楄〃锛岄粯璁や负false + * @property {Boolean} useCompatibilityMode 鍦ㄤ娇鐢ㄨ櫄鎷熷垪琛ㄦ椂锛屾槸鍚︿娇鐢ㄥ吋瀹规ā寮忥紝榛樿涓篺alse + * @property {Object} extraData 浣跨敤鍏煎妯″紡鏃朵紶閫掔殑闄勫姞鏁版嵁 + * @property {String} cellHeightMode 铏氭嫙鍒楄〃cell楂樺害妯″紡锛岄粯璁や负fixed + * @property {Number|String} preloadPage 棰勫姞杞界殑鍒楄〃鍙鑼冨洿(鍒楄〃楂樺害)椤垫暟锛岄粯璁や负12 + * @property {Number|String} fixedCellHeight 鍥哄畾鐨刢ell楂樺害锛宍cell-height-mode=fixed`鎵嶆湁鏁堬紝榛樿涓虹┖ + * @property {Number|String} virtualListCol 铏氭嫙鍒楄〃鍒楁暟锛岄粯璁や负1 + * @property {Number|String} virtualScrollFps 铏氭嫙鍒楄〃scroll鍙栨牱甯х巼锛岄粯璁や负80 + * @property {String} virtualCellIdPrefix 铏氭嫙鍒楄〃cell id鐨勫墠缂� + * @property {Boolean} useInnerList 鏄惁鍦▃-paging鍐呴儴寰幆娓叉煋鍒楄〃(浣跨敤鍐呯疆鍒楄〃)锛岄粯璁や负false + * @property {Boolean} forceCloseInnerList 寮哄埗鍏抽棴inner-list锛岄粯璁や负false + * @property {Boolean} virtualInSwiperSlot 铏氭嫙鍒楄〃鏄惁浣跨敤swiper-item鍖呰9锛岄粯璁や负false + * @property {String} cellKeyName 鍐呯疆鍒楄〃cell鐨刱ey鍚嶇О(浠卬vue鏈夋晥) + * @property {Object} innerListStyle innerList鏍峰紡 + * @property {Object} innerCellStyle innerCell鏍峰紡 + * @property {Number|String} localPagingLoadingTime 鏈湴鍒嗛〉鏃朵笂鎷夊姞杞芥洿澶氬欢杩熸椂闂达紝鍗曚綅涓烘绉掞紝榛樿涓�200 + * @property {Boolean} useChatRecordMode 浣跨敤鑱婂ぉ璁板綍妯″紡锛岄粯璁や负false + * @property {Boolean} autoHideKeyboardWhenChat 浣跨敤鑱婂ぉ璁板綍妯″紡鏃舵槸鍚﹁嚜鍔ㄩ殣钘忛敭鐩橈紝榛樿涓簍rue + * @property {Boolean} autoAdjustPositionWhenChat 浣跨敤鑱婂ぉ璁板綍妯″紡涓敭鐩樺脊鍑烘椂鏄惁鑷姩璋冩暣slot="bottom"楂樺害锛岄粯璁や负true + * @property {Boolean} autoToBottomWhenChat 浣跨敤鑱婂ぉ璁板綍妯″紡涓敭鐩樺脊鍑烘椂鏄惁鑷姩婊氬姩鍒板簳閮紝榛樿涓篺alse + * @property {String} chatAdjustPositionOffset 浣跨敤鑱婂ぉ璁板綍妯″紡涓敭鐩樺脊鍑烘椂鍗犱綅楂樺害鍋忕Щ璺濈锛岄粯璁や负0px + * @property {Boolean} showChatLoadingWhenReload 浣跨敤鑱婂ぉ璁板綍妯″紡涓璥reload`鏃舵槸鍚︽樉绀篳chatLoading`锛岄粯璁や负false + * @property {String} bottomBgColor `bottom`鐨勮儗鏅壊锛岄粯璁ら�忔槑 + * @property {Boolean} chatLoadingMoreDefaultAsLoading 鍦ㄨ亰澶╄褰曟ā寮忎腑婊戝姩鍒伴《閮ㄧ姸鎬佷负榛樿鐘舵�佹椂锛屾槸鍚︿互鍔犺浇涓殑鐘舵�佸睍绀猴紝榛樿涓簍rue + * @property {Boolean} showScrollbar 鎺у埗鏄惁鍑虹幇婊氬姩鏉★紝榛樿涓簍rue + * @property {Boolean} scrollable 鏄惁鍙互婊氬姩锛屼娇鐢ㄥ唴缃畇croll-view鍜宯vue鏃舵湁鏁堬紝榛樿涓簍rue + * @property {Boolean} scrollX 鏄惁鍏佽妯悜婊氬姩锛岄粯璁や负false + * @property {Boolean} scrollToTopBounceEnabled iOS璁惧涓婃粴鍔ㄥ埌椤堕儴鏃舵槸鍚﹀厑璁稿洖寮规晥鏋滐紝榛樿涓篺alse + * @property {Boolean} scrollToBottomBounceEnabled iOS璁惧涓婃粴鍔ㄥ埌搴曢儴鏃舵槸鍚﹀厑璁稿洖寮规晥鏋滐紝榛樿涓簍rue + * @property {Boolean} scrollWithAnimation 鍦ㄨ缃粴鍔ㄦ潯浣嶇疆鏃朵娇鐢ㄥ姩鐢昏繃娓★紝榛樿涓篺alse + * @property {String} scrollIntoView 鍊煎簲涓烘煇瀛愬厓绱爄d锛坕d涓嶈兘浠ユ暟瀛楀紑澶达級銆傝缃摢涓柟鍚戝彲婊氬姩锛屽垯鍦ㄥ摢涓柟鍚戞粴鍔ㄥ埌璇ュ厓绱� + * @property {Boolean} enableBackToTop iOS鐐瑰嚮椤堕儴鐘舵�佹爮銆佸畨鍗撳弻鍑绘爣棰樻爮鏃讹紝婊氬姩鏉¤繑鍥為《閮紝榛樿涓簍rue + * @property {String} nvueListIs nvue涓慨鏀瑰垪琛ㄧ被鍨嬶紝榛樿涓簂ist + * @property {Object} nvueWaterfallConfig waterfall閰嶇疆锛屼粎鍦╪vue涓笖nvueListIs=waterfall鏃舵湁鏁� + * @property {Boolean} nvueBounce nvue鎺у埗鏄惁鍥炲脊鏁堟灉锛宨OS涓嶆敮鎸佸姩鎬佷慨鏀癸紝榛樿涓簍rue + * @property {Boolean} nvueFastScroll nvue涓�氳繃浠g爜婊氬姩鍒伴《閮�/搴曢儴鏃讹紝鏄惁鍔犲揩鍔ㄧ敾鏁堟灉锛岄粯璁や负false + * @property {String} nvueListId nvue涓璴ist鐨刬d + * @property {Boolean} hideNvueBottomTag 鏄惁闅愯棌nvue鍒楄〃搴曢儴鐨則agView锛岄粯璁や负false + * @property {Boolean} nvuePagingEnabled 璁剧疆nvue涓槸鍚︽寜鍒嗛〉妯″紡(绫讳技绔栧悜swiper)鏄剧ずList锛岄粯璁や负false + * @property {Number} offsetAccuracy nvue涓帶鍒秓nscroll浜嬩欢瑙﹀彂鐨勯鐜囷紝榛樿涓虹┖ + * @property {Boolean} useCache 鏄惁浣跨敤缂撳瓨锛岄粯璁や负false + * @property {String} cacheKey 浣跨敤缂撳瓨鏃剁紦瀛樼殑key + * @property {String} cacheMode 缂撳瓨妯″紡锛岄粯璁や负default + * @property {Number} topZIndex slot="top"鐨剉iew鐨剒-index锛岄粯璁や负99 + * @property {Number} superContentZIndex z-paging鍐呭瀹瑰櫒鐖秜iew鐨剒-index锛岄粯璁や负1 + * @property {Number} contentZIndex z-paging鍐呭瀹瑰櫒閮ㄥ垎鐨剒-index锛岄粯璁や负1 + * @property {Number} emptyViewZIndex 绌烘暟鎹畍iew鐨剒-index锛岄粯璁や负9 + * @property {Boolean} autoHeight z-paging鏄惁鑷姩楂樺害锛岄粯璁や负false + * @property {Number|String} autoHeightAddition z-paging鑷姩楂樺害鏃剁殑闄勫姞楂樺害锛岄粯璁や负0px + * @event {Function} input 鐖剁粍浠秜-model鎵�缁戝畾鐨刲ist鐨勫�兼敼鍙樻椂瑙﹀彂姝や簨浠� + * @event {Function} query 涓嬫媺鍒锋柊鎴栨粴鍔ㄥ埌搴曢儴鏃朵細鑷姩瑙﹀彂姝ゆ柟娉曘�倆-paging鍔犺浇鏃朵篃浼氳Е鍙�(鑻ヨ绂佹锛岃璁剧疆:auto="false")銆俻ageNo鍜宲ageSize浼氳嚜鍔ㄨ绠楀ソ锛岀洿鎺ヤ紶缁欐湇鍔″櫒鍗冲彲銆� + * @event {Function} listChange 鍒嗛〉娓叉煋鐨勬暟缁勬敼鍙樻椂瑙﹀彂 + * @event {Function} refresherStatusChange 鑷畾涔変笅鎷夊埛鏂扮姸鎬佹敼鍙� + * @event {Function} refresherTouchstart 鑷畾涔変笅鎷夊埛鏂颁笅鎷夊紑濮� + * @event {Function} refresherTouchmove 鑷畾涔変笅鎷夊埛鏂颁笅鎷夋嫋鍔ㄤ腑 + * @event {Function} refresherTouchend 鑷畾涔変笅鎷夊埛鏂颁笅鎷夌粨鏉� + * @event {Function} refresherF2Change 涓嬫媺杩涘叆浜屾ゼ鐘舵�佹敼鍙� + * @event {Function} refresh 鑷畾涔変笅鎷夊埛鏂拌瑙﹀彂 + * @event {Function} restore 鑷畾涔変笅鎷夊埛鏂拌澶嶄綅 + * @event {Function} loadingStatusChange 鑷畾涔変笅鎷夊埛鏂扮姸鎬佹敼鍙� + * @event {Function} emptyViewReload 鐐瑰嚮浜嗙┖鏁版嵁鍥句腑鐨勯噸鏂板姞杞芥寜閽� + * @event {Function} emptyViewClick 鐐瑰嚮浜嗙┖鏁版嵁鍥緑iew + * @event {Function} isLoadFailedChange z-paging璇锋眰澶辫触鐘舵�佹敼鍙� + * @event {Function} backToTopClick 鐐瑰嚮浜嗚繑鍥為《閮ㄦ寜閽� + * @event {Function} virtualListChange 铏氭嫙鍒楄〃褰撳墠娓叉煋鐨勬暟缁勬敼鍙樻椂瑙﹀彂 + * @event {Function} innerCellClick 浣跨敤铏氭嫙鍒楄〃鎴栧唴缃垪琛ㄦ椂鐐瑰嚮浜哻ell + * @event {Function} virtualPlaceholderTopHeight 铏氭嫙鍒楄〃椤堕儴鍗犱綅楂樺害鏀瑰彉 + * @event {Function} hidedKeyboard 鍦ㄨ亰澶╄褰曟ā寮忎笅锛岃Е鎽稿垪琛ㄩ殣钘忎簡閿洏 + * @event {Function} keyboardHeightChange 閿洏楂樺害鏀瑰彉 + * @event {Function} scroll z-paging鍒楄〃婊氬姩鏃惰Е鍙� + * @event {Function} scrollTopChange scrollTop鏀瑰彉鏃惰Е鍙� + * @event {Function} scrolltolower z-paging鍐呯疆鐨剆croll-view/list-view/waterfall婊氬姩搴曢儴鏃惰Е鍙� + * @event {Function} scrolltoupper z-paging鍐呯疆鐨剆croll-view/list-view/waterfall婊氬姩椤堕儴鏃惰Е鍙� + * @event {Function} scrollend z-paging鍐呯疆鐨刲ist婊氬姩缁撴潫鏃惰Е鍙� + * @event {Function} contentHeightChanged z-paging涓唴瀹归珮搴︽敼鍙樻椂瑙﹀彂 + * @event {Function} touchDirectionChange 鐩戝惉鍒楄〃瑙︽懜鏂瑰悜鏀瑰彉 + * @example <z-paging ref="paging" v-model="dataList" @query="queryList"></z-paging> + */ + export default { + name:"z-paging", + // #ifdef APP-VUE || H5 + mixins: [pagingRenderjs], + // #endif + } +</script> + +<script src="./js/z-paging-main.js" /> +<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 --> +<script src="./wxs/z-paging-wxs.wxs" module="pagingWxs" lang="wxs"></script> +<!-- #endif --> + + +<style scoped> + @import "./css/z-paging-main.css"; + @import "./css/z-paging-static.css"; +</style> diff --git a/src/hooks/useZebraScan.ts b/src/hooks/useZebraScan.ts new file mode 100644 index 0000000..56a214e --- /dev/null +++ b/src/hooks/useZebraScan.ts @@ -0,0 +1,64 @@ +export function useZebraScan() { + // pda鐨勭壒鑹茶缃腑闇�瑕佸叧闂�-绂佹灏嗘壂鎻忔寜閿殑閿�间紶閫掔粰搴旂敤鐨勫紑鍏� + const mainActivity = ref(); // 杩愯鏃剁殑涓昏娲诲姩activity + const intentFilter = ref(); // 瀹炰緥鍖栫殑鎰忓浘杩囨护鍣� + const broadcastReceiver = ref(); // 骞挎挱鎺ユ敹鍣� + const repeatFlag = ref<boolean>(false); + + const init = (onReceiveCallback: any) => { + console.log("鍒濆鍖杬ebra鎵弿"); + /* #ifdef APP-PLUS */ + // 鑾峰彇activity + mainActivity.value = plus.android.runtimeMainActivity(); + // 瀵煎叆绫� + const IntentFilter = plus.android.importClass("android.content.IntentFilter"); + //瀹炰緥鍖栦竴涓剰鍥捐繃婊ゅ櫒 + intentFilter.value = new IntentFilter(); + // addAction娣诲姞鍔ㄤ綔, com.android.server.scannerservice.broadcast涓鸿澶囬厤缃殑骞挎挱鍚嶇О + intentFilter.value.addAction("com.dwexample.ACTION"); + // BroadcastReceiver骞挎挱鎺ユ敹鍣ㄦ帴鍙�:implements 瀹炵幇鎺ュ彛 onReceive瀹炵幇鎺ュ彛鐨勬柟娉� + broadcastReceiver.value = plus.android.implements( + "io.dcloud.feature.internal.reflect.BroadcastReceiver", + { + onReceive: (context: any, intent: any) => { + plus.android.importClass(intent); + // 鎵弿璁剧疆鐨勫紑鍙戣�呴�夐」--鎵嬫寔鏈簆da鐨勫箍鎾敭鍊約cannerdata + const code = intent.getStringExtra("com.motorolasolutions.emdk.datawedge.data_string"); + console.log("pda鍘熷鎵弿鏁版嵁:", code); + //闃查噸澶� + if (repeatFlag.value) return; + repeatFlag.value = true; + setTimeout(() => { + repeatFlag.value = false; + }, 150); + // 鍒拌繖閲屾壂鎻忔垚鍔�,鑾峰彇缁撴灉锛屽彲浠ヨ皟鐢ㄨ嚜宸辩殑涓氬姟閫昏緫 + onReceiveCallback(code); + }, + } + ); + console.log("娉ㄥ唽骞挎挱鎴愬姛"); + /* #endif */ + }; + const start = () => { + console.log("寮�濮嬫壂鎻�"); + mainActivity.value.registerReceiver(broadcastReceiver, intentFilter); + }; + const stop = () => { + console.log("鍋滄鎵弿"); + mainActivity.value.unregisterReceiver(broadcastReceiver); + }; + //鏄惁寮�鍚縺鍏夌孩澶栫嚎鎵弿锛宼rue寮�鍚紝false鍏抽棴 + const triggerScan = () => { + console.log("瑙﹀彂鎵弿"); + // 鑾峰彇Android鎰忓浘绫� + let Intent = plus.android.importClass("android.content.Intent"); + // 瀹炰緥鍖栨剰鍥� + let intent = new Intent(); + // 瀹氫箟鎰忓浘锛岀敱鍘傚晢鎻愪緵(姝ゅ璁剧疆涓轰笢澶х殑锛� 寮�濮嬫壂鎻忓箍鎾璫om.scan.onStartScan锛屽搴旂殑鍋滄鎵弿骞挎挱涓篶om.scan.onEndScan) + intent.setAction("com.symbol.datawedge.api.ACTION"); + intent.putExtra("com.symbol.datawedge.api.SOFT_SCAN_TRIGGER", "START_SCANNING"); + // 骞挎挱杩欎釜鎰忓浘 + mainActivity.value.sendBroadcast(intent); + }; + return { init, start, stop, triggerScan }; +} diff --git a/src/pages.json b/src/pages.json index 3f0035e..e5b5e6b 100644 --- a/src/pages.json +++ b/src/pages.json @@ -3,7 +3,7 @@ "autoscan": true, "custom": { "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue", - "^cu-(.*)": "@/components/cu-$1/index.vue" + "^cu-(.*)": "@/components/cu-$1/index.vue", } }, diff --git a/src/pages/production/detail/twistDetail.vue b/src/pages/production/detail/twistDetail.vue index 936e58e..c4e5230 100644 --- a/src/pages/production/detail/twistDetail.vue +++ b/src/pages/production/detail/twistDetail.vue @@ -9,12 +9,12 @@ url="/pages/production/twist/report/index" text="鎶ュ伐" /> - <wd-grid-item + <!-- <wd-grid-item icon="chart" text="鑷" link-type="navigateTo" url="/pages/production/twist/selfInspect/index" - /> + /> --> <wd-grid-item icon="tips" link-type="navigateTo" diff --git a/src/pages/production/detail/wireDetail.vue b/src/pages/production/detail/wireDetail.vue index e86b48a..6413c4e 100644 --- a/src/pages/production/detail/wireDetail.vue +++ b/src/pages/production/detail/wireDetail.vue @@ -9,12 +9,12 @@ url="/pages/production/wire/report/wire" text="鎶ュ伐" /> - <wd-grid-item + <!-- <wd-grid-item icon="chart" text="鑷" link-type="navigateTo" url="/pages/production/wire/selfInspect/index" - /> + /> --> <wd-grid-item icon="tips" link-type="navigateTo" diff --git a/src/pages/production/twist/receive/monofil.vue b/src/pages/production/twist/receive/monofil.vue index 80d234f..884b6f6 100644 --- a/src/pages/production/twist/receive/monofil.vue +++ b/src/pages/production/twist/receive/monofil.vue @@ -2,48 +2,64 @@ <view class="page"> <CardTitle title="鍗曚笣棰嗙敤" :hideAction="false"> <template #action> - <wd-button type="icon" icon="scan" color="#0D867F" @click="scanCode"></wd-button> + <wd-button type="icon" icon="scan" color="#0D867F" @click="openScan"></wd-button> </template> </CardTitle> <view class="list_box"> - <MonofilCard v-for="(item, index) in 4" :key="index" /> + <MonofilCard v-for="(item, index) in cardList" :key="index" /> </view> - <scan /> + <Scan ref="scanRef" /> </view> </template> <script setup lang="ts"> import CardTitle from "@/components/card-title/index.vue"; import MonofilCard from "../components/MonofilCard.vue"; -import scan from "@/components/scan/index.vue"; -import { onLoad, onUnload } from "@dcloudio/uni-app"; +import { onLoad, onUnload, onShow, onHide } from "@dcloudio/uni-app"; +import Scan from "@/components/scan/index.vue"; +// import { useZebraScan } from "@/hooks/useZebraScan"; +// const { init, start, stop, triggerScan } = useZebraScan(); + +const scanRef = ref(); const cardList = ref<any[]>([]); -const BroadcastScanningToObtainData = (res: any) => { - console.log("鑾峰彇娆℃暟", res.code); - let barcode = res.code; - console.log("鎵撳嵃鏁版嵁", barcode); +const getScanCode = (code: any) => { + // let parseData = code.trim(); + console.log("鑷畾涔夋壂鎻忕殑缁撴灉鍥炶皟鍑芥暟:", code); + cardList.value.push({}); }; -const scanCode = () => { - uni.scanCode({ - onlyFromCamera: true, - success: (res) => { - console.log("鏉$爜绫诲瀷锛�" + res.scanType); - console.log("鏉$爜鍐呭锛�" + res.result); - cardList.value.push(res.result); - }, - }); +const openScan = () => { + // uni.scanCode({ + // onlyFromCamera: true, + // success: (res) => { + // console.log("鏉$爜绫诲瀷锛�" + res.scanType); + // console.log("鏉$爜鍐呭锛�" + res.result); + // cardList.value.push(res.result); + // }, + // }); + // triggerScan(); + scanRef.value.triggerScan(); }; onLoad(() => { // 寮�鍚箍鎾洃鍚簨浠� - uni.$on("scan", BroadcastScanningToObtainData); + uni.$on("scan", getScanCode); + // init(getScanCode); }); onUnload(() => { // 寮�鍚箍鎾洃鍚簨浠� - uni.$off("scan", BroadcastScanningToObtainData); + uni.$off("scan", getScanCode); + // stop(); +}); + +onShow(() => { + // start(); +}); + +onHide(() => { + // stop(); }); </script> diff --git a/src/pages/production/twist/receive/steelCore/index.vue b/src/pages/production/twist/receive/steelCore/index.vue index 7195115..aab57ad 100644 --- a/src/pages/production/twist/receive/steelCore/index.vue +++ b/src/pages/production/twist/receive/steelCore/index.vue @@ -57,7 +57,7 @@ { label: "鍘傚", value: "姹熻嫃鐪佸崡閫氬競鑺鏁板瓧鍘�", - span: 14, + span: 16, }, ]); diff --git a/src/pages/production/twist/report/index.vue b/src/pages/production/twist/report/index.vue index 602f50a..db4ab66 100644 --- a/src/pages/production/twist/report/index.vue +++ b/src/pages/production/twist/report/index.vue @@ -1,7 +1,9 @@ <template> <view class="page pt-2"> - <CardTitle title="鎶ュ伐淇℃伅" :hideAction="true" @action="addReport" /> - <view class="list"> + <z-paging ref="paging" refresher-only class="list"> + <template #top> + <CardTitle title="鎶ュ伐淇℃伅" :hideAction="true" :full="false" @action="addReport" /> + </template> <wd-card v-for="(item, index) in 6" type="rectangle" custom-class="round"> <template #title> <view class="flex justify-between"> @@ -14,9 +16,12 @@ </view> </template> <ProductionCard :data="cardAttr" /> + <template #footer> + <wd-button size="small" plain @click="toCheck">鑷</wd-button> + </template> </wd-card> <wd-loadmore custom-class="loadmore" state="loading" /> - </view> + </z-paging> <wd-popup v-model="dialog.visible" position="bottom" custom-class="yl-popup"> <view class="action px-3"> @@ -97,6 +102,12 @@ toast.show("鍙栨秷"); dialog.visible = false; }; + +const toCheck = () => { + uni.navigateTo({ + url: "/pages/production/twist/selfInspect/index", + }); +}; </script> <style lang="scss" scoped> @@ -104,9 +115,7 @@ background: #f3f9f8; .list { - height: calc(100vh - 120px); margin: 12px; - overflow: scroll; :deep() { .round { diff --git a/src/pages/production/wire/backman/index.vue b/src/pages/production/wire/backman/index.vue index 43f13cb..17c724d 100644 --- a/src/pages/production/wire/backman/index.vue +++ b/src/pages/production/wire/backman/index.vue @@ -28,7 +28,7 @@ <script setup lang="ts"> import CardTitle from "@/components/card-title/index.vue"; -import ProductionCard from "../components/ProductionCard.vue"; +import ProductionCard from "../../components/ProductionCard.vue"; import { useToast } from "wot-design-uni"; import BackmanForm from "./form.vue"; @@ -66,7 +66,7 @@ const toEdit = () => { uni.navigateTo({ - url: "/pages/production/backman/edit", + url: "/pages/production/wire/backman/edit", }); }; diff --git a/src/pages/production/wire/receive/index.vue b/src/pages/production/wire/receive/index.vue index d23e486..64327e1 100644 --- a/src/pages/production/wire/receive/index.vue +++ b/src/pages/production/wire/receive/index.vue @@ -1,7 +1,7 @@ <template> <view class="page pt-2"> <CardTitle title="鎷変笣棰嗙敤" :hideAction="true" @action="addReport" /> - <view class="list"> + <z-paging ref="paging" refresher-only class="list"> <wd-card type="rectangle" custom-class="round"> <template #title> <view class="flex justify-between"> @@ -14,7 +14,7 @@ </template> <ProductionCard :data="cardAttr" color="#0D867F" /> </wd-card> - </view> + </z-paging> <wd-popup v-model="dialog.visible" position="bottom" custom-class="yl-popup"> <view class="action px-3"> <wd-button type="text" @click="cancel">鍙栨秷</wd-button> @@ -31,6 +31,7 @@ import ProductionCard from "../../components/ProductionCard.vue"; import { useToast } from "wot-design-uni"; import ReceiveForm from "./form.vue"; +import zPaging from "@/components/z-paging/z-paging.vue"; const toast = useToast(); const dialog = reactive({ @@ -58,7 +59,7 @@ const toEdit = () => { uni.navigateTo({ - url: "/pages/production/receive/edit", + url: "/pages/production/wire/receive/edit", }); }; @@ -83,7 +84,6 @@ .list { height: calc(100vh - 120px); margin: 12px; - overflow: scroll; :deep() { .round { diff --git a/src/pages/production/wire/report/wire.vue b/src/pages/production/wire/report/wire.vue index a85dbac..2416d38 100644 --- a/src/pages/production/wire/report/wire.vue +++ b/src/pages/production/wire/report/wire.vue @@ -1,7 +1,9 @@ <template> <view class="page pt-2"> - <CardTitle title="鎶ュ伐淇℃伅" :hideAction="true" @action="addReport" /> - <view class="list"> + <z-paging ref="paging" refresher-only class="list"> + <template #top> + <CardTitle title="鎶ュ伐淇℃伅" :hideAction="true" :full="false" @action="addReport" /> + </template> <wd-card v-for="(item, index) in 6" type="rectangle" custom-class="round"> <template #title> <view class="flex justify-between"> @@ -14,9 +16,12 @@ </view> </template> <ProductionCard :data="cardAttr" /> + <template #footer> + <wd-button size="small" plain @click="toCheck">鑷</wd-button> + </template> </wd-card> <wd-loadmore custom-class="loadmore" state="loading" /> - </view> + </z-paging> <wd-popup v-model="dialog.visible" position="bottom" custom-class="yl-popup"> <view class="action px-3"> @@ -33,6 +38,7 @@ import WireForm from "./wireForm.vue"; import { useToast } from "wot-design-uni"; import ProductionCard from "../../components/ProductionCard.vue"; +import zPaging from "@/components/z-paging/z-paging.vue"; const toast = useToast(); const dialog = reactive({ @@ -76,7 +82,7 @@ const toEdit = () => { uni.navigateTo({ - url: "/pages/production/report/wireEdit", + url: "/pages/production/wire/report/wireEdit", }); }; @@ -93,6 +99,12 @@ toast.show("鍙栨秷"); dialog.visible = false; }; + +const toCheck = () => { + uni.navigateTo({ + url: "/pages/production/wire/selfInspect/index", + }); +}; </script> <style lang="scss" scoped> @@ -100,9 +112,8 @@ background: #f3f9f8; .list { - height: calc(100vh - 120px); margin: 12px; - overflow: scroll; + background: #f3f9f8; :deep() { .round { diff --git a/src/pages/production/wire/selfInspect/index.vue b/src/pages/production/wire/selfInspect/index.vue index 26648f3..7b18466 100644 --- a/src/pages/production/wire/selfInspect/index.vue +++ b/src/pages/production/wire/selfInspect/index.vue @@ -28,7 +28,7 @@ <script setup lang="ts"> import CardTitle from "@/components/card-title/index.vue"; -import ProductionCard from "../components/ProductionCard.vue"; +import ProductionCard from "../../components/ProductionCard.vue"; import { useToast } from "wot-design-uni"; import SelfInspectForm from "./form.vue"; @@ -61,7 +61,7 @@ const toEdit = () => { uni.navigateTo({ - url: "/pages/production/selfInspect/edit", + url: "/pages/production/wire/selfInspect/edit", }); }; const submit = () => { -- Gitblit v1.9.3