feat: 新增心理论坛功能并优化订单相关文案;更新音视频播放组件版本;
- 新增心理论坛页面及文章详情页 - 更新订单状态文案:"待发货"改为"待发出","待收货"改为"待收到" - 统一修改"收货地址"相关文案为"收件地址" - 添加安卓应用包下载地址配置 - 更新依赖edu-core至v1.0.6版本 - 优化首页课程列表布局和样式 - 新增分享功能到我的页面
This commit is contained in:
@@ -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中使用cell包裹,vue中使用view包裹 -->
|
||||
<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>
|
||||
|
||||
@@ -5,105 +5,118 @@
|
||||
|
||||
<!-- 空数据占位view,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||
<template>
|
||||
<view class="zp-container" :style="[finalEmptyViewStyle]">
|
||||
<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" :style="[emptyViewImgStyle]" :src="emptyImg"></image>
|
||||
<image v-else class="zp-main-image" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg"></image>
|
||||
<text class="zp-main-title" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text>
|
||||
<text v-if="showEmptyViewReload" class="zp-main-error-btn" :style="[emptyViewReloadStyle]"
|
||||
@click="reloadClick">{{emptyViewReloadText}}</text>
|
||||
<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 {
|
||||
base64Empty: zStatic.base64Empty,
|
||||
base64Error: zStatic.base64Error
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//空数据描述文字
|
||||
// 空数据描述文字
|
||||
emptyViewText: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return '没有数据哦~'
|
||||
}
|
||||
default: '没有数据哦~'
|
||||
},
|
||||
//空数据图片
|
||||
// 空数据图片
|
||||
emptyViewImg: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return ''
|
||||
}
|
||||
default: ''
|
||||
},
|
||||
//是否显示空数据图重新加载按钮
|
||||
// 是否显示空数据图重新加载按钮
|
||||
showEmptyViewReload: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false
|
||||
}
|
||||
default: false
|
||||
},
|
||||
//空数据点击重新加载文字
|
||||
// 空数据点击重新加载文字
|
||||
emptyViewReloadText: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return '重新加载'
|
||||
}
|
||||
default: '重新加载'
|
||||
},
|
||||
//是否是加载失败
|
||||
// 是否是加载失败
|
||||
isLoadFailed: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false
|
||||
}
|
||||
default: false
|
||||
},
|
||||
//空数据图样式
|
||||
// 空数据图样式
|
||||
emptyViewStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
//空数据图img样式
|
||||
// 空数据图img样式
|
||||
emptyViewImgStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
//空数据图描述文字样式
|
||||
// 空数据图描述文字样式
|
||||
emptyViewTitleStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
//空数据图重新加载按钮样式
|
||||
// 空数据图重新加载按钮样式
|
||||
emptyViewReloadStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
//空数据图z-index
|
||||
// 空数据图z-index
|
||||
emptyViewZIndex: {
|
||||
type: Number,
|
||||
default: function() {
|
||||
return 9
|
||||
}
|
||||
default: 9
|
||||
},
|
||||
// 空数据图片是否使用fixed布局并铺满z-paging
|
||||
emptyViewFixed: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 空数据图中布局的单位,默认为rpx
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'rpx'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
emptyImg() {
|
||||
if (this.isLoadFailed) {
|
||||
return this.base64Error;
|
||||
} else {
|
||||
return this.base64Empty;
|
||||
}
|
||||
return this.isLoadFailed ? zStatic.base64Error : zStatic.base64Empty;
|
||||
},
|
||||
finalEmptyViewStyle(){
|
||||
this.emptyViewStyle['z-index'] = this.emptyViewZIndex;
|
||||
@@ -111,60 +124,86 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击了reload按钮
|
||||
reloadClick() {
|
||||
this.$emit('reload');
|
||||
},
|
||||
// 点击了空数据view
|
||||
emptyViewClick() {
|
||||
this.$emit('viewClick');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.zp-container {
|
||||
.zp-container{
|
||||
/* #ifndef APP-NVUE */
|
||||
/* position: absolute;
|
||||
top: 0;
|
||||
left: 0; */
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
/* flex: 1; */
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zp-main {
|
||||
.zp-container-fixed {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
margin-top: -150rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
margin-top: -100rpx;
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-main{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50rpx 0rpx;
|
||||
}
|
||||
|
||||
.zp-main-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
.zp-main-image-rpx {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
.zp-main-image-px {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.zp-main-title {
|
||||
font-size: 26rpx;
|
||||
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 {
|
||||
font-size: 26rpx;
|
||||
padding: 8rpx 24rpx;
|
||||
border: solid 1px #dddddd;
|
||||
border-radius: 6rpx;
|
||||
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>
|
||||
|
||||
@@ -6,50 +6,124 @@
|
||||
<!-- 滑动切换选项卡swiper-item,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||
<template>
|
||||
<view class="zp-swiper-item-container">
|
||||
<z-paging ref="paging" :fixed="false" @query="_queryList" @listChange="_updateList" :mounted-auto-call-reload="false"
|
||||
style="height: 100%;">
|
||||
<slot></slot>
|
||||
<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中swiper-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 高度为准进行计算。可选值【dynamic】,即代表高度是动态非固定的,【dynamic】性能低于【fixed】
|
||||
* @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
|
||||
},
|
||||
components: { zPaging },
|
||||
data() {
|
||||
return {
|
||||
firstLoaded: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
//当前组件的index,也就是当前组件是swiper中的第几个
|
||||
// 当前组件的index,也就是当前组件是swiper中的第几个
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: function() {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
//当前swiper切换到第几个index
|
||||
// 当前swiper切换到第几个index
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: function() {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
// 是否使用虚拟列表,默认为否
|
||||
useVirtualList: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否在z-paging内部循环渲染列表(内置列表),默认为否。若use-virtual-list为true,则此项恒为true
|
||||
useInnerList: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 内置列表cell的key名称,仅nvue有效,在nvue中开启use-inner-list时必须填此项
|
||||
cellKeyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// innerList样式
|
||||
innerListStyle: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 预加载的列表可视范围(列表高度)页数,默认为12,即预加载当前页及上下各12页的cell。此数值越大,则虚拟列表中加载的dom越多,内存消耗越大(会维持在一个稳定值),但增加预加载页面数量可缓解快速滚动短暂白屏问题
|
||||
preloadPage: {
|
||||
type: [Number, String],
|
||||
default: 12
|
||||
},
|
||||
// 虚拟列表cell高度模式,默认为fixed,也就是每个cell高度完全相同,将以第一个cell高度为准进行计算。可选值【dynamic】,即代表高度是动态非固定的,【dynamic】性能低于【fixed】。
|
||||
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) {
|
||||
//懒加载,当滑动到当前的item时,才去加载
|
||||
// 懒加载,当滑动到当前的item时,才去加载
|
||||
if (!this.firstLoaded) {
|
||||
setTimeout(() => {
|
||||
this.$refs.paging.reload();
|
||||
}, 5);
|
||||
this.$nextTick(()=>{
|
||||
let delay = 5;
|
||||
// #ifdef MP-TOUTIAO
|
||||
delay = 100;
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
this.$refs.paging.reload().catch(() => {});
|
||||
}, delay);
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -58,14 +132,14 @@
|
||||
},
|
||||
methods: {
|
||||
reload(data) {
|
||||
this.$refs.paging.reload(data);
|
||||
return this.$refs.paging.reload(data);
|
||||
},
|
||||
complete(data) {
|
||||
this.firstLoaded = true;
|
||||
this.$refs.paging.complete(data);
|
||||
return this.$refs.paging.complete(data);
|
||||
},
|
||||
_queryList(pageNo, pageSize) {
|
||||
this.$emit('query', pageNo, pageSize);
|
||||
_queryList(pageNo, pageSize, from) {
|
||||
this.$emit('query', pageNo, pageSize, from);
|
||||
},
|
||||
_updateList(list) {
|
||||
this.$emit('updateList', list);
|
||||
|
||||
@@ -3,79 +3,108 @@
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群:790460711 -->
|
||||
|
||||
<!-- 滑动切换选项卡swiper,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||
<!-- 滑动切换选项卡swiper容器,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||
<template>
|
||||
<view :class="fixed?'zp-swiper-container zp-swiper-container-fixed':'zp-swiper-container'" :style="[swiperStyle]">
|
||||
<slot v-if="$slots.top" name="top"></slot>
|
||||
<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 class="zp-swiper">
|
||||
<slot/></slot>
|
||||
<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="$slots.bottom" name="bottom"></slot>
|
||||
<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 {
|
||||
systemInfo: null
|
||||
swiperContentStyle: {}
|
||||
};
|
||||
},
|
||||
props: {
|
||||
//是否使用fixed布局,默认为是
|
||||
// 是否使用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 = uni.getSystemInfoSync();
|
||||
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: {
|
||||
swiperStyle() {
|
||||
if (!this.systemInfo) {
|
||||
return {};
|
||||
}
|
||||
let swiperStyle = {};
|
||||
const windowTop = this.systemInfo.windowTop;
|
||||
finalSwiperStyle() {
|
||||
const swiperStyle = { ...this.swiperStyle };
|
||||
if (!this.systemInfo) return swiperStyle;
|
||||
const windowTop = this.windowTop;
|
||||
const windowBottom = this.systemInfo.windowBottom;
|
||||
if (this.fixed) {
|
||||
if (windowTop && windowTop !== undefined) {
|
||||
if (windowTop && !swiperStyle.top) {
|
||||
swiperStyle.top = windowTop + 'px';
|
||||
}
|
||||
let bottom = 0;
|
||||
if (windowBottom && windowBottom !== undefined) {
|
||||
bottom = windowBottom;
|
||||
if (!swiperStyle.bottom) {
|
||||
let bottom = windowBottom || 0;
|
||||
bottom += this.safeAreaInsetBottom ? this.safeAreaBottom : 0;
|
||||
if (bottom > 0) {
|
||||
swiperStyle.bottom = bottom + 'px';
|
||||
}
|
||||
}
|
||||
if (this.safeAreaInsetBottom) {
|
||||
bottom += this.safeAreaBottom;
|
||||
}
|
||||
swiperStyle.bottom = bottom + 'px';
|
||||
}
|
||||
return swiperStyle;
|
||||
},
|
||||
safeAreaBottom() {
|
||||
if (!this.systemInfo) {
|
||||
return 0;
|
||||
}
|
||||
let safeAreaBottom = 0;
|
||||
// #ifdef MP-WEIXIN
|
||||
safeAreaBottom = this.systemInfo.screenHeight - this.systemInfo.safeArea.bottom;
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || H5
|
||||
safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0;
|
||||
// #endif
|
||||
return Math.abs(safeAreaBottom);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更新slot="left"和slot="right"宽度,当slot="left"或slot="right"宽度动态改变时调用
|
||||
updateLeftAndRightWidth() {
|
||||
if (!this.isOldWebView) return;
|
||||
this.$nextTick(() => this._updateLeftAndRightWidth(this.swiperContentStyle, 'zp-swiper'));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -101,22 +130,43 @@
|
||||
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;
|
||||
left: 0;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
width: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
@@ -1,69 +1,84 @@
|
||||
<!-- z-paging -->
|
||||
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群:790460711 -->
|
||||
|
||||
<!-- 上拉加载更多view -->
|
||||
<!-- [z-paging]上拉加载更多view -->
|
||||
<template>
|
||||
<view class="zp-load-more-container" :style="[zConfig.loadingMoreCustomStyle]">
|
||||
<text
|
||||
:class="zConfig.defaultThemeStyle==='white'?'zp-loading-more-line zp-loading-more-line-white':'zp-loading-more-line zp-loading-more-line-black'"
|
||||
:style="[zConfig.loadingMoreNoMoreLineCustomStyle]"
|
||||
v-if="zConfig.showLoadingMoreNoMoreLine&&zConfig.loadingStatus===2"></text>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<image v-if="zConfig.loadingStatus===1&&zConfig.loadingMoreLoadingIconCustomImage.length"
|
||||
:src="zConfig.loadingMoreLoadingIconCustomImage" :class="{'zp-loading-more-line-loading-custom-image':true,'zp-loading-more-line-loading-custom-image-animated':zConfig.loadingMoreLoadingAnimated}">
|
||||
</image>
|
||||
<image
|
||||
v-if="zConfig.loadingStatus===1&&zConfig.loadingMoreLoadingIconType==='flower'&&!zConfig.loadingMoreLoadingIconCustomImage.length"
|
||||
class="zp-loading-more-line-loading-image" :style="[zConfig.loadingMoreLoadingIconCustomStyle]"
|
||||
:src="zConfig.defaultThemeStyle==='white'?base64FlowerWhite:base64Flower">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view>
|
||||
<loading-indicator v-if="zConfig.loadingStatus===1"
|
||||
:style="[{color:zConfig.defaultThemeStyle==='white'?'white':'#777777'}]" :animating="true"
|
||||
class="zp-loading-more-line-loading-image">
|
||||
</loading-indicator>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<text
|
||||
v-if="zConfig.loadingStatus===1&&zConfig.loadingMoreLoadingIconType==='circle'&&!zConfig.loadingMoreLoadingIconCustomImage.length"
|
||||
:class="zConfig.defaultThemeStyle==='white'?'zp-loading-more-line-loading-view zp-loading-more-line-loading-view-white':'zp-loading-more-line-loading-view zp-loading-more-line-loading-view-black'"
|
||||
:style="[zConfig.loadingMoreLoadingIconCustomStyle]"></text>
|
||||
<text
|
||||
:class="zConfig.defaultThemeStyle==='white'?'zp-loading-more-text zp-loading-more-text-white':'zp-loading-more-text zp-loading-more-text-black'">{{ownLoadingMoreText}}</text>
|
||||
<text
|
||||
:class="zConfig.defaultThemeStyle==='white'?'zp-loading-more-line zp-loading-more-line-white':'zp-loading-more-line zp-loading-more-line-black'"
|
||||
:style="[zConfig.loadingMoreNoMoreLineCustomStyle]"
|
||||
v-if="zConfig.showLoadingMoreNoMoreLine&&zConfig.loadingStatus===2"></text>
|
||||
<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 -->
|
||||
<!-- 在nvue中底部加载更多loading使用系统自带的 -->
|
||||
<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 {
|
||||
base64Arrow: zStatic.base64Arrow,
|
||||
base64Flower: zStatic.base64Flower,
|
||||
base64FlowerWhite: zStatic.base64FlowerWhite,
|
||||
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: {
|
||||
ownLoadingMoreText() {
|
||||
const loadingMoreText = this.loadingStatusTextMap[this.zConfig.loadingStatus];
|
||||
return loadingMoreText;
|
||||
ts() {
|
||||
return this.c.defaultThemeStyle;
|
||||
},
|
||||
loadingStatusTextMap() {
|
||||
// 底部加载更多配置
|
||||
c() {
|
||||
return this.zConfig || {};
|
||||
},
|
||||
// 底部加载更多文字
|
||||
ownLoadingMoreText() {
|
||||
return {
|
||||
0: this.zConfig.loadingMoreDefaultText,
|
||||
1: this.zConfig.loadingMoreLoadingText,
|
||||
2: this.zConfig.loadingMoreNoMoreText,
|
||||
3: this.zConfig.loadingMoreFailText,
|
||||
}
|
||||
[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');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -72,9 +87,7 @@
|
||||
<style scoped>
|
||||
@import "../css/z-paging-static.css";
|
||||
|
||||
.zp-load-more-container {
|
||||
height: 80rpx;
|
||||
font-size: 27rpx;
|
||||
.zp-l-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
clear: both;
|
||||
display: flex;
|
||||
@@ -83,79 +96,87 @@
|
||||
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-loading-more-line-loading-custom-image {
|
||||
.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-loading-more-line-loading-custom-image-animated{
|
||||
.zp-l-line-loading-custom-image-animated{
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: loading-circle 1s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-view {
|
||||
margin-right: 8rpx;
|
||||
width: 22rpx;
|
||||
height: 23rpx;
|
||||
.zp-l-circle-loading-view {
|
||||
border: 3rpx solid #dddddd;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: loading-circle 1s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-view-black {
|
||||
border-color: #c8c8c8;
|
||||
border-top-color: #444444;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-view-white {
|
||||
border-color: #aaaaaa;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
|
||||
.zp-loading-more-text {
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 30rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-loading-more-text-black {
|
||||
color: #a4a4a4;
|
||||
.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-loading-more-text-white {
|
||||
color: #efefef;
|
||||
.zp-l-text-rpx {
|
||||
font-size: 30rpx;
|
||||
margin: 0rpx 6rpx;
|
||||
}
|
||||
.zp-l-text-px {
|
||||
font-size: 15px;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.zp-loading-more-line {
|
||||
.zp-l-line-rpx {
|
||||
height: 1px;
|
||||
width: 100rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-black {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-white {
|
||||
background-color: #efefef;
|
||||
.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>
|
||||
|
||||
@@ -1,133 +1,132 @@
|
||||
<!-- z-paging -->
|
||||
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群:790460711 -->
|
||||
|
||||
<!-- 下拉刷新view -->
|
||||
<!-- [z-paging]下拉刷新view -->
|
||||
<template>
|
||||
<view style="height: 100%;">
|
||||
<view
|
||||
:class="['zp-custom-refresher-container',{'zp-custom-refresher-container-padding':showRefresherUpdateTime}]"
|
||||
style="height: 100%;">
|
||||
<view class="zp-custom-refresher-left">
|
||||
<image v-if="refresherStatus!==2" :class="refresherLeftImageClass"
|
||||
:style="[{width: showRefresherUpdateTime?'36rpx':'30rpx',height: showRefresherUpdateTime?'36rpx':'30rpx','margin-right': showRefresherUpdateTime?'20rpx':'8rpx'}]"
|
||||
:src="defaultThemeStyle==='white'?base64ArrowWhite:base64Arrow">
|
||||
</image>
|
||||
<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-loading-more-line-loading-image zp-custom-refresher-left-image"
|
||||
:style="[{width: showRefresherUpdateTime?'36rpx':'30rpx',height: showRefresherUpdateTime?'36rpx':'30rpx','margin-right': showRefresherUpdateTime?'20rpx':'8rpx'}]"
|
||||
:src="defaultThemeStyle==='white'?base64FlowerWhite:base64Flower">
|
||||
</image>
|
||||
<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 -->
|
||||
<!-- 在nvue中,加载状态loading使用系统loading -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view v-else :style="[{'margin-right':showRefresherUpdateTime?'18rpx':'12rpx'}]">
|
||||
<loading-indicator
|
||||
:class="systemInfo.platform==='ios'?'zp-loading-image-ios':'zp-loading-image-android'"
|
||||
:style="[{color:defaultThemeStyle==='white'?'white':'#777777'}]" :animating="true">
|
||||
</loading-indicator>
|
||||
<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-custom-refresher-right">
|
||||
<text class="zp-custom-refresher-right-text"
|
||||
:style="[refresherRightTextStyle]">{{refresherStatusTextMap[refresherStatus]||refresherDefaultText}}
|
||||
</text>
|
||||
<text class="zp-custom-refresher-right-text zp-custom-refresher-right-time-text"
|
||||
:style="[refresherRightTextStyle]"
|
||||
v-if="showRefresherUpdateTime&&refresherTimeText.length">{{refresherTimeText}}
|
||||
<!-- 右侧文字内容 -->
|
||||
<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>
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
import zStatic from '../js/z-paging-static'
|
||||
import {
|
||||
getRefesrherFormatTimeByKey
|
||||
} from '../js/z-paging-utils'
|
||||
import u from '../js/z-paging-utils'
|
||||
import Enum from '../js/z-paging-enum'
|
||||
|
||||
export default {
|
||||
name: 'z-paging-refresh',
|
||||
data() {
|
||||
return {
|
||||
systemInfo: systemInfo,
|
||||
base64Arrow: zStatic.base64Arrow,
|
||||
base64ArrowWhite: zStatic.base64ArrowWhite,
|
||||
base64Flower: zStatic.base64Flower,
|
||||
base64FlowerWhite: zStatic.base64FlowerWhite,
|
||||
R: Enum.Refresher,
|
||||
refresherTimeText: '',
|
||||
isRefresherLeftImageClassLoaded: false
|
||||
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: {
|
||||
'refresherStatus': {
|
||||
default: 0
|
||||
},
|
||||
'defaultThemeStyle': {},
|
||||
'refresherDefaultText': {},
|
||||
'refresherPullingText': {},
|
||||
'refresherPullingText': {},
|
||||
'refresherRefreshingText': {},
|
||||
'showRefresherUpdateTime': {
|
||||
default: false
|
||||
},
|
||||
'refresherUpdateTimeKey': {}
|
||||
},
|
||||
props: ['status', 'defaultThemeStyle', 'defaultText', 'pullingText', 'refreshingText', 'completeText', 'goF2Text', 'defaultImg', 'pullingImg',
|
||||
'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap', 'unit', 'isIos'
|
||||
],
|
||||
computed: {
|
||||
refresherStatusTextMap() {
|
||||
this.updateTime(this.refresherUpdateTimeKey);
|
||||
ts() {
|
||||
return this.defaultThemeStyle;
|
||||
},
|
||||
// 当前状态Map
|
||||
statusTextMap() {
|
||||
this.updateTime();
|
||||
const { R, defaultText, pullingText, refreshingText, completeText, goF2Text } = this;
|
||||
return {
|
||||
0: this.refresherDefaultText,
|
||||
1: this.refresherPullingText,
|
||||
2: this.refresherRefreshingText
|
||||
[R.Default]: defaultText,
|
||||
[R.ReleaseToRefresh]: pullingText,
|
||||
[R.Loading]: refreshingText,
|
||||
[R.Complete]: completeText,
|
||||
[R.GoF2]: goF2Text,
|
||||
};
|
||||
},
|
||||
refresherLeftImageClass() {
|
||||
let refresherLeftImageClass = '';
|
||||
if (this.refresherStatus === 0) {
|
||||
if (this.isRefresherLeftImageClassLoaded) {
|
||||
refresherLeftImageClass = 'zp-custom-refresher-left-image zp-custom-refresher-arrow-down';
|
||||
} else {
|
||||
this.isRefresherLeftImageClassLoaded = true;
|
||||
refresherLeftImageClass =
|
||||
'zp-custom-refresher-left-image zp-custom-refresher-arrow-down-no-duration';
|
||||
}
|
||||
} else {
|
||||
refresherLeftImageClass = 'zp-custom-refresher-left-image zp-custom-refresher-arrow-top';
|
||||
}
|
||||
return refresherLeftImageClass;
|
||||
// 当前状态文字
|
||||
currentTitle() {
|
||||
return this.statusTextMap[this.status] || this.defaultText;
|
||||
},
|
||||
refresherRightTextStyle() {
|
||||
let refresherRightTextStyle = {};
|
||||
let color = '#555555';
|
||||
if (this.defaultThemeStyle === 'white') {
|
||||
color = '#efefef';
|
||||
// 左侧图片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
|
||||
if (this.showRefresherUpdateTime) {
|
||||
refresherRightTextStyle = {
|
||||
'height': '40rpx',
|
||||
'line-height': '40rpx'
|
||||
};
|
||||
} else {
|
||||
refresherRightTextStyle = {
|
||||
'height': '80rpx',
|
||||
'line-height': '80rpx'
|
||||
};
|
||||
}
|
||||
const textHeight = this.showUpdateTime ? u.addUnit(40, this.unit) : u.addUnit(80, this.unit);
|
||||
stl = {'height': textHeight, 'line-height': textHeight}
|
||||
// #endif
|
||||
refresherRightTextStyle['color'] = color;
|
||||
return refresherRightTextStyle;
|
||||
stl['color'] = this.zTheme.title[this.ts];
|
||||
stl['font-size'] = u.addUnit(30, this.unit);
|
||||
return stl;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateTime(refresherUpdateTimeKey) {
|
||||
if (!refresherUpdateTimeKey) {
|
||||
refresherUpdateTimeKey = this.refresherUpdateTimeKey;
|
||||
}
|
||||
if (this.showRefresherUpdateTime) {
|
||||
this.refresherTimeText = getRefesrherFormatTimeByKey(refresherUpdateTimeKey);
|
||||
// 添加单位
|
||||
addUnit(value, unit) {
|
||||
return u.addUnit(value, unit);
|
||||
},
|
||||
// 更新下拉刷新时间
|
||||
updateTime() {
|
||||
if (this.showUpdateTime) {
|
||||
this.refresherTimeText = u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -137,83 +136,65 @@
|
||||
<style scoped>
|
||||
@import "../css/z-paging-static.css";
|
||||
|
||||
.zp-custom-refresher-container {
|
||||
.zp-r-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-container-padding {
|
||||
.zp-r-container-padding {
|
||||
/* #ifdef APP-NVUE */
|
||||
padding: 15rpx 0rpx;
|
||||
padding: 7px 0rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-left {
|
||||
.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-custom-refresher-left-image {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: rotate(180deg);
|
||||
margin-top: 2rpx;
|
||||
/* #endif */
|
||||
/* #ifdef MP-ALIPAY */
|
||||
margin-top: 0rpx;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.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-custom-refresher-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 */
|
||||
.zp-r-arrow-top {
|
||||
transform: rotate(0deg);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-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 */
|
||||
.zp-r-arrow-down {
|
||||
transform: rotate(180deg);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-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-custom-refresher-right {
|
||||
font-size: 27rpx;
|
||||
.zp-r-right {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
@@ -222,38 +203,12 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-right-text {
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 28rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-right-time-text {
|
||||
.zp-r-right-time-text-rpx {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
.zp-r-right-time-text-px {
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
3
uni_modules/z-paging/components/z-paging/config/index.js
Normal file
3
uni_modules/z-paging/components/z-paging/config/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
// z-paging全局配置文件,注意避免更新时此文件被覆盖,若被覆盖,可在此文件中右键->点击本地历史记录,找回覆盖前的配置
|
||||
|
||||
export default {}
|
||||
@@ -1,20 +1,22 @@
|
||||
/* z-paging
|
||||
github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
反馈QQ群:790460711
|
||||
*/
|
||||
/* [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 */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.z-paging-content-fixed {
|
||||
.z-paging-content-fixed, .zp-loading-fixed {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
height: auto;
|
||||
@@ -26,8 +28,15 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.zp-page-scroll-top,
|
||||
.zp-page-scroll-bottom {
|
||||
.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 */
|
||||
@@ -37,18 +46,43 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.zp-page-left, .zp-page-right {
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.zp-scroll-view-super {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-container {
|
||||
overflow: hidden;
|
||||
.zp-view-super {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.zp-scroll-view {
|
||||
.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 {
|
||||
@@ -57,6 +91,16 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
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%;
|
||||
@@ -82,20 +126,10 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
.zp-paging-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zp-chat-record-loading-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 750rpx;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.zp-chat-record-loading-custom-image {
|
||||
@@ -106,25 +140,43 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-container {
|
||||
.zp-page-bottom-keyboard-placeholder-animate {
|
||||
transition-property: height;
|
||||
transition-duration: 0.15s;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
will-change: height;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-refresh {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zp-back-to-top {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
right: 25rpx;
|
||||
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;
|
||||
@@ -145,6 +197,10 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.zp-back-to-top-img-inversion {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.zp-empty-view {
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 100%;
|
||||
@@ -152,6 +208,25 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
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 {
|
||||
/* #ifndef APP-PLUS */
|
||||
height: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-n-refresh-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
@@ -159,3 +234,11 @@ dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
justify-content: center;
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.zp-n-list-container{
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -1,38 +1,50 @@
|
||||
/* z-paging
|
||||
github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
反馈QQ群:790460711
|
||||
/* [z-paging]公用的静态css资源 */
|
||||
|
||||
公用的静态css资源 */
|
||||
|
||||
.zp-loading-more-line-loading-image {
|
||||
margin-right: 8rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
.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{
|
||||
.zp-loading-image-ios-rpx {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.zp-loading-image-ios-px {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.zp-loading-image-android{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
.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 */
|
||||
|
||||
|
||||
23
uni_modules/z-paging/components/z-paging/i18n/en.json
Normal file
23
uni_modules/z-paging/components/z-paging/i18n/en.json
Normal file
@@ -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..."
|
||||
}
|
||||
8
uni_modules/z-paging/components/z-paging/i18n/index.js
Normal file
8
uni_modules/z-paging/components/z-paging/i18n/index.js
Normal file
@@ -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
|
||||
}
|
||||
23
uni_modules/z-paging/components/z-paging/i18n/zh-Hans.json
Normal file
23
uni_modules/z-paging/components/z-paging/i18n/zh-Hans.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"zp.refresher.default": "继续下拉刷新",
|
||||
"zp.refresher.pulling": "松开立即刷新",
|
||||
"zp.refresher.refreshing": "正在刷新...",
|
||||
"zp.refresher.complete": "刷新成功",
|
||||
"zp.refresher.f2": "松手进入二楼",
|
||||
|
||||
"zp.loadingMore.default": "点击加载更多",
|
||||
"zp.loadingMore.loading": "正在加载...",
|
||||
"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": "加载中..."
|
||||
}
|
||||
23
uni_modules/z-paging/components/z-paging/i18n/zh-Hant.json
Normal file
23
uni_modules/z-paging/components/z-paging/i18n/zh-Hant.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"zp.refresher.default": "繼續下拉重繪",
|
||||
"zp.refresher.pulling": "鬆開立即重繪",
|
||||
"zp.refresher.refreshing": "正在重繪...",
|
||||
"zp.refresher.complete": "重繪成功",
|
||||
"zp.refresher.f2": "鬆手進入二樓",
|
||||
|
||||
"zp.loadingMore.default": "點擊加載更多",
|
||||
"zp.loadingMore.loading": "正在加載...",
|
||||
"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": "加載中..."
|
||||
}
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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')
|
||||
},
|
||||
// 点击返回顶部按钮的自定义图片地址,默认使用z-paging内置的图片
|
||||
backToTopImg: {
|
||||
type: String,
|
||||
default: u.gc('backToTopImg', '')
|
||||
},
|
||||
// 点击返回顶部按钮返回到顶部时是否展示过渡动画,默认为是
|
||||
backToTopWithAnimate: {
|
||||
type: Boolean,
|
||||
default: u.gc('backToTopWithAnimate', true)
|
||||
},
|
||||
// 点击返回顶部按钮与底部的距离,注意添加单位px或rpx,默认为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 {
|
||||
// 点击返回顶部的class
|
||||
backToTopClass: 'zp-back-to-top zp-back-to-top-hide',
|
||||
// 上次点击返回顶部的时间
|
||||
lastBackToTopShowTime: 0,
|
||||
// 点击返回顶部显示的class是否在展示中,使得按钮展示/隐藏过度效果更自然
|
||||
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) {
|
||||
// 记录当前点击返回顶部按钮显示的class生效了
|
||||
this.showBackToTopClass = true;
|
||||
this.lastBackToTopShowTime = new Date().getTime();
|
||||
// 当滚动到需要展示返回顶部的阈值内,则延迟300毫秒展示返回到顶部按钮
|
||||
u.delay(() => {
|
||||
this.backToTopClass = 'zp-back-to-top zp-back-to-top-show';
|
||||
}, 300)
|
||||
}
|
||||
} else {
|
||||
// 如果当前点击返回顶部按钮显示的class是生效状态并且滚动小于触发阈值,则隐藏返回顶部按钮
|
||||
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)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
// [z-paging]聊天记录模式模块
|
||||
import u from '.././z-paging-utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// 使用聊天记录模式,默认为否
|
||||
useChatRecordMode: {
|
||||
type: Boolean,
|
||||
default: u.gc('useChatRecordMode', false)
|
||||
},
|
||||
// 使用聊天记录模式时滚动到顶部后,列表垂直移动偏移距离。默认0rpx。单位px(暂时无效)
|
||||
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。单位px
|
||||
chatAdjustPositionOffset: {
|
||||
type: [Number, String],
|
||||
default: u.gc('chatAdjustPositionOffset', '0rpx')
|
||||
},
|
||||
// 使用聊天记录模式中键盘弹出时是否自动滚动到底部,默认为否
|
||||
autoToBottomWhenChat: {
|
||||
type: Boolean,
|
||||
default: u.gc('autoToBottomWhenChat', false)
|
||||
},
|
||||
// 使用聊天记录模式中reload时是否显示chatLoading,默认为否
|
||||
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度style
|
||||
chatRecordRotateStyle() {
|
||||
let cellStyle;
|
||||
// 在vue中,直接将列表倒置,因此在vue的cell中,也直接写style="transform: scaleY(-1)"转回来即可。
|
||||
// #ifndef APP-NVUE
|
||||
cellStyle = this.useChatRecordMode ? { transform: 'scaleY(-1)' } : {};
|
||||
// #endif
|
||||
|
||||
// 在nvue中,需要考虑数据量不满一页的情况,因为nvue中的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(() => {
|
||||
// 这里多次触发滚动到底部是为了避免在某些情况下,即使是在nextTick但是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() {
|
||||
this.addKeyboardHeightChangeListener();
|
||||
},
|
||||
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');
|
||||
},
|
||||
// 手动添加键盘高度变化监听
|
||||
addKeyboardHeightChangeListener() {
|
||||
// 监听键盘高度变化(H5、百度小程序、抖音小程序、飞书小程序不支持)
|
||||
// #ifndef H5 || MP-BAIDU || MP-TOUTIAO
|
||||
if (this.useChatRecordMode) {
|
||||
uni.onKeyboardHeightChange(this._handleKeyboardHeightChange);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// 处理键盘高度变化
|
||||
_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);
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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中隐藏系统导航栏后windowTop获取不正确的问题,具体bug详见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模式下z-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可能是true、false,也可能是具体的dom节点
|
||||
如果inDom不为false,则使用uni.createSelectorQuery().in()进行查询,如果inDom为true,则in中的是this,否则in中的为具体的dom
|
||||
如果inDom为false,则使用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"和slot="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设置的底部安全区域占位view高度设置bottom距离(直接通过systemInfo在部分平台上无法获取到底部安全区域)
|
||||
_getCssSafeAreaInsetBottom(success) {
|
||||
this._getNodeClientRect('.zp-safe-area-inset-bottom').then(res => {
|
||||
this.cssSafeAreaInsetBottom = res ? res[0].height : -1;
|
||||
res && success && success();
|
||||
});
|
||||
},
|
||||
// 同步获取系统信息,兼容不同平台(供z-paging-swiper使用)
|
||||
_getSystemInfoSync(useCache = false) {
|
||||
return u.getSystemInfoSync(useCache);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,746 @@
|
||||
// [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;
|
||||
},
|
||||
},
|
||||
// 自定义pageSize,默认为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,并在complete中传递相同key,若二者不一致,则complete将不会生效
|
||||
dataKey: {
|
||||
type: [Number, String, Object],
|
||||
default: u.gc('dataKey', null),
|
||||
},
|
||||
// 使用缓存,若开启将自动缓存第一页的数据,默认为否。请注意,因考虑到切换tab时不同tab数据不同的情况,默认仅会缓存组件首次加载时第一次请求到的数据,后续的下拉刷新操作不会更新缓存。
|
||||
useCache: {
|
||||
type: Boolean,
|
||||
default: u.gc('useCache', false)
|
||||
},
|
||||
// 使用缓存时缓存的key,用于区分不同列表的缓存数据,useCache为true时必须设置,否则缓存无效
|
||||
cacheKey: {
|
||||
type: String,
|
||||
default: u.gc('cacheKey', null)
|
||||
},
|
||||
// 缓存模式,默认仅会缓存组件首次加载时第一次请求到的数据,可设置为always,即代表总是缓存,每次列表刷新(下拉刷新、调用reload等)都会更新缓存
|
||||
cacheMode: {
|
||||
type: String,
|
||||
default: u.gc('cacheMode', Enum.CacheMode.Default)
|
||||
},
|
||||
// 自动注入的list名,可自动修改父view(包含ref="paging")中对应name的list值
|
||||
autowireListName: {
|
||||
type: String,
|
||||
default: u.gc('autowireListName', '')
|
||||
},
|
||||
// 自动注入的query名,可自动调用父view(包含ref="paging")中的query方法
|
||||
autowireQueryName: {
|
||||
type: String,
|
||||
default: u.gc('autowireQueryName', '')
|
||||
},
|
||||
// 获取分页数据Function,功能与@query类似。若设置了fetch则@query将不再触发
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
// fetch的附加参数,fetch配置后有效
|
||||
fetchParams: {
|
||||
type: Object,
|
||||
default: u.gc('fetchParams', null)
|
||||
},
|
||||
// z-paging mounted后自动调用reload方法(mounted后自动调用接口),默认为是
|
||||
auto: {
|
||||
type: Boolean,
|
||||
default: u.gc('auto', true)
|
||||
},
|
||||
// 用户下拉刷新时是否触发reload方法,默认为是
|
||||
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)
|
||||
},
|
||||
// 列表刷新时自动显示下拉刷新view,默认为否
|
||||
showRefresherWhenReload: {
|
||||
type: Boolean,
|
||||
default: u.gc('showRefresherWhenReload', false)
|
||||
},
|
||||
// 列表刷新时自动显示加载更多view,且为加载中状态,默认为否
|
||||
showLoadingMoreWhenReload: {
|
||||
type: Boolean,
|
||||
default: u.gc('showLoadingMoreWhenReload', false)
|
||||
},
|
||||
// 组件created时立即触发reload(可解决一些情况下先看到页面再看到loading的问题),auto为true时有效。为否时将在mounted+nextTick后触发reload,默认为否
|
||||
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)
|
||||
},
|
||||
// 父组件v-model所绑定的list的值
|
||||
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,
|
||||
addDataFromTopBufferedInsert: u.useBufferedInsert(this._addDataFromTop)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageSize() {
|
||||
return this.defaultPageSize;
|
||||
},
|
||||
finalConcat() {
|
||||
return this.concat && this.privateConcat;
|
||||
},
|
||||
finalUseCache() {
|
||||
if (this.useCache && !this.cacheKey) {
|
||||
u.consoleErr('use-cache为true时,必须设置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) {
|
||||
// 触发totalData改变事件时是否触发emit列表更新事件,如果是从缓存中设置则必须触发,否则根据totalDataChangeThrow的规则判断
|
||||
const eventThrow = this.isSettingCacheList ? true : this.totalDataChangeThrow;
|
||||
this._totalDataChange(newVal, oldVal, eventThrow);
|
||||
this.totalDataChangeThrow = true;
|
||||
},
|
||||
currentData(newVal, oldVal) {
|
||||
this._currentDataChange(newVal, oldVal);
|
||||
},
|
||||
useChatRecordMode(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.nLoadingMoreFixedHeight = false;
|
||||
}
|
||||
},
|
||||
value: {
|
||||
handler(newVal) {
|
||||
// 当v-model绑定的数据源被更改时,此时数据源改变不emit input事件,避免循环调用
|
||||
if (newVal !== this.totalData) {
|
||||
this.totalDataChangeThrow = false;
|
||||
this.totalData = newVal;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
handler(newVal) {
|
||||
// 当v-model绑定的数据源被更改时,此时数据源改变不emit 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处理,第一个参数为请求结果数组,第二个参数为dataKey,需与: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处理,第一个参数为请求结果数组,第二个参数为total(列表总数),第三个参数为是否成功(默认为是)
|
||||
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;
|
||||
// 仅截取total内部分的数据
|
||||
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);
|
||||
},
|
||||
// 与上方complete方法功能一致,新版本中设置服务端回调数组请使用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 };
|
||||
});
|
||||
},
|
||||
// 从顶部添加数据,不会影响分页的pageNo和pageSize
|
||||
addDataFromTop(data, toTop = true, toTopWithAnimate = true) {
|
||||
// 如果使用了虚拟列表,则需要对短时间内的大量数据进行整合然后一次性添加,避免设置虚拟列表cellIndex时候key冲突的问题,否则正常调用
|
||||
(this.finalUseVirtualList ? this.addDataFromTopBufferedInsert : this._addDataFromTop)(
|
||||
data, toTop, toTopWithAnimate
|
||||
);
|
||||
},
|
||||
// 重新设置列表数据,调用此方法不会影响pageNo和pageSize,也不会触发请求。适用场景:当需要删除列表中某一项时,将删除对应项后的数组通过此方法传递给z-paging。(当出现类似的需要修改列表数组的场景时,请使用此方法,请勿直接修改page中: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 };
|
||||
});
|
||||
},
|
||||
// 重新加载分页数据,pageNo会恢复为默认值,相当于下拉刷新的效果(animate为true时会展示下拉刷新动画,默认为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 };
|
||||
});
|
||||
},
|
||||
// 刷新列表数据,pageNo和pageSize不会重置,列表数据会重新从服务端获取。必须保证@query绑定的方法中的pageNo和pageSize和传给服务端的一致
|
||||
refresh() {
|
||||
return this._handleRefreshWithDisPageNo(this.pageNo - this.defaultPageNo + 1);
|
||||
},
|
||||
// 刷新列表数据至指定页,例如pageNo=5时则代表刷新列表至第5页,此时pageNo会变为5,列表会展示前5页的数据。必须保证@query绑定的方法中的pageNo和pageSize和传给服务端的一致
|
||||
refreshToPage(pageNo) {
|
||||
this.isHandlingRefreshToPage = true;
|
||||
return this._handleRefreshWithDisPageNo(pageNo + this.defaultPageNo - 1);
|
||||
},
|
||||
// 手动更新列表缓存数据,将自动截取v-model绑定的list中的前pageSize条覆盖缓存,请确保在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"高度失败,则不触发reload,直到获取slot="refresher"高度成功
|
||||
if (this.customRefresherHeight === -1 && showRefresher) {
|
||||
u.delay(() => {
|
||||
retryCount ++;
|
||||
// 如果重试次数是10的倍数(也就是每500毫秒),尝试重新获取一下slot="refresher"高度
|
||||
// 此举是为了解决在某些特殊情况下,z-paging组件mounted了,但是未展示在用户面前,(比如在tabbar页面中,未切换到对应tabbar但是通过代码让z-paging展示了,此时控制台会报Error: Not Found:Page,因为这时候去获取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) {
|
||||
// 如果当前是本地分页,则必然是由setLocalPaging方法触发,此时直接本地加载第一页数据即可。后续本地分页加载更多方法由滚动到底部加载更多事件处理
|
||||
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 {
|
||||
// 如果当前不是本地分页,则按照正常分页逻辑进行数据处理&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
|
||||
// 在nvue中延时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代表交由z-paging自行判断;1代表没有更多了;0代表还有更多数据
|
||||
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];
|
||||
// 此处是为了解决在微信小程序中,在某些情况下滚动到底部加载更多后滚动位置直接变为最底部的问题,因此需要通过代码强制滚动回加载更多前的位置
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!this.isIos && !this.isOnly && !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)
|
||||
},
|
||||
// 从顶部添加数据,不会影响分页的pageNo和pageSize
|
||||
_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));
|
||||
}
|
||||
},
|
||||
// 存储列表缓存数据
|
||||
_saveLocalCache(data) {
|
||||
uni.setStorageSync(this.finalCacheKey, data);
|
||||
},
|
||||
// 通过缓存数据填充列表数据
|
||||
_setListByLocalCache() {
|
||||
this.totalData = uni.getStorageSync(this.finalCacheKey) || [];
|
||||
this.isSettingCacheList = true;
|
||||
},
|
||||
// 修改父view的list
|
||||
_callMyParentList(newVal) {
|
||||
if (this.autowireListName.length) {
|
||||
const myParent = u.getParent(this.$parent);
|
||||
if (myParent && myParent[this.autowireListName]) {
|
||||
myParent[this.autowireListName] = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 调用父view的query
|
||||
_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`);
|
||||
}
|
||||
},
|
||||
// 检查complete 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 };
|
||||
},
|
||||
}
|
||||
}
|
||||
144
uni_modules/z-paging/components/z-paging/js/modules/empty.js
Normal file
144
uni_modules/z-paging/components/z-paging/js/modules/empty.js
Normal file
@@ -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)
|
||||
},
|
||||
// 空数据图图片,默认使用z-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', {})
|
||||
},
|
||||
// 空数据图片是否铺满z-paging,默认为否,即填充满z-paging内列表(滚动区域)部分。若设置为否,则为填铺满整个z-paging
|
||||
emptyViewFixed: {
|
||||
type: Boolean,
|
||||
default: u.gc('emptyViewFixed', false)
|
||||
},
|
||||
// 空数据图片是否垂直居中,默认为是,若设置为否即为从空数据容器顶部开始显示。emptyViewFixed为false时有效
|
||||
emptyViewCenter: {
|
||||
type: Boolean,
|
||||
default: u.gc('emptyViewCenter', true)
|
||||
},
|
||||
// 加载中时是否自动隐藏空数据图,默认为是
|
||||
autoHideEmptyViewWhenLoading: {
|
||||
type: Boolean,
|
||||
default: u.gc('autoHideEmptyViewWhenLoading', true)
|
||||
},
|
||||
// 用户下拉列表触发下拉刷新加载中时是否自动隐藏空数据图,默认为是
|
||||
autoHideEmptyViewWhenPull: {
|
||||
type: Boolean,
|
||||
default: u.gc('autoHideEmptyViewWhenPull', true)
|
||||
},
|
||||
// 空数据view的z-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.isOnly || 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');
|
||||
},
|
||||
}
|
||||
}
|
||||
113
uni_modules/z-paging/components/z-paging/js/modules/i18n.js
Normal file
113
uni_modules/z-paging/components/z-paging/js/modules/i18n.js
Normal file
@@ -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) {
|
||||
// 如果获取系统本地语言异常,则默认返回中文,uni.getLocale在部分低版本HX或者cli中可能报找不到的问题
|
||||
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转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;
|
||||
}
|
||||
}
|
||||
}
|
||||
374
uni_modules/z-paging/components/z-paging/js/modules/load-more.js
Normal file
374
uni_modules/z-paging/components/z-paging/js/modules/load-more.js
Normal file
@@ -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', {})
|
||||
},
|
||||
// 自定义底部加载更多加载中动画图标类型,可选flower或circle,默认为flower
|
||||
loadingMoreLoadingIconType: {
|
||||
type: String,
|
||||
default: u.gc('loadingMoreLoadingIconType', 'flower')
|
||||
},
|
||||
// 自定义底部加载更多加载中动画图标图片
|
||||
loadingMoreLoadingIconCustomImage: {
|
||||
type: String,
|
||||
default: u.gc('loadingMoreLoadingIconCustomImage', '')
|
||||
},
|
||||
// 底部加载更多加载中view是否展示旋转动画,默认为是
|
||||
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)
|
||||
},
|
||||
// 当没有更多数据且分页内容未超出z-paging时是否隐藏没有更多数据的view,默认为否
|
||||
hideNoMoreInside: {
|
||||
type: Boolean,
|
||||
default: u.gc('hideNoMoreInside', false)
|
||||
},
|
||||
// 当没有更多数据且分页数组长度少于这个值时,隐藏没有更多数据的view,默认为0,代表不限制。
|
||||
hideNoMoreByLimit: {
|
||||
type: Number,
|
||||
default: u.gc('hideNoMoreByLimit', 0)
|
||||
},
|
||||
// 是否显示默认的加载更多text,默认为是
|
||||
showDefaultLoadingMoreText: {
|
||||
type: Boolean,
|
||||
default: u.gc('showDefaultLoadingMoreText', true)
|
||||
},
|
||||
// 是否显示没有更多数据的view
|
||||
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代表交由z-paging自行判断;1代表没有更多了;0代表还有更多数据
|
||||
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')
|
||||
}
|
||||
// 检测一下是否已经滚动到了顶部了,因为在安卓中滚动到顶部时scrollTop不一定为0(和滚动到底部一样的原因),所以需要在scrollTop小于150px时,通过获取.zp-scroll-view的scrollTop再判断一下
|
||||
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的scrollTop为0,则认为已经滚动到了顶部了
|
||||
if (res && res[0].scrollTop === 0 && this.oldScrollTop !== 0) {
|
||||
this._onScrollToUpper();
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 150, 'checkScrolledToTopDelay')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 触发加载更多时调用,from:toBottom-滑动到底部触发;click-点击加载更多触发
|
||||
_onLoadingMore(from = 'click') {
|
||||
// 如果是ios并且是滚动到底部的,则在滚动到底部时候尝试将列表设置为禁止滚动然后设置为允许滚动,以禁止底部bounce的效果
|
||||
if (this.isIos && from === 'toBottom' && !this.scrollToBottomBounceEnabled && this.scrollEnable) {
|
||||
this.scrollEnable = false;
|
||||
this.$nextTick(() => {
|
||||
this.scrollEnable = true;
|
||||
})
|
||||
}
|
||||
// emit scrolltolower
|
||||
this._emitScrollEvent('scrolltolower');
|
||||
// 如果是只使用布局或下拉刷新 或者 禁用底部加载更多 或者 底部加载更多不是默认状态或加载失败状态 或者 是加载中状态 或者 空数据图已经展示了,则return,不触发内部加载更多逻辑
|
||||
if (this.isOnly || !this.loadingMoreEnabled || !(this.loadingStatus === Enum.More.Default || this.loadingStatus === Enum.More.Fail) || this.loading || this.showEmpty) return;
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!this.isIos && !this.isOnly && !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;
|
||||
}
|
||||
},
|
||||
// (预处理)判断当没有更多数据且分页内容未超出z-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;
|
||||
}
|
||||
},
|
||||
// 判断当没有更多数据且分页内容未超出z-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;
|
||||
// 如果滚动内容总高度小于窗口高度,则认为内容未超出z-paging
|
||||
this.insideOfPaging = scrollViewTotalH < this.windowHeight;
|
||||
// 如果需要没有更多数据时,隐藏底部加载更多view,并且内容未超过z-paging,则隐藏底部加载更多
|
||||
if (this.hideNoMoreInside) {
|
||||
this.showLoadingMore = !this.insideOfPaging;
|
||||
}
|
||||
// 如果需要内容未超过z-paging时自动加载更多,则触发加载更多
|
||||
this._updateInsideOfPaging();
|
||||
}
|
||||
} else {
|
||||
// 在scroll-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;
|
||||
// 如果滚动内容总高度小于z-paging内置scroll-view高度,则认为内容未超出z-paging
|
||||
this.insideOfPaging = pagingContainerH < scrollViewH;
|
||||
if (this.hideNoMoreInside) {
|
||||
this.showLoadingMore = !this.insideOfPaging;
|
||||
}
|
||||
// 如果需要内容未超过z-paging时自动加载更多,则触发加载更多
|
||||
this._updateInsideOfPaging();
|
||||
}
|
||||
} catch (e) {
|
||||
// 如果发生了异常,判断totalData数组长度为0,则认为内容未超出z-paging
|
||||
this.insideOfPaging = !totalData.length;
|
||||
if (this.hideNoMoreInside) {
|
||||
this.showLoadingMore = !this.insideOfPaging;
|
||||
}
|
||||
// 如果需要内容未超过z-paging时自动加载更多,则触发加载更多
|
||||
this._updateInsideOfPaging();
|
||||
}
|
||||
},
|
||||
// 是否要展示上拉加载更多view
|
||||
_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.isOnly) {
|
||||
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;
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -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、refresh时)显示,下拉刷新和滚动到底部加载更多不会显示,默认为false。
|
||||
autoShowSystemLoading: {
|
||||
type: Boolean,
|
||||
default: u.gc('autoShowSystemLoading', false)
|
||||
},
|
||||
// 显示系统Loading时是否显示透明蒙层,防止触摸穿透,默认为是(H5、App、微信小程序、百度小程序有效)
|
||||
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和refresh
|
||||
_endSystemLoadingAndRefresh(){
|
||||
this.finalShowSystemLoading && uni.hideLoading();
|
||||
!this.useCustomRefresher && uni.stopPullDownRefresh();
|
||||
// #ifdef APP-NVUE
|
||||
this.usePageScroll && uni.stopPullDownRefresh();
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
299
uni_modules/z-paging/components/z-paging/js/modules/nvue.js
Normal file
299
uni_modules/z-paging/components/z-paging/js/modules/nvue.js
Normal file
@@ -0,0 +1,299 @@
|
||||
// [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、waterfall和scroller,默认为list
|
||||
nvueListIs: {
|
||||
type: String,
|
||||
default: u.gc('nvueListIs', 'list')
|
||||
},
|
||||
// nvue waterfall配置,仅在nvue中且nvueListIs=waterfall时有效,配置参数详情参见:https://uniapp.dcloud.io/component/waterfall
|
||||
nvueWaterfallConfig: {
|
||||
type: Object,
|
||||
default: u.gc('nvueWaterfallConfig', {})
|
||||
},
|
||||
// nvue 控制是否回弹效果,iOS不支持动态修改
|
||||
nvueBounce: {
|
||||
type: Boolean,
|
||||
default: u.gc('nvueBounce', true)
|
||||
},
|
||||
// nvue中通过代码滚动到顶部/底部时,是否加快动画效果(无滚动动画时无效),默认为否
|
||||
nvueFastScroll: {
|
||||
type: Boolean,
|
||||
default: u.gc('nvueFastScroll', false)
|
||||
},
|
||||
// nvue中list的id
|
||||
nvueListId: {
|
||||
type: String,
|
||||
default: u.gc('nvueListId', '')
|
||||
},
|
||||
// nvue中refresh组件的样式
|
||||
nvueRefresherStyle: {
|
||||
type: Object,
|
||||
default: u.gc('nvueRefresherStyle', {})
|
||||
},
|
||||
// nvue中是否按分页模式(类似竖向swiper)显示List,默认为false
|
||||
nvuePagingEnabled: {
|
||||
type: Boolean,
|
||||
default: u.gc('nvuePagingEnabled', false)
|
||||
},
|
||||
// 是否隐藏nvue列表底部的tagView,此view用于标识滚动到底部位置,若隐藏则滚动到底部功能将失效,在nvue中实现吸顶+swiper功能时需将最外层z-paging的此属性设置为true。默认为否
|
||||
hideNvueBottomTag: {
|
||||
type: Boolean,
|
||||
default: u.gc('hideNvueBottomTag', false)
|
||||
},
|
||||
// nvue中控制onscroll事件触发的频率:表示两次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),
|
||||
nListHeight: 0,
|
||||
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 scrollTop = -e.contentOffset.y;
|
||||
const scrollHeight = e.contentSize.height;
|
||||
|
||||
if (this.watchScrollDirectionChange) {
|
||||
// 计算scroll-view滚动方向,正常情况下上次滚动的oldScrollTop大于当前scrollTop即为向上滚动,反之为向下滚动
|
||||
let direction = this.oldScrollTop > scrollTop ? 'top' : 'bottom';
|
||||
// 此处为解决在iOS中,滚动到顶部因bounce的影响回弹导致滚动方向为bottom的问题:如果滚动到顶部了并且scrollTop小于顶部滚动区域,则强制设置direction为top
|
||||
if (scrollTop <= 0) {
|
||||
direction = 'top';
|
||||
}
|
||||
// 此处为解决在iOS中,滚动到底部因bounce的影响回弹导致滚动方向为top的问题:如果滚动到底部了并且scrollTop超过底部滚动区域,则强制设置direction为bottom
|
||||
if (scrollTop > this.lastScrollHeight - this.nListHeight - 1) {
|
||||
direction = 'bottom';
|
||||
}
|
||||
// emit 列表滚动方向改变事件
|
||||
if (direction !== this.lastScrollDirection) {
|
||||
this.$emit('scrollDirectionChange', direction);
|
||||
this.lastScrollDirection = direction;
|
||||
}
|
||||
// 当scrollHeight变化时,需要延迟100毫秒设置lastScrollHeight,如果直接根据scrollHeight的话,因为此时数据还未改变,会导致滚动方向从bottom变为top
|
||||
if (this.lastScrollHeight !== scrollHeight && !this.setContentHeightPending) {
|
||||
// 因此处会多次触发,因此加个标识确保在延时期间仅触发一次
|
||||
this.setContentHeightPending = true;
|
||||
u.delay(() => {
|
||||
this.lastScrollHeight = scrollHeight;
|
||||
this.setContentHeightPending = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.oldScrollTop = scrollTop;
|
||||
this.nListIsDragging = e.isDragging;
|
||||
this._checkShouldShowBackToTop(scrollTop, scrollTop - 1);
|
||||
},
|
||||
// 列表滚动结束
|
||||
_nOnScrollend(e) {
|
||||
this.$emit('scrollend', e);
|
||||
|
||||
// 判断是否滚动到顶部了
|
||||
if (e?.contentOffset?.y >= 0) {
|
||||
this._emitScrollEvent('scrolltoupper');
|
||||
}
|
||||
// 判断是否滚动到底部了
|
||||
this._getNodeClientRect('.zp-n-list').then(node => {
|
||||
if (node) {
|
||||
this.nListHeight = node[0].height;
|
||||
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不一致的问题,pullingDistance仅与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不需要自动展示下拉刷新view,则在complete duration结束后再把下拉刷新状态设置回默认
|
||||
this.refresherEndTimeout = u.delay(() => {
|
||||
this.refresherStatus = Enum.Refresher.Default;
|
||||
}, this.refresherCompleteDuration);
|
||||
return;
|
||||
}
|
||||
// 用户处理用户在短时间内多次调用reload的情况,此时下拉刷新view不需要重复显示,只需要保证最后一次reload对应的请求结束后收回下拉刷新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
|
||||
}
|
||||
}
|
||||
835
uni_modules/z-paging/components/z-paging/js/modules/refresher.js
Normal file
835
uni_modules/z-paging/components/z-paging/js/modules/refresher.js
Normal file
@@ -0,0 +1,835 @@
|
||||
// [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,white,默认black
|
||||
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为true时有效)
|
||||
refresherUpdateTimeStyle: {
|
||||
type: Object,
|
||||
default: u.gc('refresherUpdateTimeStyle', {})
|
||||
},
|
||||
// 在微信小程序和QQ小程序中,是否实时监听下拉刷新中进度,默认为否
|
||||
watchRefresherTouchmove: {
|
||||
type: Boolean,
|
||||
default: u.gc('watchRefresherTouchmove', false)
|
||||
},
|
||||
// 底部加载更多的主题样式,支持black,white,默认black
|
||||
loadingMoreThemeStyle: {
|
||||
type: String,
|
||||
default: u.gc('loadingMoreThemeStyle', '')
|
||||
},
|
||||
// 是否只使用下拉刷新,设置为true后将关闭mounted自动请求数据、关闭滚动到底部加载更多,强制隐藏空数据图。默认为否
|
||||
refresherOnly: {
|
||||
type: Boolean,
|
||||
default: u.gc('refresherOnly', false)
|
||||
},
|
||||
// 自定义下拉刷新默认状态下回弹动画时间,单位为毫秒,默认为100毫秒,nvue无效
|
||||
refresherDefaultDuration: {
|
||||
type: [Number, String],
|
||||
default: u.gc('refresherDefaultDuration', 100)
|
||||
},
|
||||
// 自定义下拉刷新结束以后延迟回弹的时间,单位为毫秒,默认为0
|
||||
refresherCompleteDelay: {
|
||||
type: [Number, String],
|
||||
default: u.gc('refresherCompleteDelay', 0)
|
||||
},
|
||||
// 自定义下拉刷新结束回弹动画时间,单位为毫秒,默认为300毫秒(refresherEndBounceEnabled为false时,refresherCompleteDuration为设定值的1/3),nvue无效
|
||||
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)
|
||||
},
|
||||
// 是否使用自定义的下拉刷新,默认为是,即使用z-paging的下拉刷新。设置为false即代表使用uni scroll-view自带的下拉刷新,h5、App、微信小程序以外的平台不支持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)
|
||||
},
|
||||
// 自定义下拉刷新松手立即刷新状态下的图片,默认与refresherDefaultImg一致
|
||||
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,white,none,none 表示不使用默认样式,默认为black
|
||||
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,即代表若用户下拉10px,则实际位移为7.5px(nvue无效)
|
||||
refresherPullRate: {
|
||||
type: Number,
|
||||
default: u.gc('refresherPullRate', 0.75)
|
||||
},
|
||||
// 是否显示最后更新时间,默认为否
|
||||
showRefresherUpdateTime: {
|
||||
type: Boolean,
|
||||
default: u.gc('showRefresherUpdateTime', false)
|
||||
},
|
||||
// 如果需要区别不同页面的最后更新时间,请为不同页面的z-paging的`refresher-update-time-key`设置不同的字符串
|
||||
refresherUpdateTimeKey: {
|
||||
type: String,
|
||||
default: u.gc('refresherUpdateTimeKey', 'default')
|
||||
},
|
||||
// 下拉刷新时下拉到“松手立即刷新”或“松手进入二楼”状态时是否使手机短振动,默认为否(h5无效)
|
||||
refresherVibrate: {
|
||||
type: Boolean,
|
||||
default: u.gc('refresherVibrate', false)
|
||||
},
|
||||
// 下拉刷新时是否禁止下拉刷新view跟随用户触摸竖直移动,默认为否。注意此属性只是禁止下拉刷新view移动,其他下拉刷新逻辑依然会正常触发
|
||||
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.layoutOnly || 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;
|
||||
})
|
||||
},
|
||||
// 手动更新自定义下拉刷新view高度
|
||||
updateCustomRefresherHeight() {
|
||||
u.delay(() => this.$nextTick(this._updateCustomRefresherHeight));
|
||||
},
|
||||
// 进入二楼
|
||||
goF2() {
|
||||
this._handleGoF2();
|
||||
},
|
||||
// 关闭二楼
|
||||
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
|
||||
// 进一步处理touch开始结果
|
||||
_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();
|
||||
},
|
||||
|
||||
// 非app-vue或微信小程序或QQ小程序或h5平台,使用js控制下拉刷新
|
||||
// #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;
|
||||
// 如果不允许下拉,则return
|
||||
if (this._touchDisabled()) return;
|
||||
this.pullDownTimeStamp = Number(currentTimeStamp);
|
||||
touch = u.getTouch(e);
|
||||
refresherTouchmoveY = touch.touchY;
|
||||
// 获取当前touch的y - 初始touch的y,计算它们的差
|
||||
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
|
||||
// 进一步处理touch中结果
|
||||
_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
|
||||
// 进一步处理touch结束结果
|
||||
_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 && [Enum.Refresher.ReleaseToRefresh, Enum.Refresher.GoF2].indexOf(this.refresherStatus) >= 0) {
|
||||
// 如果是松手进入二楼状态,则触发进入二楼
|
||||
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正在下拉状态改变处理
|
||||
_handleWxsPullingDownStatusChange(onPullingDown) {
|
||||
this.wxsOnPullingDown = onPullingDown;
|
||||
if (onPullingDown && !this.useChatRecordMode) {
|
||||
this.renderPropScrollTop = 0;
|
||||
}
|
||||
},
|
||||
// wxs正在下拉处理
|
||||
_handleWxsPullingDown({ moveDis, diffDis }){
|
||||
this._emitTouchmove({ pullingDistance: moveDis,dy: diffDis });
|
||||
},
|
||||
// wxs触摸方向改变
|
||||
_handleTouchDirectionChange({ direction }) {
|
||||
this.$emit('touchDirectionChange',direction);
|
||||
},
|
||||
// wxs通知更新其props
|
||||
_handlePropUpdate(){
|
||||
this.wxsPropType = u.getTime().toString();
|
||||
},
|
||||
// 下拉刷新结束
|
||||
_refresherEnd(shouldEndLoadingDelay = true, fromAddData = false, isUserPullDown = false, setLoading = true) {
|
||||
if (this.loadingType === Enum.LoadingType.Refresher) {
|
||||
// 计算当前下拉刷新结束需要延迟的时间(用户主动下拉刷新或reload时显示下拉刷新view才需要计算延迟时间)
|
||||
const refresherCompleteDelay = (fromAddData && (isUserPullDown || this.finalShowRefresherWhenReload)) ? 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();
|
||||
// 用户处理用户在短时间内多次调用reload的情况,此时下拉刷新view不需要重复显示,只需要保证最后一次reload对应的请求结束后收回下拉刷新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过大的情况,比如进入页面突然猛然下拉,此时diffDis不应进行太大的偏移
|
||||
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.layoutOnly || !this.refresherEnabled || !this.useCustomRefresher || (this.usePageScroll && this.useCustomRefresher && this.pageScrollTop > 10) || (!(this.usePageScroll && this.useCustomRefresher) && checkOldScrollTop);
|
||||
},
|
||||
// #endif
|
||||
// 更新自定义下拉刷新view高度
|
||||
_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);
|
||||
},
|
||||
}
|
||||
}
|
||||
616
uni_modules/z-paging/components/z-paging/js/modules/scroller.js
Normal file
616
uni_modules/z-paging/components/z-paging/js/modules/scroller.js
Normal file
@@ -0,0 +1,616 @@
|
||||
// [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的滚动,使用页面滚动时z-paging无需设置确定的高度且对于长列表展示性能更高,但配置会略微繁琐
|
||||
usePageScroll: {
|
||||
type: Boolean,
|
||||
default: u.gc('usePageScroll', false)
|
||||
},
|
||||
// 是否可以滚动,使用内置scroll-view和nvue时有效,默认为是
|
||||
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设备上滚动到顶部时是否允许回弹效果,默认为否。关闭回弹效果后可使滚动到顶部与下拉刷新更连贯,但是有吸顶view时滚动到顶部时可能出现抖动。
|
||||
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)
|
||||
},
|
||||
// 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
|
||||
scrollIntoView: {
|
||||
type: String,
|
||||
default: u.gc('scrollIntoView', '')
|
||||
},
|
||||
// z-paging是否使用swiper-item或其他父组件包裹,默认为否,此属性为了解决vue3+(微信小程序或QQ小程序)中,scrollIntoViewById和scrollIntoViewByIndex因无法获取节点信息导致滚动到指定view无效的问题
|
||||
inSwiperSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
scrollLeft: 0,
|
||||
oldScrollLeft: 0,
|
||||
scrollViewStyle: {},
|
||||
scrollViewContainerStyle: {},
|
||||
scrollViewInStyle: {},
|
||||
pageScrollTop: -1,
|
||||
scrollEnable: true,
|
||||
privateScrollWithAnimation: -1,
|
||||
cacheScrollNodeHeight: -1,
|
||||
superContentHeight: 0,
|
||||
lastScrollHeight: 0,
|
||||
lastScrollDirection: '',
|
||||
setContentHeightPending: false
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
// 当前是否是旧版webview
|
||||
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
|
||||
})
|
||||
},
|
||||
// 滚动到指定view(vue中有效)。sel为需要滚动的view的id值,不包含"#";offset为偏移量,单位为px;animate为是否展示滚动动画,默认为否
|
||||
scrollIntoViewById(sel, offset, animate) {
|
||||
this._scrollIntoView(sel, offset, animate);
|
||||
},
|
||||
// 滚动到指定view(vue中有效)。nodeTop为需要滚动的view的top值(通过uni.createSelectorQuery()获取);offset为偏移量,单位为px;animate为是否展示滚动动画,默认为否
|
||||
scrollIntoViewByNodeTop(nodeTop, offset, animate) {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this._scrollIntoViewByNodeTop(nodeTop, offset, animate);
|
||||
})
|
||||
},
|
||||
// y轴滚动到指定位置(vue中有效)。y为与顶部的距离,单位为px;offset为偏移量,单位为px;animate为是否展示滚动动画,默认为否
|
||||
scrollToY(y, offset, animate) {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this._scrollToY(y, offset, animate);
|
||||
})
|
||||
},
|
||||
// x轴滚动到指定位置(非页面滚动且在vue中有效)。x为与左侧的距离,单位为px;offset为偏移量,单位为px;animate为是否展示滚动动画,默认为否
|
||||
scrollToX(x, offset, animate) {
|
||||
this.scrollLeft = this.oldScrollLeft;
|
||||
this.$nextTick(() => {
|
||||
this._scrollToX(x, offset, animate);
|
||||
})
|
||||
},
|
||||
// 滚动到指定view(nvue中和虚拟列表中有效)。index为需要滚动的view的index(第几个,从0开始);offset为偏移量,单位为px;animate为是否展示滚动动画,默认为否
|
||||
scrollIntoViewByIndex(index, offset, animate) {
|
||||
if (index >= this.realTotalData.length) {
|
||||
u.consoleErr('当前滚动的index超出已渲染列表长度,请先通过refreshToPage加载到对应index页并等待渲染成功后再调用此方法!');
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
// #ifdef APP-NVUE
|
||||
// 在nvue中,根据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高度完全相同模式下,此时滚动到对应index的cell就是滚动到scrollTop = cellHeight * index的位置
|
||||
// 虚拟列表 + 高度是动态非固定的模式下,此时滚动到对应index的cell就是滚动到scrollTop = 缓存的cell高度数组中第index个的lastTotalHeight的位置
|
||||
const scrollTop = isCellFixed ? this.virtualCellHeight * index : this.virtualHeightCacheList[index].lastTotalHeight;
|
||||
this.scrollToY(scrollTop, offset, animate);
|
||||
}
|
||||
}, isCellFixed ? 0 : 100)
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
// 滚动到指定view(nvue中有效)。view为需要滚动的view(通过`this.$refs.xxx`获取),不包含"#";offset为偏移量,单位为px;animate为是否展示滚动动画,默认为否
|
||||
scrollIntoViewByView(view, offset, animate) {
|
||||
this._scrollIntoView(view, offset, animate);
|
||||
},
|
||||
// 当使用页面滚动并且自定义下拉刷新时,请在页面的onPageScroll中调用此方法,告知z-paging当前的pageScrollTop,否则会导致在任意位置都可以下拉刷新
|
||||
updatePageScrollTop(value) {
|
||||
this.pageScrollTop = value;
|
||||
},
|
||||
// 当使用页面滚动并且设置了slot="top"时,默认初次加载会自动获取其高度,并使内部容器下移,当slot="top"的view高度动态改变时,在其高度需要更新时调用此方法
|
||||
updatePageScrollTopHeight() {
|
||||
this._updatePageScrollTopOrBottomHeight('top');
|
||||
},
|
||||
// 当使用页面滚动并且设置了slot="bottom"时,默认初次加载会自动获取其高度,并使内部容器下移,当slot="bottom"的view高度动态改变时,在其高度需要更新时调用此方法
|
||||
updatePageScrollBottomHeight() {
|
||||
this._updatePageScrollTopOrBottomHeight('bottom');
|
||||
},
|
||||
// 更新slot="left"和slot="right"宽度,当slot="left"或slot="right"宽度动态改变时调用
|
||||
updateLeftAndRightWidth() {
|
||||
if (!this.finalIsOldWebView) return;
|
||||
this.$nextTick(() => this._updateLeftAndRightWidth(this.scrollViewContainerStyle, 'zp-page'));
|
||||
},
|
||||
// 更新z-paging内置scroll-view的scrollTop
|
||||
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
|
||||
// 在nvue中需要通过weex.scrollToElement滚动到顶部,此时在顶部插入了一个view,使得滚动到这个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;
|
||||
});
|
||||
u.delay(() => {
|
||||
this.scrollTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this.scrollTop = 0;
|
||||
this.oldScrollTop = this.scrollTop;
|
||||
});
|
||||
}, 500)
|
||||
},
|
||||
// 滚动到底部
|
||||
async _scrollToBottom(animate = true) {
|
||||
// #ifdef APP-NVUE
|
||||
// 在nvue中需要通过weex.scrollToElement滚动到顶部,此时在底部插入了一个view,使得滚动到这个view位置
|
||||
const el = this.$refs['zp-n-list-bottom-tag'];
|
||||
if (el) {
|
||||
weexDom.scrollToElement(el, {
|
||||
offset: 0,
|
||||
animated: animate
|
||||
});
|
||||
} else {
|
||||
u.consoleErr('滚动到底部失败,因为您设置了hideNvueBottomTag为true');
|
||||
}
|
||||
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) {}
|
||||
},
|
||||
// 滚动到指定view
|
||||
_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('在nvue中滚动到指定位置,cell必须设置 :ref="`z-paging-${index}`"');
|
||||
}
|
||||
return;
|
||||
// #endif
|
||||
// 获取指定view的节点信息
|
||||
let inDom = false;
|
||||
// 在vue3+(微信小程序或QQ小程序)中,无法获取节点信息导致滚动到指定view无效的问题
|
||||
// 通过uni.createSelectorQuery().in(this.$parent)来解决此问题
|
||||
// #ifdef VUE3
|
||||
// #ifdef MP-WEIXIN || MP-QQ
|
||||
if (this.inSwiperSlot) {
|
||||
inDom = this.$parent;
|
||||
}
|
||||
// #endif
|
||||
// #endif
|
||||
this._getNodeClientRect('#' + sel.replace('#', ''), inDom).then((node) => {
|
||||
if (node) {
|
||||
// 获取zp-scroll-view-container的节点信息
|
||||
this._getNodeClientRect('.zp-scroll-view-container').then((svContainerNode) => {
|
||||
if (svContainerNode) {
|
||||
// 滚动的top为指定view的top减zp-scroll-view-container的top,因为指定view的top是相对于整个窗口的,需要考虑相对的位置关系
|
||||
this._scrollIntoViewByNodeTop(node[0].top - svContainerNode[0].top, offset, animate);
|
||||
finishCallback && finishCallback();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
u.consoleErr(`无法获取${sel}的节点信息,请检查!`);
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (e) {}
|
||||
},
|
||||
// 通过nodeTop滚动到指定view
|
||||
_scrollIntoViewByNodeTop(nodeTop, offset = 0, animate = false) {
|
||||
// 如果是聊天记录模式并且列表倒置了,此时nodeTop需要等于scroll-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, scrollHeight } = e.detail;
|
||||
|
||||
if (this.watchScrollDirectionChange) {
|
||||
// 计算scroll-view滚动方向,正常情况下上次滚动的oldScrollTop大于当前scrollTop即为向上滚动,反之为向下滚动
|
||||
let direction = this.oldScrollTop > scrollTop ? 'top' : 'bottom';
|
||||
// 此处为解决在iOS中,滚动到顶部因bounce的影响回弹导致滚动方向为bottom的问题:如果滚动到顶部了并且scrollTop小于顶部滚动区域,则强制设置direction为top
|
||||
// 此外发现在h5中下拉刷新时direction有概率被判断为bottom(oldScrollTop > scrollTop),因为下拉刷新时会禁止scroll-view滚动,则以此为依据强制设置direction为top
|
||||
if (scrollTop <= 0 || !this.scrollEnable) {
|
||||
direction = 'top';
|
||||
}
|
||||
// 此处为解决在iOS中,滚动到底部因bounce的影响回弹导致滚动方向为top的问题:如果滚动到底部了并且scrollTop超过底部滚动区域,则强制设置direction为bottom
|
||||
if (scrollTop > this.lastScrollHeight - this.scrollViewHeight - 1 && this.scrollEnable) {
|
||||
direction = 'bottom';
|
||||
}
|
||||
// emit 列表滚动方向改变事件
|
||||
if (direction !== this.lastScrollDirection) {
|
||||
this.$emit('scrollDirectionChange', direction);
|
||||
this.lastScrollDirection = direction;
|
||||
}
|
||||
// 当scrollHeight变化时,需要延迟100毫秒设置lastScrollHeight,如果直接根据scrollHeight的话,因为此时数据还未改变,会导致滚动方向从bottom变为top
|
||||
if (this.lastScrollHeight !== scrollHeight && !this.setContentHeightPending) {
|
||||
// 因此处会多次触发,因此加个标识确保在延时期间仅触发一次
|
||||
this.setContentHeightPending = true;
|
||||
u.delay(() => {
|
||||
this.lastScrollHeight = scrollHeight;
|
||||
this.setContentHeightPending = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
this.finalUseVirtualList && this._updateVirtualScroll(scrollTop, this.oldScrollTop - scrollTop);
|
||||
// #endif
|
||||
this.oldScrollTop = scrollTop;
|
||||
this.oldScrollLeft = scrollLeft;
|
||||
// 在非ios平台滚动中,再次验证一下是否滚动到了底部。因为在一些安卓设备中,有概率滚动到底部不触发@scrolltolower事件,因此添加双重检测逻辑
|
||||
// 排除快手的情况,因为在快手安卓中双重检测会导致滚动到底部事件多次触发
|
||||
// #ifndef MP-KUAISHOU
|
||||
if (!this.isIos) {
|
||||
// 滚动区域内容的总高度 - 当前滚动的scrollTop = 当前滚动区域的顶部与内容底部的距离
|
||||
const scrollDiff = e.detail.scrollHeight - this.oldScrollTop;
|
||||
this._checkScrolledToBottom(scrollDiff);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// emit scrolltolower/scrolltoupper事件
|
||||
_emitScrollEvent(type) {
|
||||
const reversedType = type === 'scrolltolower' ? 'scrolltoupper' : 'scrolltolower';
|
||||
const eventType = this.useChatRecordMode && !this.isChatRecordModeAndNotInversion ? reversedType : type;
|
||||
this.$emit(eventType);
|
||||
},
|
||||
// 更新内置的scroll-view是否启用滚动动画
|
||||
_updatePrivateScrollWithAnimation(animate) {
|
||||
this.privateScrollWithAnimation = animate ? 1 : 0;
|
||||
u.delay(() => this.$nextTick(() => {
|
||||
// 在滚动结束后将滚动动画状态设置回初始状态
|
||||
this.privateScrollWithAnimation = -1;
|
||||
}), 100, 'updateScrollWithAnimationDelay')
|
||||
},
|
||||
// 检测scrollView是否要铺满屏幕
|
||||
_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)
|
||||
}
|
||||
},
|
||||
// 检测z-paging是否要全屏覆盖(当使用页面滚动并且不满全屏时,默认z-paging需要铺满全屏,避免数据过少时内部的empty-view无法正确展示)
|
||||
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);
|
||||
}
|
||||
},
|
||||
// 更新缓存中z-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有概率滚动到顶部时scrollTop不为0导致下拉刷新判断异常,因此判断scrollTop在105之内都允许下拉刷新,但此方案会导致某些情况(例如滚动到距离顶部10px处)下拉抖动,因此改为通过获取zp-scroll-view的节点信息中的scrollTop进行验证的方案
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新使用页面滚动时slot="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)}`;
|
||||
// 是否设置底部安全区域间距,仅当开启底部安全区域并且slot=bottom不存在的时候才处理,如果slot=bottom存在则直接在bottom底部插入占位view
|
||||
// 如果useSafeAreaPlaceholder为true,这里也不需要额外通过marginBottom设置底部安全区域了
|
||||
const safeAreaInsetBottomAdd = this.safeAreaInsetBottom && !this.zSlots.bottom && !this.useSafeAreaPlaceholder;
|
||||
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)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,539 @@
|
||||
// [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', {})
|
||||
},
|
||||
// 是否在z-paging内部循环渲染列表(内置列表),默认为否。若use-virtual-list为true,则此项恒为true
|
||||
useInnerList: {
|
||||
type: Boolean,
|
||||
default: u.gc('useInnerList', false)
|
||||
},
|
||||
// 强制关闭inner-list,默认为false,如果为true将强制关闭innerList,适用于开启了虚拟列表后需要强制关闭inner-list的情况
|
||||
forceCloseInnerList: {
|
||||
type: Boolean,
|
||||
default: u.gc('forceCloseInnerList', false)
|
||||
},
|
||||
// 内置列表cell的key名称,仅nvue有效,在nvue中开启use-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。此数值越大,则虚拟列表中加载的dom越多,内存消耗越大(会维持在一个稳定值),但增加预加载页面数量可缓解快速滚动短暂白屏问题
|
||||
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高度完全相同,将以第一个cell高度为准进行计算。可选值【dynamic】,即代表高度是动态非固定的,【dynamic】性能低于【fixed】。
|
||||
cellHeightMode: {
|
||||
type: String,
|
||||
default: u.gc('cellHeightMode', Enum.CellHeightMode.Fixed)
|
||||
},
|
||||
// 固定的cell高度,cellHeightMode=fixed才有效,若设置了值,则不计算第一个cell高度而使用设置的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的id,注意:请勿传数字或以数字开头的字符串。如设置为list1,则cell的id应为:list1-zp-id-${item.zp_index}
|
||||
virtualCellIdPrefix: {
|
||||
type: String,
|
||||
default: u.gc('virtualCellIdPrefix', '')
|
||||
},
|
||||
// 虚拟列表是否使用swiper-item或其他父组件包裹,默认为否,此属性为了解决vue3+(微信小程序或QQ小程序)中,使用非内置列表写法时,若z-paging在swiper-item内存在无法获取slot插入的cell高度进而导致虚拟列表失败的问题
|
||||
// 仅vue3+(微信小程序或QQ小程序)+非内置列表写法虚拟列表有效,其他情况此属性设置任何值都无效,所以如果您在swiper-item内使用z-paging的非内置虚拟列表写法,将此属性设置为true即可
|
||||
virtualInSwiperSlot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
virtualListKey: u.getInstanceId(),
|
||||
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
|
||||
},
|
||||
updateVirtualListFromDataChange: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听总数据的改变,刷新虚拟列表布局
|
||||
realTotalData() {
|
||||
this.updateVirtualListRender();
|
||||
},
|
||||
// 监听虚拟列表渲染数组的改变并emit
|
||||
virtualList(newVal){
|
||||
this.$emit('update:virtualList', newVal);
|
||||
this.$emit('virtualListChange', newVal);
|
||||
},
|
||||
// 监听虚拟列表顶部占位高度改变并emit
|
||||
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('在nvue中开启use-virtual-list必须设置cell-key-name,否则将可能导致列表渲染错误!');
|
||||
}
|
||||
// #endif
|
||||
return this.cellKeyName;
|
||||
},
|
||||
finalVirtualPageHeight(){
|
||||
return this.scrollViewHeight > 0 ? this.scrollViewHeight : 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: {
|
||||
// 在使用动态高度虚拟列表时,若在列表数组中需要插入某个item,需要调用此方法;item:需要插入的item,index:插入的cell位置,若index为2,则插入的item在原list的index=1之后,index从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高度数组中,插入此cell高度信息
|
||||
this.virtualHeightCacheList.splice(index, 0, {
|
||||
height: currentHeight,
|
||||
lastTotalHeight,
|
||||
totalHeight: lastTotalHeight + currentHeight
|
||||
});
|
||||
|
||||
// 从当前index起后续的cell缓存高度的lastTotalHeight和totalHeight需要加上当前cell的高度
|
||||
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;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 在使用动态高度虚拟列表时,手动更新指定cell的缓存高度(当cell高度在初始化之后再次改变后调用);index:需要更新的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;
|
||||
|
||||
// 从当前index起后续的cell缓存高度的lastTotalHeight和totalHeight需要加上当前cell变化的高度
|
||||
for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) {
|
||||
const thisNode = this.virtualHeightCacheList[i];
|
||||
thisNode.totalHeight += heightDis;
|
||||
thisNode.lastTotalHeight += heightDis;
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
// 在使用动态高度虚拟列表时,若删除了列表数组中的某个item,需要调用此方法以更新高度缓存数组;index:删除的cell在列表中的位置,从0开始
|
||||
didDeleteVirtualListCell(index) {
|
||||
if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return;
|
||||
const currentNode = this.virtualHeightCacheList[index];
|
||||
// 从当前index起后续的cell缓存高度的lastTotalHeight和totalHeight需要减去当前cell的高度
|
||||
for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) {
|
||||
const thisNode = this.virtualHeightCacheList[i];
|
||||
thisNode.totalHeight -= currentNode.height;
|
||||
thisNode.lastTotalHeight -= currentNode.height;
|
||||
}
|
||||
// 将当前cell的高度信息从高度缓存数组中删除
|
||||
this.virtualHeightCacheList.splice(index, 1);
|
||||
},
|
||||
// 手动触发虚拟列表渲染更新,可用于解决例如修改了虚拟列表数组中元素,但展示未更新的情况
|
||||
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
|
||||
},
|
||||
// cellHeightMode为fixed时获取第一个cell高度
|
||||
_updateFixedCellHeight() {
|
||||
if (!this.finalFixedCellHeight) {
|
||||
this.$nextTick(() => {
|
||||
u.delay(() => {
|
||||
this._getVirtualCellNodeByIndex(0).then(cellNode => {
|
||||
if (!cellNode) {
|
||||
if (this.getCellHeightRetryCount.fixed > 10) return;
|
||||
this.getCellHeightRetryCount.fixed ++;
|
||||
// 如果获取第一个cell的节点信息失败,则重试(不超过10次)
|
||||
this._updateFixedCellHeight();
|
||||
} else {
|
||||
this.virtualCellHeight = cellNode[0].height;
|
||||
this._updateVirtualScroll(this.oldScrollTop);
|
||||
}
|
||||
});
|
||||
}, c.delayTime, 'updateFixedCellHeightDelay');
|
||||
})
|
||||
} else {
|
||||
this.virtualCellHeight = this.finalFixedCellHeight;
|
||||
}
|
||||
},
|
||||
// cellHeightMode为dynamic时获取每个cell高度
|
||||
_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高度;lastTotalHeight-前面所有cell的高度总和;totalHeight-包含当前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++) {
|
||||
// 更新之前所有项的缓存高度,需要加上此次插入的所有cell高度之和(因为是从顶部插入的cell)
|
||||
const heightCacheItem = heightCacheList[i];
|
||||
heightCacheItem.lastTotalHeight += listTotalHeight;
|
||||
heightCacheItem.totalHeight += listTotalHeight;
|
||||
}
|
||||
this.virtualHeightCacheList = currentCacheList.concat(heightCacheList);
|
||||
}
|
||||
this._updateVirtualScroll(this.oldScrollTop);
|
||||
}, c.delayTime, 'updateDynamicCellHeightDelay')
|
||||
})
|
||||
},
|
||||
// 设置cellItem的index
|
||||
_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的index = scrollTop / 虚拟列表cell的固定高度
|
||||
scrollIndex = parseInt(scrollTop / this.virtualCellHeight) || 0;
|
||||
// 更新顶部和底部占位view的高度(为兼容考虑,顶部采用transformY的方式占位)
|
||||
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];
|
||||
// 如果查找到某个cell对应的totalHeight大于顶部视图区域外的高度,则此cell为顶部视图边缘的cell
|
||||
if (heightCacheItem && heightCacheItem.totalHeight > topRangePageOffset) {
|
||||
// 记录顶部视图边缘cell的index并更新顶部占位区域的高度并停止继续查找
|
||||
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];
|
||||
// 如果查找到某个cell对应的totalHeight小于顶部视图区域外的高度,则此cell为顶部视图边缘的cell
|
||||
if (heightCacheItem && heightCacheItem.totalHeight < topRangePageOffset) {
|
||||
// 记录顶部视图边缘cell的index并更新顶部占位区域的高度并停止继续查找
|
||||
this.virtualTopRangeIndex = i;
|
||||
this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight;
|
||||
topRangeMatched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 如果查找不到,则认为顶部占位高度为0了,顶部cell不需要继续复用,重置topRangeIndex和placeholderTopHeight
|
||||
!topRangeMatched && this._resetTopRange();
|
||||
}
|
||||
// 从顶部视图边缘的cell的位置开始向后查找
|
||||
for (let i = this.virtualTopRangeIndex; i < heightCacheList.length; i++){
|
||||
const heightCacheItem = heightCacheList[i];
|
||||
// 如果查找到某个cell对应的totalHeight大于底部视图区域外的高度,则此cell为底部视图边缘的cell
|
||||
if (heightCacheItem && heightCacheItem.totalHeight > bottomRangePageOffset) {
|
||||
// 记录底部视图边缘cell的index并更新底部占位区域的高度并停止继续查找
|
||||
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模式下topRangeIndex&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模式下bottomRangeIndex&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);
|
||||
}
|
||||
},
|
||||
// 重置动态cell模式下的高度缓存数据、虚拟列表和滚动状态
|
||||
_resetDynamicListState(resetVirtualList = false) {
|
||||
this.virtualHeightCacheList = [];
|
||||
if (resetVirtualList) {
|
||||
this.virtualList = [];
|
||||
}
|
||||
this.virtualTopRangeIndex = 0;
|
||||
this.virtualPlaceholderTopHeight = 0;
|
||||
},
|
||||
// 重置topRangeIndex和placeholderTopHeight
|
||||
_resetTopRange() {
|
||||
this.virtualTopRangeIndex = 0;
|
||||
this.virtualPlaceholderTopHeight = 0;
|
||||
this._updateVirtualList();
|
||||
},
|
||||
// 检测虚拟列表当前滚动位置,如发现滚动位置不正确则重新计算虚拟列表相关参数(为解决在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的虚拟列表cell节点信息
|
||||
_getVirtualCellNodeByIndex(index) {
|
||||
let inDom = this.finalUseInnerList;
|
||||
// 在vue3+(微信小程序或QQ小程序)中,使用非内置列表写法时,若z-paging在swiper-item内存在无法获取slot插入的cell高度的问题
|
||||
// 通过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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
// z-paging配置文件
|
||||
|
||||
let config = null;
|
||||
let getedStorage = false;
|
||||
const storageKey = 'Z-PAGING-CONFIG-STORAGE-KEY'
|
||||
|
||||
function setConfig(value) {
|
||||
try {
|
||||
uni.setStorageSync(storageKey, value);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function getConfig() {
|
||||
try {
|
||||
if (getedStorage) {
|
||||
return config;
|
||||
}
|
||||
config = uni.getStorageSync(storageKey);
|
||||
getedStorage = true;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
setConfig,
|
||||
getConfig
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
// [z-paging]常量
|
||||
|
||||
export default {
|
||||
// 当前版本号
|
||||
version: '2.8.8',
|
||||
// 延迟操作的通用时间
|
||||
delayTime: 100,
|
||||
// 请求失败时候全局emit使用的key
|
||||
errorUpdateKey: 'z-paging-error-emit',
|
||||
// 全局emit complete的key
|
||||
completeUpdateKey: 'z-paging-complete-emit',
|
||||
// z-paging缓存的前缀key
|
||||
cachePrefixKey: 'z-paging-cache',
|
||||
|
||||
// 虚拟列表中列表index的key
|
||||
listCellIndexKey: 'zp_index',
|
||||
// 虚拟列表中列表的唯一key
|
||||
listCellIndexUniqueKey: 'zp_unique_index'
|
||||
}
|
||||
45
uni_modules/z-paging/components/z-paging/js/z-paging-enum.js
Normal file
45
uni_modules/z-paging/components/z-paging/js/z-paging-enum.js
Normal file
@@ -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',
|
||||
// 总是缓存,每次列表刷新(下拉刷新、调用reload等)都会更新缓存
|
||||
Always: 'always'
|
||||
}
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
// z-paging国际化(支持中文、中文繁体和英文)
|
||||
|
||||
const i18nUpdateKey = 'z-paging-i18n-update';
|
||||
|
||||
const refresherDefaultText = {
|
||||
'en': 'Pull down to refresh',
|
||||
'zh-cn': '继续下拉刷新',
|
||||
'zh-hant-cn': '繼續下拉重繪',
|
||||
}
|
||||
const refresherPullingText = {
|
||||
'en': 'Release to refresh',
|
||||
'zh-cn': '松开立即刷新',
|
||||
'zh-hant-cn': '鬆開立即重繪',
|
||||
}
|
||||
const refresherRefreshingText = {
|
||||
'en': 'Refreshing...',
|
||||
'zh-cn': '正在刷新...',
|
||||
'zh-hant-cn': '正在重繪...',
|
||||
}
|
||||
|
||||
const loadingMoreDefaultText = {
|
||||
'en': 'Click to load more',
|
||||
'zh-cn': '点击加载更多',
|
||||
'zh-hant-cn': '點擊加載更多',
|
||||
}
|
||||
const loadingMoreLoadingText = {
|
||||
'en': 'Loading...',
|
||||
'zh-cn': '正在加载...',
|
||||
'zh-hant-cn': '正在加載...',
|
||||
}
|
||||
const loadingMoreNoMoreText = {
|
||||
'en': 'No more data',
|
||||
'zh-cn': '没有更多了',
|
||||
'zh-hant-cn': '沒有更多了',
|
||||
}
|
||||
const loadingMoreFailText = {
|
||||
'en': 'Load failed,click to reload',
|
||||
'zh-cn': '加载失败,点击重新加载',
|
||||
'zh-hant-cn': '加載失敗,點擊重新加載',
|
||||
}
|
||||
|
||||
const emptyViewText = {
|
||||
'en': 'No data',
|
||||
'zh-cn': '没有数据哦~',
|
||||
'zh-hant-cn': '沒有數據哦~',
|
||||
}
|
||||
|
||||
const emptyViewReloadText = {
|
||||
'en': 'Reload',
|
||||
'zh-cn': '重新加载',
|
||||
'zh-hant-cn': '重新加載',
|
||||
}
|
||||
|
||||
const emptyViewErrorText = {
|
||||
'en': 'Sorry,load failed',
|
||||
'zh-cn': '很抱歉,加载失败',
|
||||
'zh-hant-cn': '很抱歉,加載失敗',
|
||||
}
|
||||
|
||||
const refresherUpdateTimeText = {
|
||||
'en': 'Last update: ',
|
||||
'zh-cn': '最后更新:',
|
||||
'zh-hant-cn': '最後更新:',
|
||||
}
|
||||
|
||||
const refresherUpdateTimeNoneText = {
|
||||
'en': 'None',
|
||||
'zh-cn': '无',
|
||||
'zh-hant-cn': '無',
|
||||
}
|
||||
|
||||
const refresherUpdateTimeTodayText = {
|
||||
'en': 'Today',
|
||||
'zh-cn': '今天',
|
||||
'zh-hant-cn': '今天',
|
||||
}
|
||||
|
||||
const refresherUpdateTimeYesterdayText = {
|
||||
'en': 'Yesterday',
|
||||
'zh-cn': '昨天',
|
||||
'zh-hant-cn': '昨天',
|
||||
}
|
||||
|
||||
// 插件内部使用,请勿直接调用
|
||||
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';
|
||||
}
|
||||
|
||||
// 获取当前语言,格式为: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];
|
||||
}
|
||||
|
||||
function setLanguage(myLanguage) {
|
||||
uni.setStorageSync(i18nUpdateKey, myLanguage);
|
||||
uni.$emit(i18nUpdateKey, myLanguage);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
refresherDefaultText,
|
||||
refresherPullingText,
|
||||
refresherRefreshingText,
|
||||
loadingMoreDefaultText,
|
||||
loadingMoreLoadingText,
|
||||
loadingMoreNoMoreText,
|
||||
loadingMoreFailText,
|
||||
emptyViewText,
|
||||
emptyViewReloadText,
|
||||
emptyViewErrorText,
|
||||
getPrivateLanguage,
|
||||
getLanguage,
|
||||
getLanguageName,
|
||||
setLanguage,
|
||||
refresherUpdateTimeText,
|
||||
refresherUpdateTimeNoneText,
|
||||
refresherUpdateTimeTodayText,
|
||||
refresherUpdateTimeYesterdayText
|
||||
}
|
||||
@@ -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转i18n local
|
||||
function handleLanguage2Local(callback) {
|
||||
_addHandleByKey(language2LocalKey, callback);
|
||||
return this;
|
||||
}
|
||||
|
||||
// 拦截&处理系统language转i18n 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
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,36 +1,22 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
// 使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法
|
||||
// [z-paging]使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法
|
||||
|
||||
const ZPagingMixin = {
|
||||
export default {
|
||||
onPullDownRefresh() {
|
||||
if (this.isPagingRefNotFound()) {
|
||||
return;
|
||||
}
|
||||
this.$refs.paging.reload();
|
||||
if (this.isPagingRefNotFound()) return;
|
||||
this.$refs.paging.reload().catch(() => {});
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (this.isPagingRefNotFound()) {
|
||||
return;
|
||||
}
|
||||
if (this.isPagingRefNotFound()) return;
|
||||
this.$refs.paging.updatePageScrollTop(e.scrollTop);
|
||||
if (e.scrollTop < 10) {
|
||||
this.$refs.paging.doChatRecordLoadMore();
|
||||
}
|
||||
e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.isPagingRefNotFound()) {
|
||||
return;
|
||||
}
|
||||
this.$refs.paging.doLoadMore();
|
||||
if (this.isPagingRefNotFound()) return;
|
||||
this.$refs.paging.pageReachBottom();
|
||||
},
|
||||
methods: {
|
||||
isPagingRefNotFound() {
|
||||
return !this.$refs.paging || this.$refs.paging === undefined;
|
||||
return !this.$refs.paging;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ZPagingMixin;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,43 +1,39 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
// z-paging工具类
|
||||
// [z-paging]工具类
|
||||
|
||||
import zI18n from './z-paging-i18n'
|
||||
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 configLoaded = false;
|
||||
let cachedSystemInfo = null;
|
||||
const timeoutMap = {};
|
||||
|
||||
//判断两个数组是否相等
|
||||
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;
|
||||
// 获取默认配置信息
|
||||
function gc(key, defaultValue) {
|
||||
// 这里return一个函数以解决在vue3+appvue中,props默认配置读取在main.js之前执行导致uni.$zp全局配置无效的问题。相当于props的default中传入一个带有返回值的函数
|
||||
return () => {
|
||||
// 处理z-paging全局配置
|
||||
_handleDefaultConfig();
|
||||
// 如果全局配置不存在,则返回默认值
|
||||
if (!config) return defaultValue;
|
||||
const value = config[key];
|
||||
// 如果全局配置存在但对应的配置项不存在,则返回默认值;反之返回配置项
|
||||
return value === undefined ? defaultValue : value;
|
||||
};
|
||||
}
|
||||
|
||||
//获取最终的touch位置
|
||||
function getCommonTouch(e) {
|
||||
// 获取最终的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 !== {}) {
|
||||
} else if (e.datail && e.datail != {}) {
|
||||
touch = e.datail;
|
||||
} else {
|
||||
return {
|
||||
touchX: 0,
|
||||
touchY: 0
|
||||
}
|
||||
return { touchX: 0, touchY: 0 }
|
||||
}
|
||||
return {
|
||||
touchX: touch.clientX,
|
||||
@@ -45,135 +41,282 @@ function getCommonTouch(e) {
|
||||
};
|
||||
}
|
||||
|
||||
//判断当前手势是否在z-paging内触发
|
||||
// 判断当前手势是否在z-paging内触发
|
||||
function getTouchFromZPaging(target) {
|
||||
if (target && target.tagName && target.tagName !== 'BODY' && target.tagName !== 'UNI-PAGE-BODY') {
|
||||
var classList = target.classList;
|
||||
if (classList && classList.contains('zp-paging-touch-view')) {
|
||||
return true;
|
||||
const classList = target.classList;
|
||||
if (classList && classList.contains('z-paging-content')) {
|
||||
// 此处额外记录当前z-paging是否是页面滚动、是否滚动到了顶部、是否是聊天记录模式以传给renderjs。避免不同z-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 false;
|
||||
return { isFromZp: false };
|
||||
}
|
||||
}
|
||||
|
||||
//获取z-paging所在的parent
|
||||
// 递归获取z-paging所在的parent,如果查找不到则返回null
|
||||
function getParent(parent) {
|
||||
if (!parent) {
|
||||
return null;
|
||||
}
|
||||
if (parent.$refs.paging) {
|
||||
return parent;
|
||||
}
|
||||
if (!parent) return null;
|
||||
if (parent.$refs.paging) return parent;
|
||||
return getParent(parent.$parent);
|
||||
}
|
||||
|
||||
//打印错误信息
|
||||
// 打印错误信息
|
||||
function consoleErr(err) {
|
||||
console.error(`[z-paging]${err}`);
|
||||
}
|
||||
|
||||
//打印警告信息
|
||||
function consoleWarn(warn) {
|
||||
console.warn(`[z-paging]${warn}`);
|
||||
}
|
||||
|
||||
//设置下拉刷新时间
|
||||
function setRefesrherTime(time, key) {
|
||||
try {
|
||||
let datas = getRefesrherTime();
|
||||
if (!datas) {
|
||||
datas = {};
|
||||
}
|
||||
datas[key] = time;
|
||||
uni.setStorageSync(storageKey, datas);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
//获取下拉刷新时间
|
||||
function getRefesrherTime() {
|
||||
try {
|
||||
const datas = uni.getStorageSync(storageKey);
|
||||
return datas;
|
||||
} catch {
|
||||
return null;
|
||||
// 延时操作,如果key存在,调用时清除对应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;
|
||||
}
|
||||
|
||||
//通过下拉刷新标识key获取下拉刷新时间
|
||||
// 设置下拉刷新时间
|
||||
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();
|
||||
if (datas) {
|
||||
const data = datas[key];
|
||||
if (data) {
|
||||
return data;
|
||||
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或者rpx转为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、appBaseInfo和windowInfo中的信息,因此仅整合这两个信息数据
|
||||
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、appBaseInfo和windowInfo都可以从各自专属的api中获取,则整合它们的数据
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
// 是否是promise
|
||||
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 null;
|
||||
return newObj;
|
||||
}
|
||||
|
||||
//通过下拉刷新标识key获取下拉刷新时间(格式化之后)
|
||||
function getRefesrherFormatTimeByKey(key) {
|
||||
const time = getRefesrherTimeByKey(key);
|
||||
let timeText = zI18n['refresherUpdateTimeNoneText'][zI18n.getLanguage()];
|
||||
if (time) {
|
||||
timeText = _timeFormat(time);
|
||||
// 对短时间内重复插入的数据进行整合,并一次性插入
|
||||
function useBufferedInsert(fn, delay = 50) {
|
||||
let buffer = [];
|
||||
let timer = null;
|
||||
let latestArgs = [];
|
||||
return function insertBuffered(data, ...args) {
|
||||
const newData = Object.prototype.toString.call(data) !== '[object Array]' ? [data] : data;
|
||||
buffer.push(...newData);
|
||||
latestArgs = args;
|
||||
if (!timer) {
|
||||
timer = setTimeout(() => {
|
||||
fn(buffer.length === 1 ? buffer[0] : buffer, ...latestArgs);
|
||||
buffer = [];
|
||||
timer = null;
|
||||
}, buffer.length === 1 ? 10 : delay);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ------------------ 私有方法 ------------------------
|
||||
// 处理全局配置
|
||||
function _handleDefaultConfig() {
|
||||
// 确保只加载一次全局配置
|
||||
if (configLoaded) return;
|
||||
// 优先从config.js中读取
|
||||
if (zLocalConfig && Object.keys(zLocalConfig).length) {
|
||||
config = zLocalConfig;
|
||||
}
|
||||
return `${zI18n['refresherUpdateTimeText'][zI18n.getLanguage()]}${timeText}`;
|
||||
// 如果在config.js中读取不到,则尝试到uni.$zp读取
|
||||
if (!config && uni.$zp) {
|
||||
config = uni.$zp.config;
|
||||
}
|
||||
// 将config中的短横线写法全部转为驼峰写法,使得读取配置时可以直接通过key去匹配,而非读取每个配置时候再去转,减少不必要的性能开支
|
||||
config = config ? Object.keys(config).reduce((result, key) => {
|
||||
result[_toCamelCase(key)] = config[key];
|
||||
return result;
|
||||
}, {}) : null;
|
||||
configLoaded = true;
|
||||
}
|
||||
|
||||
function _timeFormat(time) {
|
||||
// 时间格式化
|
||||
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 = zI18n['refresherUpdateTimeTodayText'][zI18n.getLanguage()];
|
||||
dayStr = textMap.today;
|
||||
} else if (disTime === -86400000) {
|
||||
dayStr = zI18n['refresherUpdateTimeYesterdayText'][zI18n.getLanguage()];
|
||||
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();
|
||||
if (showYear) {
|
||||
return `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`;
|
||||
} else {
|
||||
return `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`;
|
||||
}
|
||||
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();
|
||||
if (str.length === 1) {
|
||||
return '0' + str;
|
||||
}
|
||||
return str;
|
||||
return str.length === 1 ? '0' + str : str;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
// 驼峰转短横线
|
||||
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,
|
||||
arrayIsEqual,
|
||||
getCommonTouch,
|
||||
getTouch,
|
||||
getTouchFromZPaging,
|
||||
getParent,
|
||||
convertToPx,
|
||||
getTime,
|
||||
getInstanceId,
|
||||
consoleErr,
|
||||
consoleWarn
|
||||
delay,
|
||||
wait,
|
||||
isPromise,
|
||||
addUnit,
|
||||
deepCopy,
|
||||
rpx2px,
|
||||
getSystemInfoSync,
|
||||
useBufferedInsert
|
||||
};
|
||||
|
||||
@@ -1,205 +0,0 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
|
||||
//微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新,降低逻辑层与视图层的通信折损,提升性能
|
||||
|
||||
function propObserver(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = ownerInstance.getState();
|
||||
state.currentInstance = instance;
|
||||
var dataset = instance.getDataset();
|
||||
var loading = dataset.loading == true;
|
||||
if (newValue.indexOf('end') != -1) {
|
||||
_setTransform('translateY(0px)', instance)
|
||||
state.moveDistance = 0;
|
||||
} else if (newValue.indexOf('begin') != -1) {
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
_setTransformValue(refresherThreshold, instance, state);
|
||||
}
|
||||
}
|
||||
|
||||
function touchstart(e, ownerInstance) {
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance)) {
|
||||
return;
|
||||
}
|
||||
var touch = _getCommonTouch(e);
|
||||
state.startY = touch.touchY;
|
||||
state.lastRefresherTouchmove = touch;
|
||||
ownerInstance.callMethod('_handleRefresherTouchstart', touch);
|
||||
}
|
||||
|
||||
function touchmove(e, ownerInstance) {
|
||||
var touch = _getCommonTouch(e);
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var dataset = instance.getDataset();
|
||||
var refresherThreshold = dataset.refresherthreshold;
|
||||
var isTouchmoving = _getIsTrue(instance.getDataset().istouchmoving);
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance)) {
|
||||
return;
|
||||
}
|
||||
if (!_getAngleIsInRange(e, touch, state, dataset)) {
|
||||
return;
|
||||
}
|
||||
var moveDistance = _getMoveDistance(e, instance);
|
||||
if (moveDistance < 0) {
|
||||
return;
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
_setTransformValue(moveDistance, instance, state);
|
||||
var oldRefresherStatus = state.refresherStatus;
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
state.refresherStatus = 1;
|
||||
} else {
|
||||
state.refresherStatus = 0;
|
||||
}
|
||||
if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || !isTouchmoving) {
|
||||
ownerInstance.callMethod('_handleRefresherTouchmove', moveDistance, touch);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function touchend(e, ownerInstance) {
|
||||
var touch = _getCommonTouch(e);
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var dataset = instance.getDataset();
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance)) {
|
||||
return;
|
||||
}
|
||||
state.refresherReachMaxAngle = true;
|
||||
|
||||
var isTouchmoving = _getIsTrue(instance.getDataset().istouchmoving);
|
||||
if (!isTouchmoving) {
|
||||
return;
|
||||
}
|
||||
var oldMoveDistance = state.moveDistance;
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
var moveDistance = _getMoveDistance(e, instance);
|
||||
ownerInstance.callMethod('_handleRefresherTouchend', moveDistance);
|
||||
if (oldMoveDistance < refresherThreshold) {
|
||||
return;
|
||||
}
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
moveDistance = refresherThreshold;
|
||||
}
|
||||
_setTransformValue(moveDistance, instance, state)
|
||||
}
|
||||
|
||||
|
||||
function _setTransformValue(value, instance, state) {
|
||||
value = value || 0;
|
||||
state.moveDistance = value;
|
||||
_setTransform('translateY(' + value + 'px)', instance);
|
||||
}
|
||||
|
||||
function _setTransform(transform, instance) {
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: transform,
|
||||
'-webkit-transform': transform
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function _getMoveDistance(e, instance) {
|
||||
var state = instance.getState()
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
var touch = _getCommonTouch(e);
|
||||
var moveDistance = touch.touchY - state.startY;
|
||||
moveDistance = _getFinalRefresherMoveDistance(moveDistance, refresherThreshold);
|
||||
return moveDistance;
|
||||
}
|
||||
|
||||
function _getCommonTouch(e) {
|
||||
var 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
|
||||
};
|
||||
}
|
||||
|
||||
function _getFinalRefresherMoveDistance(moveDistance, refresherThreshold) {
|
||||
refresherThreshold = parseFloat(refresherThreshold);
|
||||
moveDistance = moveDistance * 0.7;
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
moveDistance = refresherThreshold + (moveDistance - refresherThreshold) * 0.3;
|
||||
}
|
||||
return moveDistance;
|
||||
}
|
||||
|
||||
|
||||
function _getRefresherTouchDisabled(e, instance) {
|
||||
var dataset = instance.getDataset();
|
||||
var loading = _getIsTrue(dataset.loading);
|
||||
var useChatRecordMode = _getIsTrue(dataset.usechatrecordmode);
|
||||
var refresherEnabled = _getIsTrue(dataset.refresherenabled);
|
||||
var useCustomRefresher = _getIsTrue(dataset.usecustomrefresher);
|
||||
var usePageScroll = _getIsTrue(dataset.usepagescroll);
|
||||
var pageScrollTop = parseFloat(dataset.pagescrolltop);
|
||||
var wxsIsScrollTopInTopRange = _getIsTrue(dataset.wxsisscrolltopintoprange);
|
||||
var scrollTop = parseFloat(dataset.scrolltop);
|
||||
var res = loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher || (
|
||||
usePageScroll && useCustomRefresher && pageScrollTop > 10) || (!(
|
||||
usePageScroll && useCustomRefresher) && !wxsIsScrollTopInTopRange);
|
||||
return res;
|
||||
}
|
||||
|
||||
function _getAngleIsInRange(e, touch, state, dataset) {
|
||||
var refresherMaxAngle = dataset.refreshermaxangle;
|
||||
var refresherAecc = _getIsTrue(dataset.refresheraecc);
|
||||
var lastRefresherTouchmove = state.lastRefresherTouchmove;
|
||||
var moveDistance = state.moveDistance;
|
||||
var refresherReachMaxAngle = state.refresherReachMaxAngle;
|
||||
if (!lastRefresherTouchmove) {
|
||||
return true;
|
||||
}
|
||||
if (refresherMaxAngle >= 0 && refresherMaxAngle <= 90 && lastRefresherTouchmove) {
|
||||
if (!refresherAecc && refresherReachMaxAngle != null && !refresherReachMaxAngle) {
|
||||
return false;
|
||||
}
|
||||
var x = Math.abs(touch.touchX - lastRefresherTouchmove.touchX);
|
||||
var y = Math.abs(touch.touchY - lastRefresherTouchmove.touchY);
|
||||
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
|
||||
if (x && y) {
|
||||
var angle = Math.asin(y / z) / Math.PI * 180;
|
||||
if (angle < refresherMaxAngle) {
|
||||
state.lastRefresherTouchmove = touch;
|
||||
state.refresherReachMaxAngle = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
state.lastRefresherTouchmove = touch;
|
||||
return true;
|
||||
}
|
||||
|
||||
function _getIsTrue(value) {
|
||||
value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
return value == true || value == 'true';
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
propObserver: propObserver
|
||||
}
|
||||
@@ -1,58 +1,67 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
// 使用renderjs在app-vue和h5中对touchmove事件冒泡进行处理
|
||||
// [z-paging]使用renderjs在app-vue和h5中对touchmove事件冒泡进行处理
|
||||
|
||||
import zUtils from '../js/z-paging-utils'
|
||||
var data = {
|
||||
renderScrollTop: 0,
|
||||
renderUsePageScroll: false,
|
||||
renderIsIos: uni.getSystemInfoSync().platform === 'ios',
|
||||
import u from '../js/z-paging-utils'
|
||||
const data = {
|
||||
startY: 0,
|
||||
isTouchFromZPaging: false
|
||||
isTouchFromZPaging: false,
|
||||
isUsePageScroll: false,
|
||||
isReachedTop: true,
|
||||
isIosAndH5: false,
|
||||
useChatRecordMode: false,
|
||||
appLaunched: false
|
||||
}
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
this._handleTouch();
|
||||
if (window) {
|
||||
this._handleTouch();
|
||||
// #ifdef APP-VUE
|
||||
this.$ownerInstance.callMethod('_handlePageLaunch');
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//接收逻辑层发送的数据
|
||||
renderPropScrollTopChange(newVal, oldVal, ownerVm, vm) {
|
||||
data.renderScrollTop = newVal;
|
||||
// 接收逻辑层发送的数据(是否是ios+h5)
|
||||
renderPropIsIosAndH5Change(newVal) {
|
||||
if (newVal === -1) return;
|
||||
data.isIosAndH5 = newVal;
|
||||
},
|
||||
renderPropUsePageScrollChange(newVal, oldVal, ownerVm, vm) {
|
||||
if(newVal !== -1){
|
||||
data.renderUsePageScroll = newVal;
|
||||
}
|
||||
},
|
||||
//拦截处理touch事件
|
||||
|
||||
// 拦截处理touch事件
|
||||
_handleTouch() {
|
||||
if (window && !window.$zPagingRenderJsInited) {
|
||||
if (!window.$zPagingRenderJsInited) {
|
||||
window.$zPagingRenderJsInited = true;
|
||||
window.addEventListener('touchstart', this._handleTouchstart, {
|
||||
passive: true
|
||||
})
|
||||
window.addEventListener('touchmove', this._handleTouchmove, {
|
||||
passive: false
|
||||
})
|
||||
window.addEventListener('touchstart', this._handleTouchstart, { passive: true })
|
||||
window.addEventListener('touchmove', this._handleTouchmove, { passive: false })
|
||||
}
|
||||
},
|
||||
// 处理touch开始
|
||||
_handleTouchstart(e) {
|
||||
const touch = zUtils.getCommonTouch(e);
|
||||
const touch = u.getTouch(e);
|
||||
data.startY = touch.touchY;
|
||||
data.isTouchFromZPaging = zUtils.getTouchFromZPaging(e.target);
|
||||
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 = zUtils.getCommonTouch(e);
|
||||
var moveY = touch.touchY - data.startY;
|
||||
if ((data.isTouchFromZPaging && data.renderScrollTop < 1 && moveY > 0) || (data.isTouchFromZPaging && data.renderIsIos && !data.renderUsePageScroll && moveY < 0)) {
|
||||
const touch = u.getTouch(e);
|
||||
const moveY = touch.touchY - data.startY;
|
||||
// 如果是在z-paging内触摸并且(是在顶部位置且是下拉的情况下(或不是聊天记录滚动模式并且在iOS+h5+scroll-view并且是往上拉的情况:避免在此平台中滚动到底部后上拉有个系统灰色遮罩导致列表被短暂锁定的问题))
|
||||
// (data.useChatRecordMode ? moveY < 0 : moveY > 0)是为了判断是否是上拉的情况,聊天记录模式列表倒置,因此moveY < 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) {
|
||||
// 阻止事件冒泡,以避免在一些平台中下拉刷新时整个page跟着一起下拉&在iOS+h5+scroll-view中在底部上拉有个系统灰色遮罩导致列表被短暂锁定的问题
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 移除touch相关事件监听
|
||||
_removeAllEventListener(){
|
||||
window.removeEventListener('touchstart');
|
||||
window.removeEventListener('touchmove');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,87 +1,115 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
// 微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新,降低逻辑层与视图层的通信折损,提升性能
|
||||
// [z-paging]微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新,降低逻辑层与视图层的通信折损,提升性能
|
||||
|
||||
var currentMoveDistance = 0;
|
||||
var currentDis = 0;
|
||||
var isPCFlag = -1;
|
||||
var startY = -1;
|
||||
|
||||
function propObserver(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = ownerInstance.getState();
|
||||
state.currentInstance = instance;
|
||||
var dataset = instance.getDataset();
|
||||
// 监听js层传过来的数据
|
||||
function propObserver(newVal, oldVal, ownerIns, ins) {
|
||||
var state = ownerIns.getState() || {};
|
||||
state.currentIns = ins;
|
||||
var dataset = ins.getDataset();
|
||||
var loading = dataset.loading == true;
|
||||
if (newValue.indexOf('end') != -1) {
|
||||
_setTransform('translateY(0px)', instance)
|
||||
state.moveDistance = 0;
|
||||
state.oldMoveDistance = 0;
|
||||
currentMoveDistance = 0;
|
||||
} else if (newValue.indexOf('begin') != -1) {
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
_setTransformValue(refresherThreshold, instance, state);
|
||||
// 如果是下拉刷新结束,更新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);
|
||||
}
|
||||
}
|
||||
|
||||
function touchstart(e, ownerInstance) {
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var state = instance.getState();
|
||||
var dataset = instance.getDataset();
|
||||
var isTouchEnded = state.isTouchEnded;
|
||||
if (_getRefresherTouchDisabled(e, instance, 0)) {
|
||||
return;
|
||||
// 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;
|
||||
}
|
||||
state.oldMoveDistance = 0;
|
||||
var touch = _getCommonTouch(e);
|
||||
var loading = _getIsTrue(dataset.loading);
|
||||
var isTouchEnded = state.isTouchEnded;
|
||||
state.oldMoveDis = 0;
|
||||
var touch = _getTouch(e);
|
||||
var loading = _isTrue(dataset.loading);
|
||||
state.startY = touch.touchY;
|
||||
state.lastRefresherTouchmove = touch;
|
||||
startY = state.startY;
|
||||
state.lastTouch = touch;
|
||||
if (!loading && isTouchEnded) {
|
||||
state.isTouchmoving = false;
|
||||
}
|
||||
state.isTouchEnded = false;
|
||||
ownerInstance.callMethod('_handleRefresherTouchstart', touch);
|
||||
// 通知js层touch开始
|
||||
ownerIns.callMethod('_handleRefresherTouchstart', touch);
|
||||
}
|
||||
|
||||
function touchmove(e, ownerInstance) {
|
||||
var touch = _getCommonTouch(e);
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var dataset = instance.getDataset();
|
||||
// touch中
|
||||
function touchmove(e, ownerIns) {
|
||||
var touch = _getTouch(e);
|
||||
var ins = _getIns(ownerIns);
|
||||
var dataset = ins.getDataset();
|
||||
var refresherThreshold = dataset.refresherthreshold;
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance, 1)) {
|
||||
_handleTouchMovePullingDown(state, ownerInstance, false);
|
||||
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;
|
||||
// 如果需要监听touch方向的改变
|
||||
if (watchTouchDirectionChange) {
|
||||
moveDisObj = _getMoveDis(e, ins);
|
||||
moveDis = moveDisObj.currentDis;
|
||||
prevent = moveDisObj.isDown;
|
||||
var direction = prevent ? 'top' : 'bottom';
|
||||
// 确保只在touch方向改变时通知一次js层,而不是touchmove中持续通知
|
||||
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)) {
|
||||
_handleTouchMovePullingDown(state, ownerInstance, false);
|
||||
_handlePullingDown(state, ownerIns, false);
|
||||
return true;
|
||||
}
|
||||
var moveDistanceObj = _getMoveDistance(e, instance);
|
||||
var moveDistance = moveDistanceObj.currentMoveDistance;
|
||||
var prevent = moveDistanceObj.isDown;
|
||||
if (moveDistance < 0) {
|
||||
_setTransformValue(0, instance, state);
|
||||
_handleTouchMovePullingDown(state, ownerInstance, false);
|
||||
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) {
|
||||
ownerInstance.callMethod('_handleScrollViewDisableBounce', {
|
||||
bounce: false
|
||||
});
|
||||
// 如果是用户下拉并且需要触发下拉刷新,需要通知js层将列表禁止滚动,防止在下拉刷新过程中列表也可以滚动导致的下拉刷新偏移过大的问题(在下拉刷新过程中仅通知一次)
|
||||
ownerIns.callMethod('_handleScrollViewBounce', { bounce: false });
|
||||
state.disabledBounce = true;
|
||||
_handleTouchMovePullingDown(state, ownerInstance, prevent);
|
||||
_handlePullingDown(state, ownerIns, prevent);
|
||||
return !prevent;
|
||||
}
|
||||
_setTransformValue(moveDistance, instance, state);
|
||||
// 更新transform
|
||||
_setTransformValue(moveDis, ins, state, false);
|
||||
var oldRefresherStatus = state.refresherStatus;
|
||||
var dataset = instance.getDataset();
|
||||
var oldIsTouchmoving = _getIsTrue(dataset.oldistouchmoving);
|
||||
var oldIsTouchmoving = _isTrue(dataset.oldistouchmoving);
|
||||
var hasTouchmove = _isTrue(dataset.hastouchmove);
|
||||
var isTouchmoving = state.isTouchmoving;
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
state.refresherStatus = 1;
|
||||
} else {
|
||||
state.refresherStatus = 0;
|
||||
}
|
||||
state.refresherStatus = moveDis >= refresherThreshold ? (refresherF2Enabled && moveDis > refresherF2Threshold ? 'goF2' : 'releaseToRefresh') : 'default';
|
||||
if (!isTouchmoving) {
|
||||
state.isTouchmoving = true;
|
||||
isTouchmoving = true;
|
||||
@@ -89,70 +117,67 @@ function touchmove(e, ownerInstance) {
|
||||
if (state.isTouchEnded) {
|
||||
state.isTouchEnded = false;
|
||||
}
|
||||
if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving !=
|
||||
isTouchmoving) {
|
||||
ownerInstance.callMethod('_handleRefresherTouchmove', moveDistance, touch);
|
||||
// 如果需要实时监听下拉位置偏移,则需要实时通知js层,此操作会使wxs层与js层频繁通信从而导致在一些性能较差设备中下拉刷新卡顿
|
||||
if (hasTouchmove) {
|
||||
ownerIns.callMethod('_handleWxsPullingDown', { moveDis: moveDis, diffDis: moveDisObj.diffDis });
|
||||
}
|
||||
_handleTouchMovePullingDown(state, ownerInstance, prevent);
|
||||
// 在下拉刷新状态改变时通知js层
|
||||
if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving != isTouchmoving) {
|
||||
ownerIns.callMethod('_handleRefresherTouchmove', moveDis, touch);
|
||||
}
|
||||
_handlePullingDown(state, ownerIns, prevent);
|
||||
return !prevent;
|
||||
}
|
||||
|
||||
function touchend(e, ownerInstance) {
|
||||
var touch = _getCommonTouch(e);
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var dataset = instance.getDataset();
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance, 2)) {
|
||||
return;
|
||||
// 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;
|
||||
}
|
||||
state.refresherReachMaxAngle = true;
|
||||
if (_touchDisabled(e, ins, 2)) return;
|
||||
state.reachMaxAngle = true;
|
||||
state.hitReachMaxAngleCount = 0;
|
||||
state.disabledBounce = false;
|
||||
state.fixedIsTopHitCount = 0;
|
||||
//ownerInstance.callMethod('_handleScrollViewDisableBounce', {bounce:true});
|
||||
var isTouchmoving = state.isTouchmoving;
|
||||
if (!isTouchmoving) {
|
||||
return;
|
||||
}
|
||||
if (!state.isTouchmoving) return;
|
||||
var oldRefresherStatus = state.refresherStatus;
|
||||
var oldMoveDistance = state.moveDistance;
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
var moveDistance = _getMoveDistance(e, instance).currentMoveDistance;
|
||||
if (!(moveDistance >= refresherThreshold && oldRefresherStatus === 1)) {
|
||||
var oldMoveDis = state.moveDis;
|
||||
var refresherThreshold = ins.getDataset().refresherthreshold;
|
||||
var moveDis = _getMoveDis(e, ins).currentDis;
|
||||
if (!(moveDis >= refresherThreshold && oldRefresherStatus === 'releaseToRefresh')) {
|
||||
state.isTouchmoving = false;
|
||||
}
|
||||
ownerInstance.callMethod('_handleRefresherTouchend', moveDistance);
|
||||
// 通知js层touch结束
|
||||
ownerIns.callMethod('_handleRefresherTouchend', moveDis);
|
||||
state.isTouchEnded = true;
|
||||
if (oldMoveDistance < refresherThreshold) {
|
||||
return;
|
||||
}
|
||||
if (oldMoveDis < refresherThreshold) return;
|
||||
var animate = false;
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
moveDistance = refresherThreshold;
|
||||
var isIos13 = _getIsTrue(dataset.isios13);
|
||||
if (isIos13) {
|
||||
animate = true;
|
||||
}
|
||||
if (moveDis >= refresherThreshold) {
|
||||
moveDis = refresherThreshold;
|
||||
animate = true;
|
||||
}
|
||||
_setTransformValue(moveDistance, instance, state, animate);
|
||||
_setTransformValue(moveDis, ins, state, animate);
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
// 判断是否是pc平台
|
||||
function isPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (var v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
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;
|
||||
|
||||
// 在pc平台监听mousedown、mousemove、mouseup等相关事件并转为对应touch事件处理,使得在pc平台也支持通过鼠标进行下拉刷新
|
||||
|
||||
function mousedown(e, ins) {
|
||||
if (!isPC()) return;
|
||||
touchstart(e, ins);
|
||||
@@ -160,8 +185,7 @@ function mousedown(e, ins) {
|
||||
}
|
||||
|
||||
function mousemove(e, ins) {
|
||||
if (!isPC()) return;
|
||||
if (!movable) return;
|
||||
if (!isPC() || !movable) return;
|
||||
touchmove(e, ins);
|
||||
}
|
||||
|
||||
@@ -178,70 +202,71 @@ function mouseleave(e, ins) {
|
||||
// #endif
|
||||
|
||||
|
||||
function _setTransformValue(value, instance, state, animate = false) {
|
||||
// 修改视图层transform
|
||||
function _setTransformValue(value, ins, state, animate) {
|
||||
value = value || 0;
|
||||
if (state.moveDistance == value) {
|
||||
return;
|
||||
}
|
||||
state.moveDistance = value;
|
||||
_setTransform('translateY(' + value + 'px)', instance, animate);
|
||||
if (state.moveDis == value) return;
|
||||
state.moveDis = value;
|
||||
_setTransform('translateY(' + value + 'px)', ins, animate, '');
|
||||
}
|
||||
|
||||
function _setTransform(transform, instance, animate = false) {
|
||||
if (transform == 'translateY(0px)') {
|
||||
transform = 'none';
|
||||
}
|
||||
instance.requestAnimationFrame(function() {
|
||||
// 设置视图层transform,直接在视图层操作下拉刷新,使得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) {
|
||||
instance.setStyle({
|
||||
'transform': transform,
|
||||
'transition': 'transform .1s linear',
|
||||
})
|
||||
} else {
|
||||
instance.setStyle({
|
||||
'transform': transform
|
||||
})
|
||||
stl['transition'] = 'transform .1s linear';
|
||||
}
|
||||
if (transition.length) {
|
||||
stl['transition'] = transition;
|
||||
}
|
||||
ins.setStyle(stl);
|
||||
})
|
||||
}
|
||||
|
||||
function _getMoveDistance(e, instance) {
|
||||
var state = instance.getState();
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold;
|
||||
var refresherOutRate = instance.getDataset().refresheroutrate;
|
||||
refresherThreshold = parseFloat(refresherThreshold);
|
||||
refresherOutRate = parseFloat(refresherOutRate);
|
||||
var touch = _getCommonTouch(e);
|
||||
var moveDistance = touch.touchY - state.startY;
|
||||
var oldMoveDistance = state.oldMoveDistance || 0;
|
||||
state.oldMoveDistance = moveDistance;
|
||||
var diffDis = moveDistance - oldMoveDistance;
|
||||
// 进一步处理下拉刷新的偏移数据
|
||||
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) {
|
||||
diffDis = diffDis * 0.85;
|
||||
if (currentMoveDistance > refresherThreshold) {
|
||||
// 对偏移量进行进一步处理,通过refresherPullRate等配置进行约束
|
||||
diffDis = diffDis * refresherPullRate;
|
||||
if (currentDis > refresherThreshold) {
|
||||
diffDis = diffDis * (1 - refresherOutRate);
|
||||
}
|
||||
}
|
||||
currentMoveDistance += diffDis;
|
||||
if (currentMoveDistance < 0) {
|
||||
currentMoveDistance = 0;
|
||||
}
|
||||
// 控制diffDis过大的情况,比如进入页面突然猛然下拉,此时diffDis不应进行太大的偏移
|
||||
diffDis = diffDis > 100 ? diffDis / 100 : (diffDis > 20 ? diffDis / 2.2 : diffDis);
|
||||
currentDis += diffDis;
|
||||
currentDis = Math.max(0, currentDis);
|
||||
return {
|
||||
currentMoveDistance: currentMoveDistance,
|
||||
currentDis: currentDis,
|
||||
diffDis: diffDis,
|
||||
isDown: diffDis > 0
|
||||
};
|
||||
}
|
||||
|
||||
function _getCommonTouch(e) {
|
||||
var touch = null;
|
||||
// 获取经过统一格式包装的当前touch对象
|
||||
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 !== {}) {
|
||||
} else if (e.datail && e.datail != {}) {
|
||||
touch = e.datail;
|
||||
} else {
|
||||
touch = e;
|
||||
}
|
||||
return {
|
||||
touchX: touch.clientX,
|
||||
@@ -249,87 +274,98 @@ function _getCommonTouch(e) {
|
||||
};
|
||||
}
|
||||
|
||||
function _getRefresherTouchDisabled(e, instance, processTag) {
|
||||
var dataset = instance.getDataset();
|
||||
var state = instance.getState();
|
||||
var loading = _getIsTrue(dataset.loading);
|
||||
var useChatRecordMode = _getIsTrue(dataset.usechatrecordmode);
|
||||
var refresherEnabled = _getIsTrue(dataset.refresherenabled);
|
||||
var useCustomRefresher = _getIsTrue(dataset.usecustomrefresher);
|
||||
var usePageScroll = _getIsTrue(dataset.usepagescroll);
|
||||
// 获取当前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;
|
||||
var isIos = _getIsTrue(dataset.isios);
|
||||
if (!isIos && finalScrollTop == (state.startScrollTop || 0) && finalScrollTop <= 105) {
|
||||
// 是否要处理滚动到顶部scrollTop不为0时候的容错,为解决在安卓中scroll-view有概率滚动到顶部时scrollTop不为0导致下拉刷新判断异常,但此方案会导致某些情况(例如滚动到距离顶部10px处)下拉抖动,因此改为通过获取zp-scroll-view的节点信息中的scrollTop进行验证的方案
|
||||
var handleFaultTolerantMove = false;
|
||||
if (handleFaultTolerantMove && finalScrollTop == (state.startScrollTop || 0) && finalScrollTop <= 105) {
|
||||
fixedIsTop = true;
|
||||
}
|
||||
var fixedIsTopHitCount = state.fixedIsTopHitCount || 0;
|
||||
if (fixedIsTop) {
|
||||
fixedIsTopHitCount++;
|
||||
if (fixedIsTopHitCount <= 3) {
|
||||
fixedIsTopHitCount ++;
|
||||
if (fixedIsTopHitCount <= 2) {
|
||||
fixedIsTop = false;
|
||||
}
|
||||
state.fixedIsTopHitCount = fixedIsTopHitCount;
|
||||
} else {
|
||||
state.fixedIsTopHitCount = 0;
|
||||
}
|
||||
if (!isIos && processTag === 0) {
|
||||
if (handleFaultTolerantMove && processTag === 0) {
|
||||
state.startScrollTop = finalScrollTop || 0;
|
||||
}
|
||||
if (!isIos && processTag === 2) {
|
||||
if (handleFaultTolerantMove && processTag === 2) {
|
||||
fixedIsTop = true;
|
||||
}
|
||||
var res = loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher || ((
|
||||
usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) || ((
|
||||
!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop);
|
||||
return res;
|
||||
return loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher ||
|
||||
((usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) ||
|
||||
((!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop);
|
||||
}
|
||||
|
||||
// 判断下拉刷新的角度是否在要求范围内
|
||||
function _getAngleIsInRange(e, touch, state, dataset) {
|
||||
var refresherMaxAngle = dataset.refreshermaxangle;
|
||||
var refresherAecc = _getIsTrue(dataset.refresheraecc);
|
||||
var lastRefresherTouchmove = state.lastRefresherTouchmove;
|
||||
var refresherReachMaxAngle = state.refresherReachMaxAngle;
|
||||
var moveDistance = state.oldMoveDistance;
|
||||
if (!lastRefresherTouchmove) {
|
||||
return true;
|
||||
}
|
||||
if (refresherMaxAngle >= 0 && refresherMaxAngle <= 90 && lastRefresherTouchmove) {
|
||||
if ((!moveDistance || moveDistance < 1) && !refresherAecc && refresherReachMaxAngle != null && !
|
||||
refresherReachMaxAngle) {
|
||||
return false;
|
||||
}
|
||||
var x = Math.abs(touch.touchX - lastRefresherTouchmove.touchX);
|
||||
var y = Math.abs(touch.touchY - lastRefresherTouchmove.touchY);
|
||||
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中使用下拉刷新时,横向切换swiper途中手未离开屏幕还可以下拉刷新的问题
|
||||
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 < refresherMaxAngle) {
|
||||
if (angle < maxAngle) {
|
||||
// 如果角度小于配置要求,则return,同时通过hitReachMaxAngleCount控制角度判断的灵敏程度以最大程度兼容各种使用场景
|
||||
var hitReachMaxAngleCount = state.hitReachMaxAngleCount || 0;
|
||||
state.hitReachMaxAngleCount = ++hitReachMaxAngleCount;
|
||||
if (state.hitReachMaxAngleCount > 2) {
|
||||
state.lastRefresherTouchmove = touch;
|
||||
state.refresherReachMaxAngle = false;
|
||||
state.lastTouch = touch;
|
||||
state.reachMaxAngle = false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
state.lastRefresherTouchmove = touch;
|
||||
state.lastTouch = touch;
|
||||
return true;
|
||||
}
|
||||
|
||||
function _handleTouchMovePullingDown(state, instance, onPullingDown) {
|
||||
// 进一步处理是否在下拉刷新并通知js层
|
||||
function _handlePullingDown(state, ins, onPullingDown) {
|
||||
var oldOnPullingDown = state.onPullingDown || false;
|
||||
if (oldOnPullingDown != onPullingDown) {
|
||||
instance.callMethod('_handleWxsOnPullingDown', onPullingDown);
|
||||
ins.callMethod('_handleWxsPullingDownStatusChange', onPullingDown);
|
||||
}
|
||||
state.onPullingDown = onPullingDown;
|
||||
}
|
||||
|
||||
function _getIsTrue(value) {
|
||||
// 判断js层传过来的值是否为true
|
||||
function _isTrue(value) {
|
||||
value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
return value == true || value == 'true';
|
||||
}
|
||||
|
||||
@@ -1,156 +0,0 @@
|
||||
<!-- z-paging -->
|
||||
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群:790460711 -->
|
||||
|
||||
<!-- 上拉加载更多view -->
|
||||
<template>
|
||||
<view class="zp-load-more-container" :style="[config.loadingMoreCustomStyle]">
|
||||
<text
|
||||
:class="config.defaultThemeStyle==='white'?'zp-loading-more-line zp-loading-more-line-white':'zp-loading-more-line zp-loading-more-line-black'"
|
||||
:style="[config.loadingMoreNoMoreLineCustomStyle]"
|
||||
v-if="config.showLoadingMoreNoMoreLine&&config.loadingStatus===2"></text>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<image v-if="config.loadingStatus===1&&config.loadingMoreLoadingIconCustomImage.length"
|
||||
:src="config.loadingMoreLoadingIconCustomImage" class="zp-loading-more-line-loading-custom-image">
|
||||
</image>
|
||||
<image
|
||||
v-if="config.loadingStatus===1&&config.loadingMoreLoadingIconType==='flower'&&!config.loadingMoreLoadingIconCustomImage.length"
|
||||
class="zp-loading-more-line-loading-image" :style="[config.loadingMoreLoadingIconCustomStyle]"
|
||||
:src="base64Flower">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view>
|
||||
<loading-indicator v-if="config.loadingStatus===1" :animating="true"
|
||||
class="zp-loading-more-line-loading-image">
|
||||
</loading-indicator>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<text
|
||||
v-if="config.loadingStatus===1&&config.loadingMoreLoadingIconType==='circle'&&!config.loadingMoreLoadingIconCustomImage.length"
|
||||
:class="config.defaultThemeStyle==='white'?'zp-loading-more-line-loading-view zp-loading-more-line-loading-view-white':'zp-loading-more-line-loading-view zp-loading-more-line-loading-view-black'"
|
||||
:style="[config.loadingMoreLoadingIconCustomStyle]"></text>
|
||||
<text
|
||||
:class="config.defaultThemeStyle==='white'?'zp-loading-more-text zp-loading-more-text-white':'zp-loading-more-text zp-loading-more-text-black'">{{ownLoadingMoreText}}</text>
|
||||
<text
|
||||
:class="config.defaultThemeStyle==='white'?'zp-loading-more-line zp-loading-more-line-white':'zp-loading-more-line zp-loading-more-line-black'"
|
||||
:style="[config.loadingMoreNoMoreLineCustomStyle]"
|
||||
v-if="config.showLoadingMoreNoMoreLine&&config.loadingStatus===2"></text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import zStatic from './z-paging-static'
|
||||
export default {
|
||||
name: 'z-paging-refresh',
|
||||
data() {
|
||||
return {
|
||||
base64Arrow: zStatic.base64Arrow,
|
||||
base64Flower: zStatic.base64Flower,
|
||||
loadingStatusTextMap: {
|
||||
0: this.config.loadingMoreDefaultText,
|
||||
1: this.config.loadingMoreLoadingText,
|
||||
2: this.config.loadingMoreNoMoreText,
|
||||
3: this.config.loadingMoreFailText,
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ['config'],
|
||||
computed: {
|
||||
ownLoadingMoreText() {
|
||||
if (this.config.loadingMoreText.length) {
|
||||
return this.config.loadingMoreText;
|
||||
}
|
||||
return this.loadingStatusTextMap[this.config.loadingStatus];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "./z-paging-static.css";
|
||||
|
||||
.zp-load-more-container {
|
||||
height: 80rpx;
|
||||
font-size: 26rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
clear: both;
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-custom-image {
|
||||
color: #a4a4a4;
|
||||
margin-right: 8rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: loading-circle 1s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-view {
|
||||
margin-right: 8rpx;
|
||||
width: 22rpx;
|
||||
height: 23rpx;
|
||||
border: 3rpx solid #dddddd;
|
||||
border-radius: 50%;
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: loading-circle 1s linear infinite;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-view-black {
|
||||
border-color: #c8c8c8;
|
||||
border-top-color: #444444;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-loading-view-white {
|
||||
border-color: #aaaaaa;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
|
||||
.zp-loading-more-text {
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 30rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-loading-more-text-black {
|
||||
color: #a4a4a4;
|
||||
}
|
||||
|
||||
.zp-loading-more-text-white {
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
.zp-loading-more-line {
|
||||
height: 1px;
|
||||
width: 100rpx;
|
||||
margin: 0rpx 10rpx;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-black {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.zp-loading-more-line-white {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
|
||||
@keyframes loading-circle {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
|
||||
// 使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法
|
||||
|
||||
const ZPagingMixin = {
|
||||
onPullDownRefresh(){
|
||||
if(this.isPagingRefNotFound()){
|
||||
return;
|
||||
}
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if(this.isPagingRefNotFound()){
|
||||
return;
|
||||
}
|
||||
this.$refs.paging.updatePageScrollTop(e.scrollTop);
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.isPagingRefNotFound()){
|
||||
return;
|
||||
}
|
||||
this.$refs.paging.doLoadMore();
|
||||
},
|
||||
methods: {
|
||||
isPagingRefNotFound(){
|
||||
return !this.$refs.paging || this.$refs.paging === undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ZPagingMixin;
|
||||
@@ -1,173 +0,0 @@
|
||||
<!-- z-paging -->
|
||||
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||
<!-- 反馈QQ群:790460711 -->
|
||||
|
||||
<!-- 下拉刷新view -->
|
||||
<template>
|
||||
<view style="height: 100%;">
|
||||
<view class="zp-custom-refresher-container" style="height: 100%;">
|
||||
<view class="zp-custom-refresher-left">
|
||||
<image v-if="refresherStatus!==2" :class="refresherLeftImageClass"
|
||||
:style="[{'filter' :defaultThemeStyle==='white'?'brightness(10)':''}]" :src="base64Arrow">
|
||||
</image>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<image v-else class="zp-loading-more-line-loading-image zp-custom-refresher-left-image" :src="base64Flower">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view v-else>
|
||||
<loading-indicator class="zp-custom-refresher-left-image" :animating="true"></loading-indicator>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view
|
||||
:class="defaultThemeStyle==='white'?'zp-custom-refresher-right zp-custom-refresher-right-white':'zp-custom-refresher-right zp-custom-refresher-right-black'">
|
||||
<text class="zp-custom-refresher-right-text">{{refresherStatusTextMap[refresherStatus]}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import zStatic from './z-paging-static'
|
||||
export default {
|
||||
name: 'z-paging-refresh',
|
||||
data() {
|
||||
return {
|
||||
base64Arrow: zStatic.base64Arrow,
|
||||
base64Flower: zStatic.base64Flower,
|
||||
refresherStatusTextMap: {
|
||||
0: this.refresherDefaultText,
|
||||
1: this.refresherPullingText,
|
||||
2: this.refresherRefreshingText
|
||||
},
|
||||
refresherLeftImageClass: 'zp-custom-refresher-left-image',
|
||||
};
|
||||
},
|
||||
props: ['refresherStatus', 'defaultThemeStyle', 'refresherDefaultText', 'refresherPullingText',
|
||||
'refresherPullingText', 'refresherRefreshingText'
|
||||
],
|
||||
watch: {
|
||||
refresherStatus(newVal, oldVal) {
|
||||
if (newVal === 0 && oldVal !== 0) {
|
||||
this.refresherLeftImageClass = 'zp-custom-refresher-left-image zp-custom-refresher-arrow-down';
|
||||
}
|
||||
if (newVal !== 0 && oldVal === 0) {
|
||||
this.refresherLeftImageClass = 'zp-custom-refresher-left-image zp-custom-refresher-arrow-top';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "./z-paging-static.css";
|
||||
.zp-custom-refresher-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-left {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-left-image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
transform: rotate(180deg);
|
||||
margin-right: 8rpx;
|
||||
/* #ifdef APP-NVUE */
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
transition-duration: .2s;
|
||||
transition-property: transform;
|
||||
color: #666666;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-arrow-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: refresher-arrow-top 0.25s linear;
|
||||
-webkitanimation: refresher-arrow-top 0.25s linear;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(0deg);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-arrow-down {
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: refresher-arrow-down 0.25s linear;
|
||||
-webkit-animation: refresher-arrow-down 0.25s linear;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(180deg);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.zp-custom-refresher-right {
|
||||
font-size: 26rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-right-text {
|
||||
/* #ifdef APP-NVUE */
|
||||
font-size: 28rpx;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
/* #endif */
|
||||
color: #555555
|
||||
}
|
||||
|
||||
.zp-custom-refresher-right-black {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.zp-custom-refresher-right-white {
|
||||
color: #efefef;
|
||||
}
|
||||
|
||||
@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>
|
||||
@@ -1,205 +0,0 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
|
||||
//微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新,降低逻辑层与视图层的通信折损,提升性能
|
||||
|
||||
function propObserver(newValue, oldValue, ownerInstance, instance) {
|
||||
var state = ownerInstance.getState();
|
||||
state.currentInstance = instance;
|
||||
var dataset = instance.getDataset();
|
||||
var loading = dataset.loading == true;
|
||||
if (newValue.indexOf('end') != -1) {
|
||||
_setTransform('translateY(0px)', instance)
|
||||
state.moveDistance = 0;
|
||||
} else if (newValue.indexOf('begin') != -1) {
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
_setTransformValue(refresherThreshold, instance, state);
|
||||
}
|
||||
}
|
||||
|
||||
function touchstart(e, ownerInstance) {
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance)) {
|
||||
return;
|
||||
}
|
||||
var touch = _getCommonTouch(e);
|
||||
state.startY = touch.touchY;
|
||||
state.lastRefresherTouchmove = touch;
|
||||
ownerInstance.callMethod('_handleRefresherTouchstart', touch);
|
||||
}
|
||||
|
||||
function touchmove(e, ownerInstance) {
|
||||
var touch = _getCommonTouch(e);
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var dataset = instance.getDataset();
|
||||
var refresherThreshold = dataset.refresherthreshold;
|
||||
var isTouchmoving = _getIsTrue(instance.getDataset().istouchmoving);
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance)) {
|
||||
return;
|
||||
}
|
||||
if (!_getAngleIsInRange(e, touch, state, dataset)) {
|
||||
return;
|
||||
}
|
||||
var moveDistance = _getMoveDistance(e, instance);
|
||||
if (moveDistance < 0) {
|
||||
return;
|
||||
}
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
_setTransformValue(moveDistance, instance, state);
|
||||
var oldRefresherStatus = state.refresherStatus;
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
state.refresherStatus = 1;
|
||||
} else {
|
||||
state.refresherStatus = 0;
|
||||
}
|
||||
if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || !isTouchmoving) {
|
||||
ownerInstance.callMethod('_handleRefresherTouchmove', moveDistance, touch);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function touchend(e, ownerInstance) {
|
||||
var touch = _getCommonTouch(e);
|
||||
var instance = ownerInstance.getState().currentInstance;
|
||||
var dataset = instance.getDataset();
|
||||
var state = instance.getState();
|
||||
if (_getRefresherTouchDisabled(e, instance)) {
|
||||
return;
|
||||
}
|
||||
state.refresherReachMaxAngle = true;
|
||||
|
||||
var isTouchmoving = _getIsTrue(instance.getDataset().istouchmoving);
|
||||
if (!isTouchmoving) {
|
||||
return;
|
||||
}
|
||||
var oldMoveDistance = state.moveDistance;
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
var moveDistance = _getMoveDistance(e, instance);
|
||||
ownerInstance.callMethod('_handleRefresherTouchend', moveDistance);
|
||||
if (oldMoveDistance < refresherThreshold) {
|
||||
return;
|
||||
}
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
moveDistance = refresherThreshold;
|
||||
}
|
||||
_setTransformValue(moveDistance, instance, state)
|
||||
}
|
||||
|
||||
|
||||
function _setTransformValue(value, instance, state) {
|
||||
value = value || 0;
|
||||
state.moveDistance = value;
|
||||
_setTransform('translateY(' + value + 'px)', instance);
|
||||
}
|
||||
|
||||
function _setTransform(transform, instance) {
|
||||
instance.requestAnimationFrame(function() {
|
||||
instance.setStyle({
|
||||
transform: transform,
|
||||
'-webkit-transform': transform
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function _getMoveDistance(e, instance) {
|
||||
var state = instance.getState()
|
||||
var refresherThreshold = instance.getDataset().refresherthreshold
|
||||
var touch = _getCommonTouch(e);
|
||||
var moveDistance = touch.touchY - state.startY;
|
||||
moveDistance = _getFinalRefresherMoveDistance(moveDistance, refresherThreshold);
|
||||
return moveDistance;
|
||||
}
|
||||
|
||||
function _getCommonTouch(e) {
|
||||
var 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
|
||||
};
|
||||
}
|
||||
|
||||
function _getFinalRefresherMoveDistance(moveDistance, refresherThreshold) {
|
||||
refresherThreshold = parseFloat(refresherThreshold);
|
||||
moveDistance = moveDistance * 0.7;
|
||||
if (moveDistance >= refresherThreshold) {
|
||||
moveDistance = refresherThreshold + (moveDistance - refresherThreshold) * 0.3;
|
||||
}
|
||||
return moveDistance;
|
||||
}
|
||||
|
||||
|
||||
function _getRefresherTouchDisabled(e, instance) {
|
||||
var dataset = instance.getDataset();
|
||||
var loading = _getIsTrue(dataset.loading);
|
||||
var useChatRecordMode = _getIsTrue(dataset.usechatrecordmode);
|
||||
var refresherEnabled = _getIsTrue(dataset.refresherenabled);
|
||||
var useCustomRefresher = _getIsTrue(dataset.usecustomrefresher);
|
||||
var usePageScroll = _getIsTrue(dataset.usepagescroll);
|
||||
var pageScrollTop = parseFloat(dataset.pagescrolltop);
|
||||
var wxsIsScrollTopInTopRange = _getIsTrue(dataset.wxsisscrolltopintoprange);
|
||||
var scrollTop = parseFloat(dataset.scrolltop);
|
||||
var res = loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher || (
|
||||
usePageScroll && useCustomRefresher && pageScrollTop > 10) || (!(
|
||||
usePageScroll && useCustomRefresher) && !wxsIsScrollTopInTopRange);
|
||||
return res;
|
||||
}
|
||||
|
||||
function _getAngleIsInRange(e, touch, state, dataset) {
|
||||
var refresherMaxAngle = dataset.refreshermaxangle;
|
||||
var refresherAecc = _getIsTrue(dataset.refresheraecc);
|
||||
var lastRefresherTouchmove = state.lastRefresherTouchmove;
|
||||
var moveDistance = state.moveDistance;
|
||||
var refresherReachMaxAngle = state.refresherReachMaxAngle;
|
||||
if (!lastRefresherTouchmove) {
|
||||
return true;
|
||||
}
|
||||
if (refresherMaxAngle >= 0 && refresherMaxAngle <= 90 && lastRefresherTouchmove) {
|
||||
if (!refresherAecc && refresherReachMaxAngle != null && !refresherReachMaxAngle) {
|
||||
return false;
|
||||
}
|
||||
var x = Math.abs(touch.touchX - lastRefresherTouchmove.touchX);
|
||||
var y = Math.abs(touch.touchY - lastRefresherTouchmove.touchY);
|
||||
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
|
||||
if (x && y) {
|
||||
var angle = Math.asin(y / z) / Math.PI * 180;
|
||||
if (angle < refresherMaxAngle) {
|
||||
state.lastRefresherTouchmove = touch;
|
||||
state.refresherReachMaxAngle = false;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
state.lastRefresherTouchmove = touch;
|
||||
return true;
|
||||
}
|
||||
|
||||
function _getIsTrue(value) {
|
||||
value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||
return value == true || value == 'true';
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
touchstart: touchstart,
|
||||
touchmove: touchmove,
|
||||
touchend: touchend,
|
||||
propObserver: propObserver
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
/* z-paging
|
||||
github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
反馈QQ群:790460711
|
||||
|
||||
公用的静态css资源 */
|
||||
|
||||
.zp-loading-more-line-loading-image {
|
||||
margin-right: 8rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
animation: loading-flower 1s steps(12) infinite;
|
||||
/* #endif */
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
@keyframes loading-flower {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
// z-paging
|
||||
// github地址:https://github.com/SmileZXLee/uni-z-paging
|
||||
// dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935
|
||||
// 反馈QQ群:790460711
|
||||
|
||||
// 公用的静态图片资源
|
||||
const base64Arrow =
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAD1BMVEVHcExRUVFMTExRUVFRUVE9CdWsAAAABHRSTlMAjjrY9ZnUjwAAAQFJREFUWMPt2MsNgzAMgGEEE1B1gKJmAIRYoCH7z9RCXrabh33iYktcIv35EEg5ZBh07pvxJU6MFSPOSRnjnBUjUsaciRUjMsb4xIoRCWNiYsUInzE5sWKEyxiYWDbyefqHx1zIeiYTk7mQYziTYecxHvEJjwmIT3hMQELCYSISEg4TkZj0mYTEpM8kJCU9JiMp6TEZyUmbAUhO2gxAQNJiIAKSFgMRmNQZhMCkziAEJTUGIyipMRjBSZkhCE7KDEFIUmTeGCHJxWz0zXaE0GTCG8ZFtEaS347r/1fe11YyHYVfubxayfjoHmc0YYwmmmiiiSaaaKLJ7ckyz5ve+dw3Xw2emdwm9xSbAAAAAElFTkSuQmCC';
|
||||
const 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';
|
||||
const base64Empty = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAbUExURdvc3EdwTMLBwcjIyLSzs/Hx8ff39////19dXXz7IJEAAAAFdFJOU/4A6J9QDyyutAAAB5VJREFUeNrtnM1z4jYYxhUHkR4hdu9eU7Z75Ct7jgPbs9ZZmSuTrUWPmXTA186e+LMrf0uWLMtf2WkHXQgzln88et5XeiVMwPQdGrhCrpAr5Aq5Qv4TkJ07OGQFMLp1B4VYCz+kDblDQhJGeH4eEDLBYdLOHwaDWNBPIeHLYJAJ3meQ83IoCMTHDBKOBoKYGOeM8G0gyD0LObnDQB5ZSCtTNCBfsM9AboaBPLCQcDAIM1zht/dQEkMsd1DjI4hpw2YzMtBJeBbydWpCTJs3YDKGX62YgfGoVwi9KwtZJAzcYHHRm7sYCKD390nQSIoO5JGZIEOYxNoZ4+deISYLyeL5hLHbJ2QK98W0kudMgJe9Qh73odhO+KZHyNYGvgQS9gmJKhUigwSj3iBPUhXxePWmxBqHw0Mej9WQ3qILVjLC177yxNxXQ/7uK+Mn1aNVLsGsBTaWrSAPobYl0aUHt2fIs2Rgz7c9QYL0pSTkSzILLFtAJMH1cidN998T9E0/Sg73/pEEwrgkYRh86wlC949gJsR6EobBcz8hHOVgKYi2m6kZtodIkjEQvF3QjbGpmplB4/lRgJhxgRS2N15iijAvPmByDtCxfQhPJ8J4CR82rgCCBILarScw6X0OcMUyYrFVmbxErl0ZacFIoloOLdJAO42qY+NMDss2kKS8xmiZxcCpFKXWvpRGbQqJp5ixyRfJMmR6x0Fk+z29kmgWDYI5ziFbdug/84HxvduhWhLOJ2StPDQrMJPSjNANklh8QhB7dBO0yTGRwn1fkOk8rbQjiB8Ymww+JuiuN0icmSccK4naLMWYa/euL0+m23GyM8kgAc6sYeL4z04Qa4WjGepcKIliO8EUGSk7d9OGWOsoK31OSdy8TQZ59Y/hWbaV1IVs5/Ed6UzGK4nANAJiyGhRsZPUg2yzLe9hLyiJIyCaDU7udC2uy9pnkKvidlBUEltzFAqxRhBrBZm7HfZnjEQI3boqTsJq15PUDEaKZLgiJYc8OZtCtnM/4G93OFYooXpvdy0guwWWNQkEHl/j7Jw1XRmtlS9HYJkSPjk1IUnyyRqUKQn45NSDlP1mcg9i6En1ZU2IADnEtHF1Q+JwIcS/d5YakPuDUamEShGUHHikAz9oQCaE0CsrpYjDBVkEHQYdyK+EkKPhVErxqh1xbJ/oQf4gEeVsOIEc41WJNAwcd9GBfCZJezXsJhAvH+ImEEIOzlwXgpw5wQ0gH3MIOcsiQAahZuSD69/UQyxcQEggiQARQseVFO/ASAMCgM9gjkHZmhLENzi1AOhA7ullkMWUrfHKfpMiDBHtDIx6yCS6jseEnDUe7zcT6DGCtnrIY3olZw1hrPHkfucIAJa1EDu/lsVEyVmGGA67coKijeogFnMxlEaAV5ghRdDm1kDuuatZTJBGgJdOthIzsvZbDWRRuh6ScgR4EQLgagQvRQIxxQ4sxqcR4GE+c4CkjZQQW9YF89Y4OFAjOCki5KmiDxsBL3PlSJWlAFVogaoIePlYi2ClCJAHRa/cmre5eqTii4uvisqQJxqnip6pNd68DhEvyEs5xIyHBNdh4thCKhU++10kD7Gy1Up1A/o56FKuRJQWSFCuf8dpbisxhqHSKlSSgvG7VTaFKO5TzYD5VMPUxEB2YJNiqq3xYJ0KrroH8mq7xpoXqEZgfgNRUQsDtTVvUOk3sLUKbqrBr7YGvkCkQNC/9SA+vTYtvERrxiKEmcogk4ZqCLUd59MIEiFYHlIoxelCaJWDMmtOPIa80XVLbkb6hzaEwwTcPEmV4AIRlBGNIEmuJBFwLAZoHClJ36J8h+wxihpCqJosAnJrSKwEcQOFAFeWN4RQMYc0Ao4Jhg5gpASzyWcDvjpuDIlTkrGGJEro1rHIjHKR3wJCAj+z5oyi11gJBkXy9QFJIiAu78d+pgSjuWhGN0gUAZAcEncSJf4LRrZ8I94WEmcNCJJqBWYjVbE9bg2JxiyrViBWty6QvO56D8jPVWLA4ZX8dfkxvJJPl8t8aCX+pU/Iz1SCf7lc4OBK0OWfQaKLP0TKjj96VvIp+/BDZjwNKF2ItV2vN7sWStAl87oWkm3dZ+k3lEMoYXe8cT1eq2TOePJDD8KfQdxu6iEPxanUZa4HmZRq3dunGsj3BzFq6yD3wnZNX4n2emI2hXyXQpi6RRZdfSgxHNuxVZBFdyVeBPDmCsiksxKUiDAUEKuzkvRUEs0V08pjVyU2/yqFmF2VZGYop3peitdUiQd1pnrL7qTE01tPzE6eaEKm23dQwh2jNlbiay+/245zl94abw45CzNPyqYQ2++kxHGV1crWzg4A2yvR+BY7wziwnRLN7+O36aA54+ZKGjxZYK3txJpxQyUNn5GwtquII4+ACiWtnvawduu1A3SVtH5uhTvAVSpBG7fDYz6RQ+M6JWjmKm6g+RvTla9UMtspu+s+37VbVCupNqPx43CsNawSb1PbtcmDfQWmUILW7rRXSPHtSq5k5ur0a/hb7DQCUiW3G71ejX/wvV1kSoyNbp8Wvyqn1lCIKvl6gNDkNBYzt0GHdr+Pt9xGl1//ncAVcoVcIVfIFXKFXCFXyP8I8i8SyTW4yTz2lwAAAABJRU5ErkJggg=='
|
||||
const 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==';
|
||||
module.exports = {
|
||||
base64Arrow: base64Arrow,
|
||||
base64Flower: base64Flower,
|
||||
base64Empty: base64Empty,
|
||||
base64BackToTop: base64BackToTop
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user