Commit 7302ed1b authored by jyx's avatar jyx

回滚z-paging

parent 05c13745
...@@ -5,12 +5,12 @@ ...@@ -5,12 +5,12 @@
<!-- 空数据占位view,此组件支持easycom规范,可以在项目中直接引用 --> <!-- 空数据占位view,此组件支持easycom规范,可以在项目中直接引用 -->
<template> <template>
<view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]" @click="emptyViewClick"> <view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]">
<view class="zp-main"> <view class="zp-main">
<image v-if="!emptyViewImg.length" class="zp-main-image" :style="[emptyViewImgStyle]" :src="emptyImg" /> <image v-if="!emptyViewImg.length" class="zp-main-image" :style="[emptyViewImgStyle]" :src="emptyImg" />
<image v-else class="zp-main-image" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg" /> <image v-else class="zp-main-image" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg" />
<text class="zp-main-title" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text> <text class="zp-main-title" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text>
<text v-if="showEmptyViewReload" class="zp-main-error-btn" :style="[emptyViewReloadStyle]" @click.stop="reloadClick">{{emptyViewReloadText}}</text> <text v-if="showEmptyViewReload" class="zp-main-error-btn" :style="[emptyViewReloadStyle]" @click="reloadClick">{{emptyViewReloadText}}</text>
</view> </view>
</view> </view>
</template> </template>
...@@ -18,10 +18,10 @@ ...@@ -18,10 +18,10 @@
<script> <script>
import zStatic from '../z-paging/js/z-paging-static' import zStatic from '../z-paging/js/z-paging-static'
export default { export default {
name: "z-paging-empty-view",
data() { data() {
return { return {
base64Empty: zStatic.base64Empty,
base64Error: zStatic.base64Error
}; };
}, },
props: { props: {
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
}, },
computed: { computed: {
emptyImg() { emptyImg() {
return this.isLoadFailed ? zStatic.base64Error : zStatic.base64Empty; return this.isLoadFailed ? this.base64Error : this.base64Empty;
}, },
finalEmptyViewStyle(){ finalEmptyViewStyle(){
this.emptyViewStyle['z-index'] = this.emptyViewZIndex; this.emptyViewStyle['z-index'] = this.emptyViewZIndex;
...@@ -101,9 +101,6 @@ ...@@ -101,9 +101,6 @@
methods: { methods: {
reloadClick() { reloadClick() {
this.$emit('reload'); this.$emit('reload');
},
emptyViewClick() {
this.$emit('viewClick');
} }
} }
} }
...@@ -149,7 +146,6 @@ ...@@ -149,7 +146,6 @@
color: #aaaaaa; color: #aaaaaa;
text-align: center; text-align: center;
margin-top: 10rpx; margin-top: 10rpx;
padding: 0rpx 20rpx;
} }
.zp-main-error-btn { .zp-main-error-btn {
......
<!-- [z-paging]上拉加载更多view --> <!-- [z-paging]上拉加载更多view -->
<template> <template>
<view class="zp-l-container" :style="[c.customStyle]" @click="doClick"> <view class="zp-l-container" :style="[zConfig.customStyle]">
<template v-if="!c.hideContent"> <text v-if="zConfig.showNoMoreLine&&finalStatus===2" :class="zConfig.defaultThemeStyle==='white'?'zp-l-line zp-l-line-white':'zp-l-line zp-l-line-black'"
<text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" class="zp-l-line" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" /> :style="[zConfig.noMoreLineCustomStyle]" />
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<image v-if="finalStatus===M.Loading&&!!c.loadingIconCustomImage" <image v-if="finalStatus===1&&zConfig.loadingIconCustomImage.length"
:src="c.loadingIconCustomImage" :style="[c.iconCustomStyle]" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':c.loadingAnimated}" /> :src="zConfig.loadingIconCustomImage" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':zConfig.loadingAnimated}" />
<image v-if="finalStatus===M.Loading&&finalLoadingIconType==='flower'&&!c.loadingIconCustomImage.length" <image v-if="finalStatus===1&&zConfig.loadingIconType==='flower'&&!zConfig.loadingIconCustomImage.length"
class="zp-line-loading-image" :style="[c.iconCustomStyle]" :src="zTheme.flower[ts]" /> class="zp-line-loading-image" :style="[zConfig.iconCustomStyle]" :src="zConfig.defaultThemeStyle==='white'?base64FlowerWhite:base64Flower" />
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view> <view>
<loading-indicator v-if="finalStatus===M.Loading&&finalLoadingIconType!=='circle'" class="zp-line-loading-image" :style="[{color:zTheme.indicator[ts]}]" :animating="true" /> <loading-indicator v-if="finalStatus===1" class="zp-line-loading-image" :style="[{color:zConfig.defaultThemeStyle==='white'?'white':'#777777'}]" animating />
</view> </view>
<!-- #endif --> <!-- #endif -->
<text v-if="finalStatus===M.Loading&&finalLoadingIconType==='circle'&&!c.loadingIconCustomImage.length" <text v-if="finalStatus===1&&zConfig.loadingIconType==='circle'&&!zConfig.loadingIconCustomImage.length"
class="zp-l-circle-loading-view" :style="[{borderColor:zTheme.circleBorder[ts],borderTopColor:zTheme.circleBorderTop[ts]},c.iconCustomStyle]" /> :class="zConfig.defaultThemeStyle==='white'?'zp-l-line-loading-view zp-l-line-loading-view-white':'zp-l-line-loading-view zp-l-line-loading-view-black'" :style="[zConfig.iconCustomStyle]" />
<text class="zp-l-text" :style="[{color:zTheme.title[ts]},c.titleCustomStyle]">{{ownLoadingMoreText}}</text> <text :class="zConfig.defaultThemeStyle==='white'?'zp-l-text zp-l-text-white':'zp-l-text zp-l-text-black'" :style="[zConfig.titleCustomStyle]">{{ownLoadingMoreText}}</text>
<text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" class="zp-l-line" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" /> <text v-if="zConfig.showNoMoreLine&&finalStatus===2" :class="zConfig.defaultThemeStyle==='white'?'zp-l-line zp-l-line-white':'zp-l-line zp-l-line-black'" :style="[zConfig.noMoreLineCustomStyle]" />
</template>
</view> </view>
</template> </template>
<script> <script>
import zStatic from '../js/z-paging-static' import zStatic from '../js/z-paging-static'
import Enum from '../js/z-paging-enum'
export default { export default {
name: 'z-paging-load-more', name: 'z-paging-load-more',
data() { data() {
return { return {
M: Enum.More, base64Arrow: zStatic.base64Arrow,
zTheme: { base64Flower: zStatic.base64Flower,
title: { white: '#efefef', black: '#a4a4a4' }, base64FlowerWhite: zStatic.base64FlowerWhite,
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'], props: ['zConfig'],
computed: { computed: {
ts() {
return this.c.defaultThemeStyle;
},
c() {
return this.zConfig || {};
},
ownLoadingMoreText() { ownLoadingMoreText() {
const statusTextArr = [this.c.defaultText,this.c.loadingText,this.c.noMoreText,this.c.failText]; return this.statusTextArr[this.finalStatus];
return statusTextArr[this.finalStatus];
}, },
finalStatus() { statusTextArr() {
if (this.c.defaultAsLoading && this.c.status === this.M.Default) return this.M.Loading; return [this.zConfig.defaultText,this.zConfig.loadingText,this.zConfig.noMoreText,this.zConfig.failText];
return this.c.status;
}, },
finalLoadingIconType() { finalStatus() {
// #ifdef APP-NVUE if (this.zConfig.defaultAsLoading && this.zConfig.status === 0) return 1;
return 'flower'; return this.zConfig.status;
// #endif
return this.c.loadingIconType;
}
},
methods: {
doClick() {
this.$emit('doClick');
} }
} }
} }
...@@ -98,19 +76,25 @@ ...@@ -98,19 +76,25 @@
/* #endif */ /* #endif */
} }
.zp-l-circle-loading-view { .zp-l-line-loading-view {
margin-right: 8rpx; margin-right: 8rpx;
width: 23rpx; width: 22rpx;
height: 23rpx; height: 23rpx;
border: 3rpx solid #dddddd; border: 3rpx solid #dddddd;
border-radius: 50%; border-radius: 50%;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
animation: loading-circle 1s linear infinite; animation: loading-circle 1s linear infinite;
/* #endif */ /* #endif */
/* #ifdef APP-NVUE */ }
width: 30rpx;
height: 30rpx; .zp-l-line-loading-view-black {
/* #endif */ border-color: #c8c8c8;
border-top-color: #444444;
}
.zp-l-line-loading-view-white {
border-color: #aaaaaa;
border-top-color: #ffffff;
} }
.zp-l-text { .zp-l-text {
...@@ -120,13 +104,28 @@ ...@@ -120,13 +104,28 @@
/* #endif */ /* #endif */
} }
.zp-l-text-black {
color: #a4a4a4;
}
.zp-l-text-white {
color: #efefef;
}
.zp-l-line { .zp-l-line {
height: 1px; height: 1px;
width: 100rpx; width: 100rpx;
margin: 0rpx 10rpx; margin: 0rpx 10rpx;
} }
/* #ifndef APP-NVUE */ .zp-l-line-black {
background-color: #eeeeee;
}
.zp-l-line-white {
background-color: #efefef;
}
@keyframes loading-circle { @keyframes loading-circle {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
...@@ -137,5 +136,4 @@ ...@@ -137,5 +136,4 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
/* #endif */
</style> </style>
<!-- [z-paging]下拉刷新view --> <!-- [z-paging]下拉刷新view -->
<template> <template>
<view style="height: 100%;"> <view style="height: 100%;">
<view :class="showUpdateTime?'zp-r-container zp-r-container-padding':'zp-r-container'"> <view :class="showUpdateTime?'zp-r-container zp-r-container-padding':'zp-r-container'">
<view class="zp-r-left"> <view class="zp-r-left">
<image v-if="status!==R.Loading" :class="leftImageClass" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" /> <image v-if="status!==2" :class="leftImageClass"
:style="[{width: showUpdateTime?'36rpx':'30rpx',height: showUpdateTime?'36rpx':'30rpx','margin-right': showUpdateTime?'20rpx':'9rpx'},imgStyle]"
:src="defaultThemeStyle==='white'?(status===3?base64SuccessWhite:base64ArrowWhite):(status===3?base64Success:base64Arrow)" />
<!-- #ifndef APP-NVUE --> <!-- #ifndef APP-NVUE -->
<image v-else :class="{'zp-line-loading-image':refreshingAnimated,'zp-r-left-image':true}" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" /> <image v-else class="zp-line-loading-image zp-r-left-image"
:style="[{width: showUpdateTime?'36rpx':'30rpx',height: showUpdateTime?'36rpx':'30rpx','margin-right': showUpdateTime?'20rpx':'9rpx'},imgStyle]"
:src="defaultThemeStyle==='white'?base64FlowerWhite:base64Flower" />
<!-- #endif --> <!-- #endif -->
<!-- #ifdef APP-NVUE --> <!-- #ifdef APP-NVUE -->
<view v-else :style="[{'margin-right':showUpdateTime?'18rpx':'12rpx'}]"> <view v-else :style="[{'margin-right':showUpdateTime?'18rpx':'12rpx'}]">
<loading-indicator :class="isIos?'zp-loading-image-ios':'zp-loading-image-android'" <loading-indicator :class="systemInfo.platform==='ios'?'zp-loading-image-ios':'zp-loading-image-android'"
:style="[{color:zTheme.indicator[ts]},imgStyle]" :animating="true" /> :style="[{color:defaultThemeStyle==='white'?'white':'#777777'},imgStyle]" animating />
</view> </view>
<!-- #endif --> <!-- #endif -->
</view> </view>
<view class="zp-r-right"> <view class="zp-r-right">
<text class="zp-r-right-text" :style="[rightTextStyle,titleStyle]">{{currentTitle}}</text> <text class="zp-r-right-text"
<text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text zp-r-right-time-text" :style="[rightTextStyle,updateTimeStyle]"> :style="[rightTextStyle,titleStyle]">{{statusTextArr[status]||defaultText}}
{{refresherTimeText}}
</text> </text>
<text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text zp-r-right-time-text" :style="[rightTextStyle,updateTimeStyle]">{{refresherTimeText}}</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
const systemInfo = uni.getSystemInfoSync();
import zStatic from '../js/z-paging-static' import zStatic from '../js/z-paging-static'
import u from '../js/z-paging-utils' import u from '../js/z-paging-utils'
import Enum from '../js/z-paging-enum'
export default { export default {
name: 'z-paging-refresh', name: 'z-paging-refresh',
data() { data() {
return { return {
R: Enum.Refresher, systemInfo: systemInfo,
isIos: uni.getSystemInfoSync().platform === 'ios', base64Arrow: zStatic.base64Arrow,
base64ArrowWhite: zStatic.base64ArrowWhite,
base64Flower: zStatic.base64Flower,
base64FlowerWhite: zStatic.base64FlowerWhite,
base64Success: zStatic.base64Success,
base64SuccessWhite: zStatic.base64SuccessWhite,
refresherTimeText: '', refresherTimeText: '',
zTheme: { leftImageLoaded: false
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', 'defaultImg', 'pullingImg', props: {
'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap' 'status': {
], default: 0
computed: {
ts() {
return this.defaultThemeStyle;
}, },
statusTextArr() { 'defaultThemeStyle': {},
this.updateTime(); 'defaultText': {},
return [this.defaultText,this.pullingText,this.refreshingText,this.completeText]; 'pullingText': {},
'refreshingText': {},
'completeText': {},
'showUpdateTime': {
default: false
}, },
currentTitle() { 'updateTimeKey': {},
return this.statusTextArr[this.status] || this.defaultText; 'imgStyle': {
default: {}
}, },
leftImageClass() { 'titleStyle': {
if (this.status === this.R.Complete) return 'zp-r-left-image-pre-size'; default: {}
return `zp-r-left-image zp-r-left-image-pre-size ${this.status === this.R.Default ? 'zp-r-arrow-down' : 'zp-r-arrow-top'}`;
}, },
leftImageStyle() { 'updateTimeStyle': {
const showUpdateTime = this.showUpdateTime; default: {}
const size = showUpdateTime ? '36rpx' : '30rpx';
return {width: size,height: size,'margin-right': showUpdateTime ? '20rpx' : '9rpx'};
}, },
leftImageSrc() { },
const R = this.R; computed: {
const status = this.status; statusTextArr() {
if (status === R.Default) { this.updateTime(this.updateTimeKey);
if (!!this.defaultImg) return this.defaultImg; return [this.defaultText,this.pullingText,this.refreshingText,this.completeText];
return this.zTheme.arrow[this.ts]; },
} else if (status === R.ReleaseToRefresh) { leftImageClass() {
if (!!this.pullingImg) return this.pullingImg; if(this.status === 3){
if (!!this.defaultImg) return this.defaultImg; return 'zp-r-left-image-no-transform .zp-r-left-image-pre-size';
return this.zTheme.arrow[this.ts]; }
} else if (status === R.Loading) { let cls = 'zp-r-left-image ';
if (!!this.refreshingImg) return this.refreshingImg; if (this.status === 0) {
return this.zTheme.flower[this.ts];; if (this.leftImageLoaded) {
} else if (status === R.Complete) { cls += 'zp-r-arrow-down';
if (!!this.completeImg) return this.completeImg; } else {
return this.zTheme.success[this.ts];; this.leftImageLoaded = true;
cls += 'zp-r-arrow-down-no-duration';
}
} else {
cls += 'zp-r-arrow-top';
} }
return ''; return cls + ' zp-r-left-image-pre-size';
}, },
rightTextStyle() { rightTextStyle() {
let stl = {}; let stl = {};
let color = '#555555';
if (this.defaultThemeStyle === 'white') {
color = '#efefef';
}
// #ifdef APP-NVUE // #ifdef APP-NVUE
const textHeight = this.showUpdateTime ? '40rpx' : '80rpx'; if (this.showUpdateTime) {
stl = {'height': textHeight, 'line-height': textHeight} stl = {
'height': '40rpx',
'line-height': '40rpx'
};
} else {
stl = {
'height': '80rpx',
'line-height': '80rpx'
};
}
// #endif // #endif
stl['color'] = this.zTheme.title[this.ts]; stl['color'] = color;
return stl; return stl;
} }
}, },
methods: { methods: {
updateTime() { updateTime(updateTimeKey) {
if (!updateTimeKey) {
updateTimeKey = this.updateTimeKey;
}
if (this.showUpdateTime) { if (this.showUpdateTime) {
this.refresherTimeText = u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap); this.refresherTimeText = u.getRefesrherFormatTimeByKey(updateTimeKey);
} }
} }
} }
...@@ -138,9 +160,26 @@ ...@@ -138,9 +160,26 @@
} }
.zp-r-left-image { .zp-r-left-image {
/* #ifndef APP-NVUE */
transform: rotate(180deg);
margin-top: 2rpx;
/* #endif */
/* #ifdef APP-NVUE */
transition-duration: .2s; transition-duration: .2s;
transition-property: transform; transition-property: transform;
color: #666666; color: #666666;
/* #endif */
}
.zp-r-left-image-no-transform {
/* #ifndef APP-NVUE */
margin-top: 2rpx;
/* #endif */
/* #ifdef APP-NVUE */
transition-duration: .2s;
transition-property: transform;
color: #666666;
/* #endif */
} }
.zp-r-left-image-pre-size{ .zp-r-left-image-pre-size{
...@@ -152,11 +191,39 @@ ...@@ -152,11 +191,39 @@
} }
.zp-r-arrow-top { .zp-r-arrow-top {
/* #ifndef APP-NVUE */
animation: refresher-arrow-top .2s linear;
-webkit-animation: refresher-arrow-top .2s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(0deg); transform: rotate(0deg);
/* #endif */
} }
.zp-r-arrow-down { .zp-r-arrow-down {
/* #ifndef APP-NVUE */
animation: refresher-arrow-down .2s linear;
-webkit-animation: refresher-arrow-down .2s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(180deg); transform: rotate(180deg);
/* #endif */
}
.zp-r-arrow-down-no-duration {
/* #ifndef APP-NVUE */
animation: refresher-arrow-down 0s linear;
-webkit-animation: refresher-arrow-down 0s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/* #endif */
/* #ifdef APP-NVUE */
transform: rotate(180deg);
/* #endif */
} }
.zp-r-right { .zp-r-right {
...@@ -179,4 +246,26 @@ ...@@ -179,4 +246,26 @@
margin-top: 10rpx; margin-top: 10rpx;
font-size: 24rpx; font-size: 24rpx;
} }
@keyframes refresher-arrow-top {
0% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes refresher-arrow-down {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
</style> </style>
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
/* #endif */ /* #endif */
flex-direction: column; flex-direction: column;
} }
...@@ -23,7 +22,8 @@ ...@@ -23,7 +22,8 @@
right: 0; right: 0;
} }
.zp-page-top,.zp-page-bottom { .zp-page-scroll-top,
.zp-page-scroll-bottom {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
width: auto; width: auto;
/* #endif */ /* #endif */
...@@ -33,43 +33,18 @@ ...@@ -33,43 +33,18 @@
z-index: 999; z-index: 999;
} }
.zp-page-left,.zp-page-right{
/* #ifndef APP-NVUE */
height: 100%;
/* #endif */
}
.zp-scroll-view-super { .zp-scroll-view-super {
flex: 1; flex: 1;
overflow: hidden;
position: relative; position: relative;
} }
.zp-view-super{ .zp-custom-refresher-container {
/* #ifndef APP-NVUE */ overflow: hidden;
display: flex;
/* #endif */
flex-direction: row;
} }
.zp-scroll-view-container,.zp-scroll-view { .zp-scroll-view {
position: relative;
/* #ifndef APP-NVUE */
height: 100%; height: 100%;
width: 100%; width: 100%;
/* #endif */
}
.zp-absoulte{
/* #ifndef APP-NVUE */
position: absolute;
top: 0;
width: auto;
/* #endif */
}
.zp-right{
right: 0;
} }
.zp-scroll-view-absolute { .zp-scroll-view-absolute {
...@@ -142,13 +117,12 @@ ...@@ -142,13 +117,12 @@
} }
.zp-custom-refresher-container { .zp-custom-refresher-container {
overflow: hidden;
}
.zp-custom-refresher-refresh {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: flex;
/* #endif */ /* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
} }
.zp-back-to-top { .zp-back-to-top {
...@@ -215,11 +189,3 @@ ...@@ -215,11 +189,3 @@
justify-content: center; justify-content: center;
width: 750rpx; width: 750rpx;
} }
.zp-n-list-container{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex: 1;
}
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
height: 32rpx; height: 32rpx;
} }
/* #ifndef APP-NVUE */
@keyframes loading-flower { @keyframes loading-flower {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
...@@ -31,5 +30,3 @@ ...@@ -31,5 +30,3 @@
transform: rotate(1turn); transform: rotate(1turn);
} }
} }
/* #endif */
// [z-paging]点击返回顶部view模块 // [z-paging]点击返回顶部view模块
import u from '.././z-paging-utils' import u from '.././z-paging-utils'
export default { const ZPBackToTop = {
props: { props: {
//自动显示点击返回顶部按钮,默认为否 //自动显示点击返回顶部按钮,默认为否
autoShowBackToTop: { autoShowBackToTop: {
type: Boolean, type: Boolean,
default: u.gc('autoShowBackToTop', false) default: u.gc('autoShowBackToTop', true)
}, },
//点击返回顶部按钮显示/隐藏的阈值(滚动距离),单位为px,默认为400rpx //点击返回顶部按钮显示/隐藏的阈值(滚动距离),单位为px,默认为400rpx
backToTopThreshold: { backToTopThreshold: {
...@@ -53,59 +53,56 @@ export default { ...@@ -53,59 +53,56 @@ export default {
return this.usePageScroll ? false : this.enableBackToTop; return this.usePageScroll ? false : this.enableBackToTop;
}, },
finalBackToTopThreshold() { finalBackToTopThreshold() {
return u.convertToPx(this.backToTopThreshold); return u.convertTextToPx(this.backToTopThreshold);
}, },
finalBackToTopStyle() { finalBackToTopStyle() {
const backToTopStyle = this.backToTopStyle; let tempBackToTopStyle = this.backToTopStyle;
if (!backToTopStyle.bottom) { if (!tempBackToTopStyle.bottom) {
backToTopStyle.bottom = this.windowBottom + u.convertToPx(this.backToTopBottom) + 'px'; tempBackToTopStyle.bottom = this.windowBottom + u.convertTextToPx(this.backToTopBottom) + 'px';
} }
if(!backToTopStyle.position){ if(!tempBackToTopStyle.position){
backToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute'; tempBackToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute';
} }
return backToTopStyle; return tempBackToTopStyle;
}, },
}, },
methods: { methods: {
//点击返回顶部 //点击返回顶部
_backToTopClick() { _backToTopClick() {
let callbacked = false; !this.backToTopWithAnimate && this._checkShouldShowBackToTop(1, 0);
this.$emit('backToTopClick', toTop => {
(toTop === undefined || toTop === true) && this._handleToTop();
callbacked = true;
});
this.$nextTick(() => {
!callbacked && this._handleToTop();
})
},
//处理滚动到顶部
_handleToTop() {
!this.backToTopWithAnimate && this._checkShouldShowBackToTop(0);
this.scrollToTop(this.backToTopWithAnimate); this.scrollToTop(this.backToTopWithAnimate);
}, },
//判断是否要显示返回顶部按钮 //判断是否要显示返回顶部按钮
_checkShouldShowBackToTop(scrollTop) { _checkShouldShowBackToTop(newVal, oldVal) {
if (!this.autoShowBackToTop) { if (!this.autoShowBackToTop) {
this.showBackToTopClass = false; this.showBackToTopClass = false;
return; return;
} }
if (scrollTop > this.finalBackToTopThreshold) { if (newVal !== oldVal) {
if (!this.showBackToTopClass) { if (newVal > this.finalBackToTopThreshold) {
this.showBackToTopClass = true; if (!this.showBackToTopClass) {
this.lastBackToTopShowTime = new Date().getTime(); this.showBackToTopClass = true;
u.delay(() => { this.lastBackToTopShowTime = new Date().getTime();
this.backToTopClass = 'zp-back-to-top zp-back-to-top-show'; setTimeout(() => {
}, 300) this.backToTopClass = 'zp-back-to-top zp-back-to-top-show';
} }, 300)
} else { }
if (this.showBackToTopClass) { } else {
this.backToTopClass = 'zp-back-to-top zp-back-to-top-hide'; if (this.showBackToTopClass) {
u.delay(() => { const currentTime = new Date().getTime();
this.showBackToTopClass = false; let dalayTime = 300;
}, new Date().getTime() - this.lastBackToTopShowTime < 500 ? 0 : 300) if(currentTime - this.lastBackToTopShowTime < 500){
dalayTime = 0;
}
this.backToTopClass = 'zp-back-to-top zp-back-to-top-hide';
setTimeout(() => {
this.showBackToTopClass = false;
}, dalayTime)
}
} }
} }
}, },
} }
} }
export default ZPBackToTop;
// [z-paging]空数据图view模块 // [z-paging]空数据图view模块
import u from '.././z-paging-utils' import u from '.././z-paging-utils'
export default { const ZPEmptyView = {
props: { props: {
//是否强制隐藏空数据图,默认为否 //是否强制隐藏空数据图,默认为否
hideEmptyView: { hideEmptyView: {
...@@ -78,15 +78,19 @@ export default { ...@@ -78,15 +78,19 @@ export default {
return u.gc('emptyViewReloadStyle', {}); return u.gc('emptyViewReloadStyle', {});
} }
}, },
//空数据图片是否铺满z-paging,默认为否,即填充满z-paging内列表(滚动区域)部分。若设置为否,则为填铺满整个z-paging //空数据图片是否铺满z-paging,默认为是。若设置为否,则为填充满z-paging的剩余部分
emptyViewFixed: { emptyViewFixed: {
type: Boolean, type: Boolean,
default: u.gc('emptyViewFixed', false) default: function() {
return u.gc('emptyViewFixed', false)
}
}, },
//空数据图片是否垂直居中,默认为是,若设置为否即为从空数据容器顶部开始显示。emptyViewFixed为false时有效 //空数据图片是否垂直居中,默认为是。emptyViewFixed为false时有效
emptyViewCenter: { emptyViewCenter: {
type: Boolean, type: Boolean,
default: u.gc('emptyViewCenter', true) default: function() {
return u.gc('emptyViewCenter', true)
}
}, },
//加载中时是否自动隐藏空数据图,默认为是 //加载中时是否自动隐藏空数据图,默认为是
autoHideEmptyViewWhenLoading: { autoHideEmptyViewWhenLoading: {
...@@ -104,11 +108,6 @@ export default { ...@@ -104,11 +108,6 @@ export default {
default: u.gc('emptyViewZIndex', 9) default: u.gc('emptyViewZIndex', 9)
}, },
}, },
data() {
return {
customerEmptyViewErrorText: ''
}
},
computed: { computed: {
finalEmptyViewImg() { finalEmptyViewImg() {
return this.isLoadFailed ? this.emptyViewErrorImg : this.emptyViewImg; return this.isLoadFailed ? this.emptyViewErrorImg : this.emptyViewImg;
...@@ -117,36 +116,35 @@ export default { ...@@ -117,36 +116,35 @@ export default {
return this.isLoadFailed ? this.showEmptyViewReloadWhenError : this.showEmptyViewReload; return this.isLoadFailed ? this.showEmptyViewReloadWhenError : this.showEmptyViewReload;
}, },
showEmpty() { showEmpty() {
if (this.refresherOnly || this.hideEmptyView || this.realTotalData.length) return false; if(this.refresherOnly || this.hideEmptyView || this.totalData.length) return false;
if (this.autoHideEmptyViewWhenLoading) { if(this.autoHideEmptyViewWhenLoading){
if (this.isAddedData && !this.firstPageLoaded && !this.loading) return true; if (this.isAddedData && !this.firstPageLoaded && !this.loading) return true;
} else { }else{
return true; return true;
} }
return !this.autoHideEmptyViewWhenPull && !this.isUserReload; if (!this.autoHideEmptyViewWhenPull && !this.isUserReload) return true;
return false;
}, },
}, },
methods: { methods: {
//点击了空数据view重新加载按钮 //点击了空数据view重新加载按钮
_emptyViewReload() { _emptyViewReload() {
let callbacked = false; let callbacked = false;
this.$emit('emptyViewReload', reload => { this.$emit('emptyViewReload', (reload) => {
if (reload === undefined || reload === true) { if (reload === undefined || reload === true) {
this.fromEmptyViewReload = true; this.fromEmptyViewReload = true;
this.reload().catch(() => {}); this.reload();
} }
callbacked = true; callbacked = true;
}); });
this.$nextTick(() => { this.$nextTick(() => {
if (!callbacked) { if (!callbacked) {
this.fromEmptyViewReload = true; this.fromEmptyViewReload = true;
this.reload().catch(() => {}); this.reload();
} }
}) })
}, },
//点击了空数据view
_emptyViewClick() {
this.$emit('emptyViewClick');
},
} }
} }
\ No newline at end of file
export default ZPEmptyView;
// [z-paging]i18n模块 // [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 u from '.././z-paging-utils'
import c from '.././z-paging-constant' import c from '.././z-paging-constant'
import interceptor from '../z-paging-interceptor' import zI18n from '.././z-paging-i18n'
const language = uni.getSystemInfoSync().language; const systemInfo = uni.getSystemInfoSync();
export default { const ZPI18n = {
props: {
//i18n国际化设置语言,支持简体中文(zh-cn)、繁体中文(zh-hant-cn)和英文(en)
language: {
type: String,
default: u.gc('language', '')
},
//i18n国际化默认是否跟随系统语言,默认为是
followSystemLanguage: {
type: Boolean,
default: u.gc('followSystemLanguage', true)
},
},
data() { data() {
return { return {
language tempLanguageUpdateKey: 0,
} }
}, },
computed: { computed: {
finalLanguage() { tempLanguage() {
try { let systemLanguage = false;
const local = uni.getLocale(); const temp = this.tempLanguageUpdateKey;
const language = this.language; if (this.followSystemLanguage) {
return local === 'auto' ? interceptor._handleLanguage2Local(language, this._language2Local(language)) : local; systemLanguage = systemInfo.language;
} catch (e) {
return 'zh-Hans';
} }
return uni.getStorageSync(c.i18nUpdateKey) || systemLanguage || 'zh-cn';
},
finalTempLanguage() {
return this.language.length ? this.language : this.tempLanguage;
},
finalLanguage() {
let language = this.finalTempLanguage.toLowerCase();
return zI18n._getPrivateLanguage(language, this.followSystemLanguage);
}, },
finalRefresherDefaultText() { finalRefresherDefaultText() {
return this._getI18nText('zp.refresher.default', this.refresherDefaultText); return this._getI18nText('refresherDefaultText', this.refresherDefaultText);
}, },
finalRefresherPullingText() { finalRefresherPullingText() {
return this._getI18nText('zp.refresher.pulling', this.refresherPullingText); return this._getI18nText('refresherPullingText', this.refresherPullingText);
}, },
finalRefresherRefreshingText() { finalRefresherRefreshingText() {
return this._getI18nText('zp.refresher.refreshing', this.refresherRefreshingText); return this._getI18nText('refresherRefreshingText', this.refresherRefreshingText);
}, },
finalRefresherCompleteText() { finalRefresherCompleteText() {
return this._getI18nText('zp.refresher.complete', this.refresherCompleteText); return this._getI18nText('refresherCompleteText', this.refresherCompleteText);
},
finalRefresherUpdateTimeTextMap() {
return {
title: t('zp.refresherUpdateTime.title'),
none: t('zp.refresherUpdateTime.none'),
today: t('zp.refresherUpdateTime.today'),
yesterday: t('zp.refresherUpdateTime.yesterday')
};
}, },
finalLoadingMoreDefaultText() { finalLoadingMoreDefaultText() {
return this._getI18nText('zp.loadingMore.default', this.loadingMoreDefaultText); return this._getI18nText('loadingMoreDefaultText', this.loadingMoreDefaultText);
}, },
finalLoadingMoreLoadingText() { finalLoadingMoreLoadingText() {
return this._getI18nText('zp.loadingMore.loading', this.loadingMoreLoadingText); return this._getI18nText('loadingMoreLoadingText', this.loadingMoreLoadingText);
}, },
finalLoadingMoreNoMoreText() { finalLoadingMoreNoMoreText() {
return this._getI18nText('zp.loadingMore.noMore', this.loadingMoreNoMoreText); return this._getI18nText('loadingMoreNoMoreText', this.loadingMoreNoMoreText);
}, },
finalLoadingMoreFailText() { finalLoadingMoreFailText() {
return this._getI18nText('zp.loadingMore.fail', this.loadingMoreFailText); return this._getI18nText('loadingMoreFailText', this.loadingMoreFailText);
}, },
finalEmptyViewText() { finalEmptyViewText() {
return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText('zp.emptyView.title', this.emptyViewText); return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText('emptyViewText', this.emptyViewText);
}, },
finalEmptyViewReloadText() { finalEmptyViewReloadText() {
return this._getI18nText('zp.emptyView.reload', this.emptyViewReloadText); return this._getI18nText('emptyViewReloadText', this.emptyViewReloadText);
}, },
finalEmptyViewErrorText() { finalEmptyViewErrorText() {
return this.customerEmptyViewErrorText || this._getI18nText('zp.emptyView.error', this.emptyViewErrorText); return this._getI18nText('emptyViewErrorText', this.emptyViewErrorText);
},
finalSystemLoadingText() {
return this._getI18nText('zp.systemLoading.title', this.systemLoadingText);
}, },
}, },
methods: { methods: {
//设置i18n国际化语言
setI18n(language) {
zI18n.setLanguage(language);
},
//获取当前z-paging的语言 //获取当前z-paging的语言
getLanguage() { getLanguage() {
return this.finalLanguage; return this.finalLanguage;
...@@ -83,19 +90,9 @@ export default { ...@@ -83,19 +90,9 @@ export default {
} else if (dataType === '[object String]') { } else if (dataType === '[object String]') {
return value; return value;
} }
return t(key); return zI18n.t[key][this.finalLanguage];
}, },
//系统language转i18n 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;
}
} }
} }
export default ZPI18n;
// [z-paging]nvue独有部分模块 // [z-paging]nvue独有部分模块
import u from '.././z-paging-utils' import u from '.././z-paging-utils'
import c from '.././z-paging-constant'
import Enum from '.././z-paging-enum' import Enum from '.././z-paging-enum'
// #ifdef APP-NVUE // #ifdef APP-NVUE
const weexAnimation = weex.requireModule('animation'); const weexAnimation = weex.requireModule('animation');
// #endif // #endif
export default { const ZPNvue = {
props: { props: {
// #ifdef APP-NVUE
//nvue中修改列表类型,可选值有list、waterfall和scroller,默认为list //nvue中修改列表类型,可选值有list、waterfall和scroller,默认为list
nvueListIs: { nvueListIs: {
type: String, type: String,
...@@ -43,22 +41,11 @@ export default { ...@@ -43,22 +41,11 @@ export default {
return u.gc('nvueRefresherStyle', {}); return u.gc('nvueRefresherStyle', {});
} }
}, },
//nvue中是否按分页模式(类似竖向swiper)显示List,默认为false
nvuePagingEnabled: {
type: Boolean,
default: u.gc('nvuePagingEnabled', false)
},
//是否隐藏nvue列表底部的tagView,此view用于标识滚动到底部位置,若隐藏则滚动到底部功能将失效,在nvue中实现吸顶+swiper功能时需将最外层z-paging的此属性设置为true。默认为否 //是否隐藏nvue列表底部的tagView,此view用于标识滚动到底部位置,若隐藏则滚动到底部功能将失效,在nvue中实现吸顶+swiper功能时需将最外层z-paging的此属性设置为true。默认为否
hideNvueBottomTag: { hideNvueBottomTag: {
type: Boolean, type: Boolean,
default: u.gc('hideNvueBottomTag', false) default: u.gc('hideNvueBottomTag', false)
}, },
//nvue中控制onscroll事件触发的频率:表示两次onscroll事件之间列表至少滚动了10px。注意,将该值设置为较小的数值会提高滚动事件采样的精度,但同时也会降低页面的性能
offsetAccuracy: {
type: Number,
default: u.gc('offsetAccuracy', 10)
},
// #endif
}, },
data() { data() {
return { return {
...@@ -71,32 +58,19 @@ export default { ...@@ -71,32 +58,19 @@ export default {
nFirstPageAndNoMoreChecked: false, nFirstPageAndNoMoreChecked: false,
nLoadingMoreFixedHeight: false, nLoadingMoreFixedHeight: false,
nShowRefresherRevealHeight: 0, nShowRefresherRevealHeight: 0,
nOldShowRefresherRevealHeight: -1,
nRefresherWidth: uni.upx2px(750),
} }
}, },
watch: { watch: {
// #ifdef APP-NVUE
nIsFirstPageAndNoMore: { nIsFirstPageAndNoMore: {
handler(newVal) { handler(newVal) {
const cellStyle = !this.useChatRecordMode || newVal ? {} : { transform: 'rotate(180deg)' }; const cellStyle = !this.useChatRecordMode || newVal ? {} : {transform: 'rotate(180deg)'};
this.$emit('update:cellStyle', cellStyle); this.$emit('update:cellStyle', cellStyle);
this.$emit('cellStyleChange', cellStyle);
}, },
immediate: true immediate: true
}, }
// #endif
}, },
computed: { computed: {
// #ifdef APP-NVUE // #ifdef APP-NVUE
nScopedSlots() {
// #ifdef VUE2
return this.$scopedSlots;
// #endif
// #ifdef VUE3
return null;
// #endif
},
nWaterfallColumnCount() { nWaterfallColumnCount() {
if (this.finalNvueListIs !== 'waterfall') return 0; if (this.finalNvueListIs !== 'waterfall') return 0;
return this._nGetWaterfallConfig('column-count', 2); return this._nGetWaterfallConfig('column-count', 2);
...@@ -120,13 +94,12 @@ export default { ...@@ -120,13 +94,12 @@ export default {
nSafeAreaBottomHeight() { nSafeAreaBottomHeight() {
return this.safeAreaInsetBottom ? this.safeAreaBottom : 0; return this.safeAreaInsetBottom ? this.safeAreaBottom : 0;
}, },
nChatRecordRotateStyle() {
return this.useChatRecordMode ? { transform: this.nIsFirstPageAndNoMore ? 'rotate(0deg)' : 'rotate(180deg)' } : {};
},
finalNvueListIs() { finalNvueListIs() {
if (this.usePageScroll) return 'view'; if (this.usePageScroll) return 'view';
const nvueListIsLowerCase = this.nvueListIs.toLowerCase(); const nvueListIsLowerCase = this.nvueListIs.toLowerCase();
if (['list','waterfall','scroller'].indexOf(nvueListIsLowerCase) !== -1) return nvueListIsLowerCase; if (['list','waterfall','scroller'].indexOf(nvueListIsLowerCase) !== -1) {
return nvueListIsLowerCase;
}
return 'list'; return 'list';
}, },
finalNvueSuperListIs() { finalNvueSuperListIs() {
...@@ -137,23 +110,14 @@ export default { ...@@ -137,23 +110,14 @@ export default {
}, },
// #endif // #endif
}, },
mounted(){
// #ifdef APP-NVUE
//旋转屏幕时更新宽度
uni.onWindowResize((res) => {
// this._nUpdateRefresherWidth();
})
// #endif
},
methods: { methods: {
// #ifdef APP-NVUE // #ifdef APP-NVUE
//列表滚动时触发 //列表滚动时触发
_nOnScroll(e) { _nOnScroll(e) {
this.$emit('scroll', e); this.$emit('scroll', e);
const contentOffsetY = -e.contentOffset.y; const contentOffsetY = e.contentOffset.y;
this.oldScrollTop = contentOffsetY;
this.nListIsDragging = e.isDragging; this.nListIsDragging = e.isDragging;
this._checkShouldShowBackToTop(contentOffsetY, contentOffsetY - 1); this._checkShouldShowBackToTop(-e.contentOffset.y, -e.contentOffset.y - 1);
}, },
//下拉刷新刷新中 //下拉刷新刷新中
_nOnRrefresh() { _nOnRrefresh() {
...@@ -166,62 +130,62 @@ export default { ...@@ -166,62 +130,62 @@ export default {
_nOnPullingdown(e) { _nOnPullingdown(e) {
if (this.refresherStatus === Enum.Refresher.Loading || (this.isIos && !this.nListIsDragging)) return; if (this.refresherStatus === Enum.Refresher.Loading || (this.isIos && !this.nListIsDragging)) return;
this._emitTouchmove(e); this._emitTouchmove(e);
const { viewHeight, pullingDistance } = e; const viewHeight = e.viewHeight;
this.refresherStatus = pullingDistance >= viewHeight ? Enum.Refresher.ReleaseToRefresh : Enum.Refresher.Default; const pullingDis = e.pullingDistance;
this.refresherStatus = pullingDis >= viewHeight ? Enum.Refresher.ReleaseToRefresh : Enum.Refresher.Default;
}, },
//下拉刷新结束 //下拉刷新结束
_nRefresherEnd(doEnd = true) { _nRefresherEnd(doEnd=true) {
if (doEnd) { if (doEnd) {
this._nDoRefresherEndAnimation(0, -this.nShowRefresherRevealHeight); this._nDoRefresherEndAnimation(0, -this.nShowRefresherRevealHeight);
!this.usePageScroll && this.$refs['zp-n-list'].resetLoadmore(); !this.usePageScroll && this.$refs["n-list"].resetLoadmore();
this.nRefresherLoading = false; this.nRefresherLoading = false;
} }
if (!this.nShowBottom) {
setTimeout(() => {
this.$nextTick(() => {
this.nShowBottom = true;
})
}, 1000);
}
}, },
//执行主动触发下拉刷新动画 //执行主动触发下拉刷新动画
_nDoRefresherEndAnimation(height, translateY, animate = true, checkStack = true) { _nDoRefresherEndAnimation(height, translateY, animate = true, checkStack = true) {
this._cleanRefresherCompleteTimeout(); this._cleanRefresherCompleteTimeout();
this._cleanRefresherEndTimeout(); this._cleanRefresherEndTimeout();
if (!this.finalShowRefresherWhenReload) { if (!this.finalShowRefresherWhenReload) {
this.refresherEndTimeout = u.delay(() => { this.refresherEndTimeout = setTimeout(() => {
this.refresherStatus = Enum.Refresher.Default; this.refresherStatus = Enum.Refresher.Default;
}, this.refresherCompleteDuration); }, this.refresherCompleteDuration);
return; return;
} }
const stackCount = this.refresherRevealStackCount; const stackCount = this.refresherRevealStackCount;
if (height === 0 && checkStack) { if (height === 0 && checkStack) {
this.refresherRevealStackCount --; this.refresherRevealStackCount--;
if (stackCount > 1) return; if (stackCount > 1) return;
this.refresherEndTimeout = u.delay(() => { this.refresherEndTimeout = setTimeout(() => {
this.refresherStatus = Enum.Refresher.Default; this.refresherStatus = Enum.Refresher.Default;
}, this.refresherCompleteDuration); }, this.refresherCompleteDuration);
} }
if (stackCount > 1) { if (stackCount > 1) {
this.refresherStatus = Enum.Refresher.Loading; this.refresherStatus = Enum.Refresher.Loading;
} }
const duration = animate ? 120 : 0;
const duration = animate ? 200 : 0; weexAnimation.transition(this.$refs['zp-n-list-refresher-reveal'], {
if (this.nOldShowRefresherRevealHeight !== height) { styles: {
if (height > 0) { height: `${height}px`,
this.nShowRefresherReveal = true; transform: `translateY(${translateY}px)`,
} },
weexAnimation.transition(this.$refs['zp-n-list-refresher-reveal'], { duration: duration,
styles: { timingFunction: 'linear',
height: `${height}px`, needLayout: true,
transform: `translateY(${translateY}px)`, delay: 0
}, })
duration, setTimeout(() => {
timingFunction: 'linear',
needLayout: true,
delay: 0
})
}
u.delay(() => {
if (animate) { if (animate) {
this.nShowRefresherReveal = height > 0; this.nShowRefresherReveal = height > 0;
} }
}, duration > 0 ? duration - 60 : 0); }, duration > 0 ? duration - 100 : 0);
this.nOldShowRefresherRevealHeight = height;
}, },
//滚动到底部加载更多 //滚动到底部加载更多
_nOnLoadmore() { _nOnLoadmore() {
...@@ -231,19 +195,9 @@ export default { ...@@ -231,19 +195,9 @@ export default {
//获取nvue waterfall单项配置 //获取nvue waterfall单项配置
_nGetWaterfallConfig(key, defaultValue) { _nGetWaterfallConfig(key, defaultValue) {
return this.nvueWaterfallConfig[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 // #endif
} }
} }
export default ZPNvue;
...@@ -5,14 +5,19 @@ let getedStorage = false; ...@@ -5,14 +5,19 @@ let getedStorage = false;
const storageKey = 'Z-PAGING-CONFIG-STORAGE-KEY' const storageKey = 'Z-PAGING-CONFIG-STORAGE-KEY'
function setConfig(value) { function setConfig(value) {
uni.setStorageSync(storageKey, value); try {
uni.setStorageSync(storageKey, value);
} catch (e) {}
} }
function getConfig() { function getConfig() {
if (getedStorage) return config; try {
config = uni.getStorageSync(storageKey); if (getedStorage) return config;
getedStorage = true; config = uni.getStorageSync(storageKey);
return config; getedStorage = true;
} catch (e) {
return null;
}
} }
export default { export default {
......
// [z-paging]常量
const version = '2.2.0';
const delayTime = 100;
const i18nUpdateKey = 'z-paging-i18n-update';
const errorUpdateKey = 'z-paging-error-emit';
const completeUpdateKey = 'z-paging-complete-emit';
export default {
version,
delayTime,
i18nUpdateKey,
errorUpdateKey,
completeUpdateKey
}
\ No newline at end of file
// [z-paging]枚举 // [z-paging]枚举
export default { const Enum = {
//当前加载类型 0.下拉刷新 1.上拉加载更多 //当前加载类型 0.下拉刷新 1.上拉加载更多
LoadingType: { LoadingType: {
Refresher: 0, Refresher: 0,
...@@ -26,19 +26,7 @@ export default { ...@@ -26,19 +26,7 @@ export default {
Reload: 1, Reload: 1,
Refresh: 2, Refresh: 2,
LoadingMore: 3 LoadingMore: 3
},
//虚拟列表cell高度模式
CellHeightMode: {
//固定高度
Fixed: 'fixed',
//动态高度
Dynamic: 'dynamic'
},
//列表缓存模式
CacheMode: {
//默认模式,只会缓存一次
Default: 'default',
//总是缓存,每次列表刷新(下拉刷新、调用reload等)都会更新缓存
Always: 'always'
} }
} }
\ No newline at end of file
export default Enum;
// z-paging国际化(支持中文、中文繁体和英文)
const i18nUpdateKey = 'z-paging-i18n-update';
const t = {
refresherDefaultText: {
'en': 'Pull down to refresh',
'zh-cn': '继续下拉刷新',
'zh-hant-cn': '繼續下拉重繪',
},
refresherPullingText: {
'en': 'Release to refresh',
'zh-cn': '松开立即刷新',
'zh-hant-cn': '鬆開立即重繪',
},
refresherRefreshingText: {
'en': 'Refreshing...',
'zh-cn': '正在刷新...',
'zh-hant-cn': '正在重繪...',
},
refresherCompleteText: {
'en': 'Refresh succeeded',
'zh-cn': '刷新成功',
'zh-hant-cn': '重繪成功',
},
loadingMoreDefaultText: {
'en': 'Click to load more',
'zh-cn': '点击加载更多',
'zh-hant-cn': '點擊加載更多',
},
loadingMoreLoadingText: {
'en': 'Loading...',
'zh-cn': '正在加载...',
'zh-hant-cn': '正在加載...',
},
loadingMoreNoMoreText: {
'en': 'No more data',
'zh-cn': '没有更多了',
'zh-hant-cn': '沒有更多了',
},
loadingMoreFailText: {
'en': 'Load failed,click to reload',
'zh-cn': '加载失败,点击重新加载',
'zh-hant-cn': '加載失敗,點擊重新加載',
},
emptyViewText: {
'en': 'No data',
'zh-cn': '没有数据哦~',
'zh-hant-cn': '沒有數據哦~',
},
emptyViewReloadText: {
'en': 'Reload',
'zh-cn': '重新加载',
'zh-hant-cn': '重新加載',
},
emptyViewErrorText: {
'en': 'Sorry,load failed',
'zh-cn': '很抱歉,加载失败',
'zh-hant-cn': '很抱歉,加載失敗',
},
refresherUpdateTimeText: {
'en': 'Last update: ',
'zh-cn': '最后更新:',
'zh-hant-cn': '最後更新:',
},
refresherUpdateTimeNoneText: {
'en': 'None',
'zh-cn': '无',
'zh-hant-cn': '無',
},
refresherUpdateTimeTodayText: {
'en': 'Today',
'zh-cn': '今天',
'zh-hant-cn': '今天',
},
refresherUpdateTimeYesterdayText: {
'en': 'Yesterday',
'zh-cn': '昨天',
'zh-hant-cn': '昨天',
}
}
// 获取当前语言,格式为:zh-cn、zh-hant-cn、en。followSystemLanguage:获取的结果是否是在不跟随系统语言下获取到的
function getLanguage(followSystemLanguage = true) {
return _getPrivateLanguage(false, followSystemLanguage);
}
// 获取当前语言,格式为:简体中文、繁體中文、English。followSystemLanguage:获取的结果是否是在不跟随系统语言下获取到的
function getLanguageName(followSystemLanguage = true) {
const language = getLanguage(followSystemLanguage);
const languageNameMap = {
'zh-cn': '简体中文',
'zh-hant-cn': '繁體中文',
'en': 'English'
};
return languageNameMap[language];
}
//设置当前语言,格式为:zh-cn、zh-hant-cn、en
function setLanguage(myLanguage) {
uni.setStorageSync(i18nUpdateKey, myLanguage);
uni.$emit(i18nUpdateKey, myLanguage);
}
// 插件内部使用,请勿直接调用
function _getPrivateLanguage(myLanguage, followSystemLanguage = true) {
let systemLanguage = '';
if (followSystemLanguage) {
systemLanguage = uni.getSystemInfoSync().language;
}
let language = myLanguage || uni.getStorageSync(i18nUpdateKey) || systemLanguage;
language = language.toLowerCase();
var reg = new RegExp('_', '');
language = language.replace(reg, '-');
if (language.indexOf('zh') !== -1) {
if (language === 'zh' || language === 'zh-cn' || language.indexOf('zh-hans') !== -1) {
return 'zh-cn';
}
return 'zh-hant-cn';
}
if (language.indexOf('en') !== -1) {
return 'en';
}
return 'zh-cn';
}
export default {
t,
getLanguage,
getLanguageName,
setLanguage,
_getPrivateLanguage,
}
// [z-paging]使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法 // [z-paging]使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法
export default { const ZPagingMixin = {
onPullDownRefresh() { onPullDownRefresh() {
if (this.isPagingRefNotFound()) return; if (this.isPagingRefNotFound()) return;
this.$refs.paging.reload().catch(() => {}); this.$refs.paging.reload();
}, },
onPageScroll(e) { onPageScroll(e) {
if (this.isPagingRefNotFound()) return; if (this.isPagingRefNotFound()) return;
this.$refs.paging.updatePageScrollTop(e.scrollTop); this.$refs.paging.updatePageScrollTop(e.scrollTop);
e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore(); if (e.scrollTop < 10) {
this.$refs.paging.doChatRecordLoadMore();
}
}, },
onReachBottom() { onReachBottom() {
if (this.isPagingRefNotFound()) return; if (this.isPagingRefNotFound()) return;
this.$refs.paging.pageReachBottom(); this.$refs.paging.doLoadMore();
}, },
methods: { methods: {
isPagingRefNotFound() { isPagingRefNotFound() {
return !this.$refs.paging; return !this.$refs.paging || this.$refs.paging === undefined;
} }
} }
} }
export default ZPagingMixin;
This diff is collapsed.
// [z-paging]工具类 // [z-paging]工具类
import zI18n from './z-paging-i18n'
import zConfig from './z-paging-config' import zConfig from './z-paging-config'
import zLocalConfig from '../config/index' import zLocalConfig from '../config/index'
import c from './z-paging-constant'
const storageKey = 'Z-PAGING-REFRESHER-TIME-STORAGE-KEY'; const storageKey = 'Z-PAGING-REFRESHER-TIME-STORAGE-KEY'
let config = null; let config = null;
const timeoutMap = {};
/* /*
当z-paging未使用uni_modules管理时,控制台会有警告:WARNING: Module not found: Error: Can't resolve '@/uni_modules/z-paging'... 当z-paging未使用uni_modules管理时,控制台会有警告:WARNING: Module not found: Error: Can't resolve '@/uni_modules/z-paging'...
此时注释下方try中的代码即可 此时注释下方try中的代码即可
*/ */
// #ifdef VUE2 // try {
try { // const contextKeys = require.context('@/uni_modules/z-paging', false, /\z-paging-config$/).keys();
const contextKeys = require.context('@/uni_modules/z-paging', false, /\z-paging-config$/).keys(); // if (contextKeys.length) {
if (contextKeys.length) { // const suffix = '.js';
const suffix = '.js'; // config = require('@/uni_modules/z-paging/z-paging-config' + suffix);
config = require('@/uni_modules/z-paging/z-paging-config' + suffix); // }
} // } catch (e) {}
} catch (e) {}
// #endif
//获取默认配置信息 //获取默认配置信息
function gc(key, defaultValue) { function gc(key, defaultValue) {
...@@ -28,17 +25,33 @@ function gc(key, defaultValue) { ...@@ -28,17 +25,33 @@ function gc(key, defaultValue) {
if (zLocalConfig && Object.keys(zLocalConfig).length) { if (zLocalConfig && Object.keys(zLocalConfig).length) {
config = zLocalConfig; config = zLocalConfig;
} else { } else {
const tempConfig = zConfig.getConfig(); const temConfig = zConfig.getConfig();
if (zConfig && tempConfig) { if (zConfig && temConfig) {
config = tempConfig; config = temConfig;
} }
} }
} }
if (!config) return defaultValue; if (!config) {
const value = config[_toKebab(key)]; return defaultValue;
return value === undefined ? defaultValue : value; }
let value = config[_toKebab(key)];
if (value === undefined) {
value = config[key];
} else {
return value;
}
return defaultValue;
} }
//判断两个数组是否相等
function arrayIsEqual(arr1, arr2) {
if (arr1 === arr2) return true;
if (arr1.length !== arr2.length) return false;
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
}
//获取最终的touch位置 //获取最终的touch位置
function getTouch(e) { function getTouch(e) {
...@@ -64,18 +77,14 @@ function getTouch(e) { ...@@ -64,18 +77,14 @@ function getTouch(e) {
//判断当前手势是否在z-paging内触发 //判断当前手势是否在z-paging内触发
function getTouchFromZPaging(target) { function getTouchFromZPaging(target) {
if (target && target.tagName && target.tagName !== 'BODY' && target.tagName !== 'UNI-PAGE-BODY') { if (target && target.tagName && target.tagName !== 'BODY' && target.tagName !== 'UNI-PAGE-BODY') {
const classList = target.classList; var classList = target.classList;
if (classList && classList.contains('z-paging-content')) { if (classList && classList.contains('zp-paging-touch-view')) {
return { return true;
isFromZp: true,
isPageScroll: classList.contains('z-paging-content-page'),
isReachedTop: classList.contains('z-paging-reached-top')
};
} else { } else {
return getTouchFromZPaging(target.parentNode); return getTouchFromZPaging(target.parentNode);
} }
} else { } else {
return { isFromZp: false }; return false;
} }
} }
...@@ -91,45 +100,59 @@ function consoleErr(err) { ...@@ -91,45 +100,59 @@ function consoleErr(err) {
console.error(`[z-paging]${err}`); console.error(`[z-paging]${err}`);
} }
//延时操作,如果key存在,调用时根据key停止之前的延时操作 //打印警告信息
function delay(callback, ms = c.delayTime, key) { function consoleWarn(warn) {
const timeout = setTimeout(callback, ms);; console.warn(`[z-paging]${warn}`);
if (!!key) {
timeoutMap[key] && clearTimeout(timeoutMap[key]);
timeoutMap[key] = timeout;
}
return timeout;
} }
//设置下拉刷新时间 //设置下拉刷新时间
function setRefesrherTime(time, key) { function setRefesrherTime(time, key) {
const datas = getRefesrherTime() || {}; try {
datas[key] = time; let datas = getRefesrherTime();
uni.setStorageSync(storageKey, datas); if (!datas) {
datas = {};
}
datas[key] = time;
uni.setStorageSync(storageKey, datas);
} catch (e) {}
} }
//获取下拉刷新时间 //获取下拉刷新时间
function getRefesrherTime() { function getRefesrherTime() {
return uni.getStorageSync(storageKey); try {
const datas = uni.getStorageSync(storageKey);
return datas;
} catch (e) {
return null;
}
} }
//通过下拉刷新标识key获取下拉刷新时间 //通过下拉刷新标识key获取下拉刷新时间
function getRefesrherTimeByKey(key) { function getRefesrherTimeByKey(key) {
const datas = getRefesrherTime(); const datas = getRefesrherTime();
return datas && datas[key] ? datas[key] : null; if (datas) {
const data = datas[key];
if (data) return data;
}
return null;
} }
//通过下拉刷新标识key获取下拉刷新时间(格式化之后) //通过下拉刷新标识key获取下拉刷新时间(格式化之后)
function getRefesrherFormatTimeByKey(key, textMap) { function getRefesrherFormatTimeByKey(key) {
const time = getRefesrherTimeByKey(key); const time = getRefesrherTimeByKey(key);
const timeText = time ? _timeFormat(time, textMap) : textMap.none; let timeText = zI18n.t['refresherUpdateTimeNoneText'][zI18n.getLanguage()];
return `${textMap.title}${timeText}`; if (time) {
timeText = _timeFormat(time);
}
return `${zI18n.t['refresherUpdateTimeText'][zI18n.getLanguage()]}${timeText}`;
} }
//将文本的px或者rpx转为px的值 //将文本的px或者rpx转为px的值
function convertToPx(text) { function convertTextToPx(text) {
const dataType = Object.prototype.toString.call(text); const dataType = Object.prototype.toString.call(text);
if (dataType === '[object Number]') return text; if (dataType === '[object Number]') {
return text;
}
let isRpx = false; let isRpx = false;
if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) { if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) {
text = text.replace('rpx', '').replace('upx', ''); text = text.replace('rpx', '').replace('upx', '');
...@@ -149,26 +172,8 @@ function getTime() { ...@@ -149,26 +172,8 @@ function getTime() {
return (new Date()).getTime(); return (new Date()).getTime();
} }
//获取z-paging实例id
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);
});
}
//------------------ 私有方法 ------------------------ //------------------ 私有方法 ------------------------
//时间格式化 function _timeFormat(time) {
function _timeFormat(time, textMap) {
const date = new Date(time); const date = new Date(time);
const currentDate = new Date(); const currentDate = new Date();
const dateDay = new Date(time).setHours(0, 0, 0, 0); const dateDay = new Date(time).setHours(0, 0, 0, 0);
...@@ -177,34 +182,36 @@ function _timeFormat(time, textMap) { ...@@ -177,34 +182,36 @@ function _timeFormat(time, textMap) {
let dayStr = ''; let dayStr = '';
const timeStr = _dateTimeFormat(date); const timeStr = _dateTimeFormat(date);
if (disTime === 0) { if (disTime === 0) {
dayStr = textMap.today; dayStr = zI18n.t['refresherUpdateTimeTodayText'][zI18n.getLanguage()];
} else if (disTime === -86400000) { } else if (disTime === -86400000) {
dayStr = textMap.yesterday; dayStr = zI18n.t['refresherUpdateTimeYesterdayText'][zI18n.getLanguage()];
} else { } else {
dayStr = _dateDayFormat(date, date.getFullYear() !== currentDate.getFullYear()); dayStr = _dateDayFormat(date, date.getFullYear() !== currentDate.getFullYear());
} }
return `${dayStr} ${timeStr}`; return `${dayStr} ${timeStr}`;
} }
//date格式化为年月日
function _dateDayFormat(date, showYear = true) { function _dateDayFormat(date, showYear = true) {
const year = date.getFullYear(); const year = date.getFullYear();
const month = date.getMonth() + 1; const month = date.getMonth() + 1;
const day = date.getDate(); const day = date.getDate();
return showYear ? `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}` : `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`; if (showYear) {
return `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`;
} else {
return `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`;
}
} }
//data格式化为时分
function _dateTimeFormat(date) { function _dateTimeFormat(date) {
const hour = date.getHours(); const hour = date.getHours();
const minute = date.getMinutes(); const minute = date.getMinutes();
return `${_fullZeroToTwo(hour)}:${_fullZeroToTwo(minute)}`; return `${_fullZeroToTwo(hour)}:${_fullZeroToTwo(minute)}`;
} }
//不满2位在前面填充0
function _fullZeroToTwo(str) { function _fullZeroToTwo(str) {
str = str.toString(); str = str.toString();
return str.length === 1 ? '0' + str : str; if (str.length === 1) return '0' + str;
return str;
} }
//驼峰转短横线 //驼峰转短横线
...@@ -216,13 +223,12 @@ export default { ...@@ -216,13 +223,12 @@ export default {
gc, gc,
setRefesrherTime, setRefesrherTime,
getRefesrherFormatTimeByKey, getRefesrherFormatTimeByKey,
arrayIsEqual,
getTouch, getTouch,
getTouchFromZPaging, getTouchFromZPaging,
getParent, getParent,
convertToPx, convertTextToPx,
getTime, getTime,
getInstanceId,
consoleErr, consoleErr,
delay, consoleWarn
wait
}; };
// [z-paging]使用renderjs在app-vue和h5中对touchmove事件冒泡进行处理 // [z-paging]使用renderjs在app-vue和h5中对touchmove事件冒泡进行处理
import u from '../js/z-paging-utils' import u from '../js/z-paging-utils'
const data = { var data = {
renderScrollTop: 0,
renderUsePageScroll: false,
startY: 0, startY: 0,
isTouchFromZPaging: false, isTouchFromZPaging: false
isUsePageScroll: false,
isReachedTop: true,
isIosAndH5: false,
appLaunched: false
} }
export default { export default {
mounted() { mounted() {
if (window) { this._handleTouch();
this._handleTouch();
// #ifdef APP-VUE
this.$ownerInstance.callMethod('_handlePageLaunch');
// #endif
}
}, },
methods: { methods: {
//接收逻辑层发送的数据 //接收逻辑层发送的数据
renderPropIsIosAndH5Change(newVal) { renderPropScrollTopChange(newVal, oldVal, ownerVm, vm) {
if (newVal === -1) return; data.renderScrollTop = newVal;
data.isIosAndH5 = newVal; },
renderPropUsePageScrollChange(newVal, oldVal, ownerVm, vm) {
if(newVal !== -1){
data.renderUsePageScroll = newVal;
}
}, },
//拦截处理touch事件 //拦截处理touch事件
_handleTouch() { _handleTouch() {
if (!window.$zPagingRenderJsInited) { if (window && !window.$zPagingRenderJsInited) {
window.$zPagingRenderJsInited = true; window.$zPagingRenderJsInited = true;
window.addEventListener('touchstart', this._handleTouchstart, { passive: true }) window.addEventListener('touchstart', this._handleTouchstart, {
window.addEventListener('touchmove', this._handleTouchmove, { passive: false }) passive: true
})
window.addEventListener('touchmove', this._handleTouchmove, {
passive: false
})
} }
}, },
_handleTouchstart(e) { _handleTouchstart(e) {
const touch = u.getTouch(e); const touch = u.getTouch(e);
data.startY = touch.touchY; data.startY = touch.touchY;
const touchResult = u.getTouchFromZPaging(e.target); data.isTouchFromZPaging = u.getTouchFromZPaging(e.target);
data.isTouchFromZPaging = touchResult.isFromZp;
data.isUsePageScroll = touchResult.isPageScroll;
data.isReachedTop = touchResult.isReachedTop;
}, },
_handleTouchmove(e) { _handleTouchmove(e) {
const touch = u.getTouch(e); const touch = u.getTouch(e);
const moveY = touch.touchY - data.startY; var moveY = touch.touchY - data.startY;
if (data.isTouchFromZPaging && ((data.isReachedTop && moveY > 0) || (data.isIosAndH5 && !data.isUsePageScroll && moveY < 0))) { //v2.1.4起删除条件:(data.isTouchFromZPaging && data.renderIsIos && !data.renderUsePageScroll && moveY < 0)
if (data.isTouchFromZPaging && data.renderScrollTop < 1 && moveY > 0) {
if (e.cancelable && !e.defaultPrevented) { if (e.cancelable && !e.defaultPrevented) {
e.preventDefault(); e.preventDefault();
} }
} }
}, },
_removeAllEventListener(){
window.removeEventListener('touchstart');
window.removeEventListener('touchmove');
}
} }
}; };
This diff is collapsed.
## 2.6.3(2023-11-30)
1.`新增` `completeByError`方法,支持通过方法传入请求失败原因,`z-paging-error-emit`亦支持相关参数。
2.`修复` 短时间内疯狂下拉&收回列表可能出现的列表无法滚动的问题。
3.`修复` `concat`为false时,无数据显示问题(by wty)。
4.`修复` 使用页面滚动时`scrollIntoViewById``scrollIntoViewByNodeTop`滚动的位置不正确的问题。
5.`修复` `refreshToPage``reload`之前调用时page参数无效的问题。
6.`修复` 滑动切换选项卡+吸顶演示2在安卓中下拉时整个页面被下拉的问题。
7.`修复` 在安卓+APP中使用`swiper-demo`可能出现的`Error: Not Found:Page`报错。
8.`优化` `refreshToPage`+`本地分页`时不进行网络请求,依然进行本地分页。
9.`优化` `completeByNoMore`完全由nomore控制,当传入空数组时,不强制设置为没有更多数据。
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
}
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment