代码更新
parent
0d7a24f708
commit
0760a83522
|
|
@ -108,6 +108,8 @@
|
||||||
"optionalSubjectList": true,
|
"optionalSubjectList": true,
|
||||||
"requireSubjectList": true,
|
"requireSubjectList": true,
|
||||||
"optionalSubject": true,
|
"optionalSubject": true,
|
||||||
"requireSubject": true
|
"requireSubject": true,
|
||||||
|
"unSortTypeList": true,
|
||||||
|
"useUnSortType": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ export default defineUniPages({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/city/index',
|
path: 'pages-sub/home/city/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: 'custom',
|
||||||
|
|
@ -98,71 +98,71 @@ export default defineUniPages({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/college/index',
|
path: 'pages-sub/home/college/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '大学',
|
navigationBarTitleText: '大学',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/career/index',
|
path: 'pages-sub/home/career/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '职业',
|
navigationBarTitleText: '职业',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/distinguish/index',
|
path: 'pages-sub/home/distinguish/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '大学甄别',
|
navigationBarTitleText: '大学甄别',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/evaluation/index',
|
path: 'pages-sub/home/evaluation/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '专业测评',
|
navigationBarTitleText: '专业测评',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/expand/index',
|
path: 'pages-sub/home/expand/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '查扩缩招',
|
navigationBarTitleText: '查扩缩招',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/line/index',
|
path: 'pages-sub/home/line/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '批次线',
|
navigationBarTitleText: '批次线',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/major/index',
|
path: 'pages-sub/home/major/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '专业',
|
navigationBarTitleText: '专业',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/rank/index',
|
path: 'pages-sub/home/rank/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '排名',
|
navigationBarTitleText: '排名',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/inputScore/index',
|
path: 'pages-sub/home/inputScore/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: 'custom',
|
||||||
navigationBarTitleText: '城市',
|
navigationBarTitleText: '输入成绩',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/home/schoolRank/index',
|
path: 'pages-sub/home/schoolRank/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationStyle: 'custom',
|
navigationStyle: 'custom',
|
||||||
|
|
@ -170,7 +170,7 @@ export default defineUniPages({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'pages/customerService/index/index',
|
path: 'pages-sub/customerService/index/index',
|
||||||
type: 'page',
|
type: 'page',
|
||||||
style: {
|
style: {
|
||||||
navigationBarTitleText: '在线客服',
|
navigationBarTitleText: '在线客服',
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ const { safeAreaInsets } = useNavbarWeixin()
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/customerService/index/index',
|
url: '/pages-sub/customerService/index/index',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { onMounted, reactive, ref } from 'vue'
|
|
||||||
|
|
||||||
// 用来设置 virBox 的高度 -- 为了帮助 list 去撑开父级,呈现滚动效果
|
|
||||||
const virHeight = ref(0)
|
|
||||||
const itemHeight = 40
|
|
||||||
const listObj = reactive({
|
|
||||||
list: [], // 用来做列表渲染
|
|
||||||
totalList: [], // 备份 myList
|
|
||||||
})
|
|
||||||
const transY = ref(0)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const myList = []
|
|
||||||
for (let i = 0; i < 10000; i++) {
|
|
||||||
myList.push(i) // 临时存储数据
|
|
||||||
}
|
|
||||||
listObj.totalList = myList // 因为 myList 外部无法访问到,备份一下
|
|
||||||
listObj.list = myList.slice(0, 30) // 把数据拿到后,先截取前 5 条
|
|
||||||
virHeight.value = itemHeight * myList.length // 让 scrollBox 呈现滚动条 -- 让 virBox 的高度变大(高度 = 每条的高度 * 总条数)
|
|
||||||
})
|
|
||||||
|
|
||||||
const onScroll = (e) => {
|
|
||||||
// e.detail.scrollTop 在 uniapp 的 scroll-view 组件中通常包含了滚动位置
|
|
||||||
const scrollTop = e.detail.scrollTop
|
|
||||||
console.log('滚动位置:', scrollTop)
|
|
||||||
|
|
||||||
// 计算当前应该显示的列表项范围
|
|
||||||
const start = Math.floor(scrollTop / itemHeight)
|
|
||||||
const end = Math.ceil((scrollTop + 200) / itemHeight) // 每次显示 5 条数据
|
|
||||||
|
|
||||||
// 更新列表数据
|
|
||||||
listObj.list = listObj.totalList.slice(start, end)
|
|
||||||
// 纵向偏移,把结构调整回来
|
|
||||||
transY.value = scrollTop
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- 使用 scroll-view 组件来实现滚动 -->
|
|
||||||
<scroll-view class="scrollBox" scroll-y="true" @scroll="onScroll">
|
|
||||||
<!-- 虚拟滚动容器,不需要实际渲染内容 -->
|
|
||||||
<view class="virBox" :style="{ height: this.virHeight * 2 + 'rpx' }"></view>
|
|
||||||
<!-- 列表渲染 -->
|
|
||||||
<view class="list" :style="{ transform: `translateY(${this.transY * 2}rpx)` }">
|
|
||||||
<view class="item" v-for="item in listObj.list" :key="item">
|
|
||||||
{{ item }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.scrollBox {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
.virBox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
position: absolute;
|
|
||||||
top: 0rpx;
|
|
||||||
left: 0rpx;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: violet;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
height: 80rpx;
|
|
||||||
line-height: 80rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 使用 scroll-view 组件来实现滚动 -->
|
||||||
|
<scroll-view
|
||||||
|
ref="list"
|
||||||
|
:scroll-y="true"
|
||||||
|
class="list-container"
|
||||||
|
@scroll="handleScroll"
|
||||||
|
:scroll-top="state.startOffset"
|
||||||
|
>
|
||||||
|
<view class="list-phantom" :style="{ height: `${listHeight}${itemSizeUnit}` }"></view>
|
||||||
|
<view class="list" :style="{ transform: getTransform }">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in visibleData"
|
||||||
|
class="list-item"
|
||||||
|
:key="index"
|
||||||
|
:ref="setItemRef"
|
||||||
|
:style="`height:${state.itemHeights[index]}${itemSizeUnit}`"
|
||||||
|
>
|
||||||
|
<!-- <slot name="cell" :item="item" :index="index"></slot> -->
|
||||||
|
<text class="">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted, computed } from 'vue'
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
listHeight: 0,
|
||||||
|
screenHeight: 0, // 屏幕高度即可视区域高度
|
||||||
|
startOffset: 0, // 顶部偏移量
|
||||||
|
startIndex: 0, // 可视化区域的数据开始下标
|
||||||
|
endIndex: 0, // 可视化区域的数据结束下标
|
||||||
|
itemHeights: [] as number[], // 用来存储每个列表项的高度
|
||||||
|
})
|
||||||
|
const props = defineProps({
|
||||||
|
listData: {
|
||||||
|
type: Array<{ name: string; id: number }>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
//每项高度
|
||||||
|
itemSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 200,
|
||||||
|
},
|
||||||
|
itemSizeUnit: {
|
||||||
|
type: String,
|
||||||
|
default: 'px',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
// const listHeight = computed(() => {
|
||||||
|
// return props.listData.length * props.itemSize
|
||||||
|
// })
|
||||||
|
|
||||||
|
const listHeight = computed(() => {
|
||||||
|
// 总高度是所有项高度的总和
|
||||||
|
return state.itemHeights.reduce((sum, height) => sum + height, 0) || 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const visibleCount = computed(() => {
|
||||||
|
return Math.ceil(state.screenHeight / props.itemSize) || 0
|
||||||
|
})
|
||||||
|
const getTransform = computed(() => {
|
||||||
|
return `translate3d(0,${state.startOffset}${props.itemSizeUnit},0)`
|
||||||
|
})
|
||||||
|
const visibleData = computed(() => {
|
||||||
|
return props.listData.slice(state.startIndex, Math.min(state.endIndex, props.listData.length))
|
||||||
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
init()
|
||||||
|
})
|
||||||
|
const init = () => {
|
||||||
|
getScreenHeight()
|
||||||
|
|
||||||
|
// 设置初始滚动距离 state.startIndex = 0 如果不是从第一个开始滚动 num为第几个开始 state.startIndex = num state.startOffset = num * props.itemSize
|
||||||
|
// state.startIndex = 0
|
||||||
|
state.startIndex = 0
|
||||||
|
state.startOffset = 0
|
||||||
|
state.endIndex = state.startIndex + visibleCount.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取屏幕高度即可视化区域高度
|
||||||
|
const getScreenHeight = () => {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: function (res) {
|
||||||
|
state.screenHeight = res.screenHeight
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 防抖 节流方法 debounce第三个参数没用 可以删除
|
||||||
|
const debounce = (fn, delay, _this) => {
|
||||||
|
var delay = delay || 200
|
||||||
|
var timer = null
|
||||||
|
return function () {
|
||||||
|
let self = _this
|
||||||
|
let args = arguments
|
||||||
|
timer && clearTimeout(timer)
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
timer = null
|
||||||
|
fn.apply(self, args)
|
||||||
|
}, delay)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleScroll = debounce(
|
||||||
|
(e) => {
|
||||||
|
//当前滚动位置
|
||||||
|
let scrollTop = e.detail.scrollTop
|
||||||
|
//开始索引
|
||||||
|
state.startIndex = Math.floor(scrollTop / props.itemSize)
|
||||||
|
//结束索引
|
||||||
|
state.endIndex = state.startIndex + visibleCount.value
|
||||||
|
//顶部偏移量
|
||||||
|
state.startOffset = scrollTop - (scrollTop % props.itemSize)
|
||||||
|
},
|
||||||
|
10,
|
||||||
|
'',
|
||||||
|
)
|
||||||
|
|
||||||
|
const itemRefs = ref([])
|
||||||
|
const setItemRef = (el) => {
|
||||||
|
if (el) {
|
||||||
|
itemRefs.value.push(el)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算每个列表项的高度
|
||||||
|
const calculateItemHeights = () => {
|
||||||
|
state.itemHeights = props.listData.map((_, index) => {
|
||||||
|
const refItem = itemRefs.value[index]
|
||||||
|
return refItem && refItem.$el ? refItem.$el.offsetHeight : props.itemSize // 如果有真实内容,则获取实际高度;否则,使用默认高度
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(itemRefs.value, () => {
|
||||||
|
calculateItemHeights()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听插槽内容变化,重新计算列表项高度
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.list-container {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
.list-phantom {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
.list-item {
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// 高校排名类型
|
||||||
|
import { getUnSortType } from '@/service/index/api'
|
||||||
|
|
||||||
|
type UnSortType = { type: number; name: string }[]
|
||||||
|
|
||||||
|
export let unSortTypeList = ref([])
|
||||||
|
export const useUnSortType = () => {
|
||||||
|
getUnSortType().then((res) => {
|
||||||
|
unSortTypeList.value = res.result as UnSortType
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -31,7 +31,7 @@ const value = ref('')
|
||||||
|
|
||||||
const handleChange = () => {
|
const handleChange = () => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/home/inputScore/index',
|
url: '/pages-sub/home/inputScore/index',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -61,7 +61,7 @@ const swiperList = [
|
||||||
|
|
||||||
const toSchool = (id: string) => {
|
const toSchool = (id: string) => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/home/schoolRank/index?type=${id}`,
|
url: `/pages-sub/home/schoolRank/index?type=${id}`,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -17,40 +17,55 @@ const subMenus = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: '找大学',
|
name: '找大学',
|
||||||
path: '/pages/home/college/index',
|
path: '/pages-sub/home/college/index',
|
||||||
icon: '/static/images/home/college.svg',
|
icon: '/static/images/home/college.svg',
|
||||||
},
|
},
|
||||||
{ id: 2, name: '查专业', path: '/pages/home/major/index', icon: '/static/images/home/major.svg' },
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '查专业',
|
||||||
|
path: '/pages-sub/home/major/index',
|
||||||
|
icon: '/static/images/home/major.svg',
|
||||||
|
},
|
||||||
// 看职业
|
// 看职业
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: '看职业',
|
name: '看职业',
|
||||||
path: '/pages/home/career/index',
|
path: '/pages-sub/home/career/index',
|
||||||
icon: '/static/images/home/career.svg',
|
icon: '/static/images/home/career.svg',
|
||||||
},
|
},
|
||||||
// 批次线
|
// 批次线
|
||||||
{ id: 4, name: '批次线', path: '/pages/home/line/index', icon: '/static/images/home/line.svg' },
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '批次线',
|
||||||
|
path: '/pages-sub/home/line/index',
|
||||||
|
icon: '/static/images/home/line.svg',
|
||||||
|
},
|
||||||
// 查位次
|
// 查位次
|
||||||
{ id: 5, name: '查位次', path: '/pages/home/rank/index', icon: '/static/images/home/rank.svg' },
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '查位次',
|
||||||
|
path: '/pages-sub/home/rank/index',
|
||||||
|
icon: '/static/images/home/rank.svg',
|
||||||
|
},
|
||||||
// 查扩缩招
|
// 查扩缩招
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
name: '查扩缩招',
|
name: '查扩缩招',
|
||||||
path: '/pages/home/expand/index',
|
path: '/pages-sub/home/expand/index',
|
||||||
icon: '/static/images/home/expand.svg',
|
icon: '/static/images/home/expand.svg',
|
||||||
},
|
},
|
||||||
// 专业测评
|
// 专业测评
|
||||||
{
|
{
|
||||||
id: 7,
|
id: 7,
|
||||||
name: '专业测评',
|
name: '专业测评',
|
||||||
path: '/pages/home/evaluation/index',
|
path: '/pages-sub/home/evaluation/index',
|
||||||
icon: '/static/images/home/evaluation.svg',
|
icon: '/static/images/home/evaluation.svg',
|
||||||
},
|
},
|
||||||
// 大学甄别
|
// 大学甄别
|
||||||
{
|
{
|
||||||
id: 8,
|
id: 8,
|
||||||
name: '大学甄别',
|
name: '大学甄别',
|
||||||
path: '/pages/home/distinguish/index',
|
path: '/pages-sub/home/distinguish/index',
|
||||||
icon: '/static/images/home/distinguish.svg',
|
icon: '/static/images/home/distinguish.svg',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<view class="flex flex-col text-[#000] ml-[32rpx]">
|
<view class="flex flex-col text-[#000] ml-[32rpx]">
|
||||||
<text class="mb-[12rpx] font-normal text-[28rpx]">专属客服为您服务</text>
|
<text class="mb-[12rpx] font-normal text-[28rpx]">专属客服为您服务</text>
|
||||||
<view class="flex items-center">
|
<view class="flex items-center">
|
||||||
<text class="text-[44rpx] font-medium">400-621-1003</text>
|
<text class="text-[44rpx] font-medium whitespace-nowrap">400-621-1003</text>
|
||||||
<view
|
<view
|
||||||
@click.stop="makePhoneCall"
|
@click.stop="makePhoneCall"
|
||||||
class="rounded-[8rpx] w-[88rpx] h-[44rpx] btn-border text-[#1580FF] text-[24rpx] font-normal flex items-center justify-center ml-[44rpx]"
|
class="rounded-[8rpx] w-[88rpx] h-[44rpx] btn-border text-[#1580FF] text-[24rpx] font-normal flex items-center justify-center ml-[44rpx]"
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<route lang="json5" type="page">
|
|
||||||
{
|
|
||||||
style: { navigationBarTitleText: '分包页面 标题' },
|
|
||||||
}
|
|
||||||
</route>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="text-center">
|
|
||||||
<view class="m-8">http://localhost:9000/#/pages-sub/demo/index</view>
|
|
||||||
<view class="text-green-500">分包页面demo</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
// code here
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
//
|
|
||||||
</style>
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useCityStore } from '@/store/city'
|
import { useCityStore } from '@/store/city'
|
||||||
import { useUserStore } from '@/store'
|
import { useUserStore } from '@/store/user'
|
||||||
import { City } from '@/types/app-type'
|
import { City } from '@/types/app-type'
|
||||||
|
|
||||||
const cityStore = useCityStore()
|
const cityStore = useCityStore()
|
||||||
|
|
@ -33,6 +33,12 @@ const navigatorBack = () => {
|
||||||
|
|
||||||
const chooseCity = (city: City) => {
|
const chooseCity = (city: City) => {
|
||||||
userStore.setUserCity(city)
|
userStore.setUserCity(city)
|
||||||
|
if (
|
||||||
|
userStore.userInfo.estimatedAchievement.cityCode &&
|
||||||
|
userStore.userInfo.estimatedAchievement.cityCode !== city.code
|
||||||
|
) {
|
||||||
|
userStore.clearUserEstimatedAchievement()
|
||||||
|
}
|
||||||
navigatorBack()
|
navigatorBack()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -33,7 +33,6 @@
|
||||||
value-key="code"
|
value-key="code"
|
||||||
label-key="name"
|
label-key="name"
|
||||||
v-model="term"
|
v-model="term"
|
||||||
@confirm="handleTerm"
|
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
@ -115,31 +114,28 @@ const toast = useToast()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|
||||||
// 学期
|
// 学期
|
||||||
const term = ref(userStore.userInfo.city.lizations[0].code)
|
const term = ref(userStore.userInfo.estimatedAchievement.year)
|
||||||
const termList = ref<{ name: string; code: number }[]>(userStore.userInfo.city.lizations)
|
const termList = ref<{ name: string; code: number }[]>(userStore.userInfo.city.lizations)
|
||||||
const handleTerm = () => {
|
|
||||||
// 选择了学期 匹配一下对应的 规则
|
|
||||||
}
|
|
||||||
|
|
||||||
const navigatorBack = () => {
|
const navigatorBack = () => {
|
||||||
uni.navigateBack()
|
uni.navigateBack()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输入成绩
|
// 输入成绩
|
||||||
const score = ref<number | ''>(userStore.userInfo.estimatedAchievement.score)
|
const score = ref<number | string>(userStore.userInfo.estimatedAchievement.score || '')
|
||||||
const handleChange = (e: any) => {
|
const handleChange = (e: any) => {
|
||||||
const _score = score.value || 0
|
const _score = Number(score.value) || 0
|
||||||
if (_score > userStore.userInfo.city.allscore) {
|
if (_score > userStore.userInfo.city.allscore) {
|
||||||
score.value = userStore.userInfo.city?.allscore
|
score.value = userStore.userInfo.city?.allscore
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 单选 必选学科
|
// 单选 必选学科
|
||||||
const requireSubject = ref(userStore.userInfo.estimatedAchievement.requireSubject?.code || '')
|
const requireSubject = ref(userStore.userInfo.estimatedAchievement.requireSubject.code || '')
|
||||||
|
|
||||||
// 任意选择科目
|
// 任意选择科目
|
||||||
const optionalSubject = ref(
|
const optionalSubject = ref(
|
||||||
userStore.userInfo.estimatedAchievement.optionSubject.map((item) => item.code),
|
userStore.userInfo.estimatedAchievement.optionalSubject.map((item) => item.code),
|
||||||
)
|
)
|
||||||
|
|
||||||
// 判断是否关闭按钮
|
// 判断是否关闭按钮
|
||||||
|
|
@ -152,23 +148,6 @@ const btnFlag = computed(() => {
|
||||||
return num
|
return num
|
||||||
})
|
})
|
||||||
|
|
||||||
const unsubscribe = userStore.$onAction(({ name, store, args, after, onError }) => {
|
|
||||||
const startTime = Date.now()
|
|
||||||
|
|
||||||
console.log(`Start "${name}" with params [${args.join(', ')}].`)
|
|
||||||
|
|
||||||
after((result) => {
|
|
||||||
console.log(`Finished "${name}" after ${Date.now() - startTime}ms.\nResult: ${result}.`)
|
|
||||||
})
|
|
||||||
|
|
||||||
onError((error) => {
|
|
||||||
console.warn(`Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// manually remove the listener
|
|
||||||
unsubscribe()
|
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
useRules()
|
useRules()
|
||||||
})
|
})
|
||||||
|
|
@ -0,0 +1,201 @@
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 如果页面中的cell高度是固定不变的,则不需要设置cell-height-mode,如果页面中高度是动态改变的,则设置cell-height-mode="dynamic" -->
|
||||||
|
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
|
||||||
|
<z-paging
|
||||||
|
ref="paging"
|
||||||
|
use-virtual-list
|
||||||
|
:force-close-inner-list="true"
|
||||||
|
cell-height-mode="dynamic"
|
||||||
|
@virtualListChange="virtualListChange"
|
||||||
|
@query="queryList"
|
||||||
|
>
|
||||||
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中,如果需要跟着滚动,则不要设置slot="top" -->
|
||||||
|
<template #top>
|
||||||
|
<view class="relative h-max" hover-class="none" :hover-stop-propagation="false">
|
||||||
|
<wd-navbar
|
||||||
|
title="院校排行榜"
|
||||||
|
left-arrow
|
||||||
|
@click-left="navigatorBack"
|
||||||
|
safeAreaInsetTop
|
||||||
|
:bordered="false"
|
||||||
|
custom-class="bg-transparent! z-[99]"
|
||||||
|
></wd-navbar>
|
||||||
|
<image
|
||||||
|
class="h-[400rpx] w-full mt-[-40rpx]"
|
||||||
|
:style="{ marginTop: `-${safeAreaInsets.top * 2}px` }"
|
||||||
|
src="/static/images/schoolRank/background.svg"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="h-[78rpx] w-[270rpx] absolute top-[249rpx] left-[102rpx]"
|
||||||
|
src="/static/images/schoolRank/title.svg"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="h-[190rpx] w-[190rpx] absolute top-[194rpx] left-[460rpx]"
|
||||||
|
src="/static/images/schoolRank/trophy.svg"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="flex items-center justify-center mt-[24rpx] px-[32rpx] w-full overflow-auto">
|
||||||
|
<view
|
||||||
|
:class="[
|
||||||
|
'swiper-box',
|
||||||
|
'flex',
|
||||||
|
'items-center',
|
||||||
|
'justify-center',
|
||||||
|
tabIndex === item.type ? 'active' : '',
|
||||||
|
]"
|
||||||
|
v-for="item in unSortTypeList"
|
||||||
|
:key="item.type"
|
||||||
|
@click="tabIndex = item.type"
|
||||||
|
>
|
||||||
|
{{ item.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
:id="`zp-id-${item.zp_index}`"
|
||||||
|
:key="item.zp_index"
|
||||||
|
v-for="(item, index) in schoolList"
|
||||||
|
@click="itemClick(item, item.zp_index)"
|
||||||
|
>
|
||||||
|
<view class="flex items-center py-[32rpx] w-full">
|
||||||
|
<text class="text-[28rpx] text-[#999] font-normal">{{ item.zp_index }}</text>
|
||||||
|
<image
|
||||||
|
class="w-[80rpx] h-[80rpx] ml-[18rpx] mr-[24rpx]"
|
||||||
|
src="/static/images/schoolRank/background.svg"
|
||||||
|
></image>
|
||||||
|
<view class="flex justify-between items-center flex-1">
|
||||||
|
<view class="flex flex-col" hover-class="none">
|
||||||
|
<text class="text-[28rpx] text-[#333] font-medium mb-[10rpx]">
|
||||||
|
{{ item.name }}
|
||||||
|
</text>
|
||||||
|
<text class="text-[22rpx] text-[#999] font-normal">北京.综合类</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex flex-col">
|
||||||
|
<text class="text-[28rpx] text-[#333] font-medium mb-[10rpx]">100</text>
|
||||||
|
<text class="text-[22rpx] text-[#999] font-normal">综合得分</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="w-full h-[2rpx] bg-[#eee]" hover-class="none"></view>
|
||||||
|
</view>
|
||||||
|
</z-paging>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import useNavbarWeixin from '@/hooks/useNavbarWeixin'
|
||||||
|
import { unSortTypeList, useUnSortType } from '@/hooks/useUnSortType'
|
||||||
|
|
||||||
|
const { safeAreaInsets } = useNavbarWeixin()
|
||||||
|
|
||||||
|
const navigatorBack = () => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabIndex = ref<number>(0)
|
||||||
|
|
||||||
|
const itemClick = (item, index) => {
|
||||||
|
console.log('点击了', item)
|
||||||
|
}
|
||||||
|
const tabsChange = (index) => {
|
||||||
|
tabIndex.value = index
|
||||||
|
// 当切换tab或搜索时请调用组件的reload方法,请勿直接调用:queryList方法!!
|
||||||
|
paging.value.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((option) => {
|
||||||
|
tabIndex.value = option?.type || '1'
|
||||||
|
})
|
||||||
|
|
||||||
|
const schoolList = ref([])
|
||||||
|
const paging = ref(null)
|
||||||
|
|
||||||
|
const queryList = (page: number, pageSize: number) => {
|
||||||
|
request(page, pageSize).then((res) => {
|
||||||
|
paging.value?.complete(res)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const virtualListChange = (_vList) => {
|
||||||
|
console.log('虚拟列表更新数据', _vList)
|
||||||
|
|
||||||
|
schoolList.value = _vList
|
||||||
|
}
|
||||||
|
|
||||||
|
const request = (page, pageSize) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const vList = Array.from({ length: 10 }).map((_, i) => {
|
||||||
|
return {
|
||||||
|
id: (page - 1) * pageSize + i + 1,
|
||||||
|
name: `第${(page - 1) * pageSize + i + 1}行`,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
resolve(vList)
|
||||||
|
}, 1000)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
useUnSortType()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.rank-body {
|
||||||
|
height: calc(100% - 400rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-box {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: #a28c6c;
|
||||||
|
background-color: #f5efe1;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-box:not(:last-child) {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #684817;
|
||||||
|
background: linear-gradient(270deg, #f2ce95 0%, #f8deba 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-detail {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #aaaaaa;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
176
src/pages.json
176
src/pages.json
|
|
@ -79,94 +79,6 @@
|
||||||
"navigationBarTitleText": "六维管家"
|
"navigationBarTitleText": "六维管家"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/customerService/index/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "在线客服",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/career/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "职业"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/city/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "城市"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/college/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "大学"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/distinguish/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "大学甄别"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/evaluation/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "专业测评"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/expand/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "查扩缩招"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/inputScore/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "城市"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/line/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "批次线"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/major/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "专业"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/rank/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "排名"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/schoolRank/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "院校排行榜"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/news/index/index",
|
"path": "pages/news/index/index",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
|
@ -187,6 +99,94 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "我的"
|
"navigationBarTitleText": "我的"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/city/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "城市"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/college/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "大学"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/career/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "职业"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/distinguish/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "大学甄别"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/evaluation/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "专业测评"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/expand/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "查扩缩招"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/line/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "批次线"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/major/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "专业"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/rank/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "排名"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/inputScore/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "输入成绩"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/home/schoolRank/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "院校排行榜"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages-sub/customerService/index/index",
|
||||||
|
"type": "page",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "在线客服",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"preloadRule": {
|
"preloadRule": {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<view class="gradient-background relative">
|
<view class="gradient-background relative">
|
||||||
<wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false">
|
<wd-navbar safeAreaInsetTop custom-class="bg-transparent!" :bordered="false">
|
||||||
<template #left>
|
<template #left>
|
||||||
<navigator open-type="navigate" class="left-icon" url="/pages/home/city/index">
|
<navigator open-type="navigate" class="left-icon" url="/pages-sub/home/city/index">
|
||||||
<text
|
<text
|
||||||
class="color-[#303030] font-[28rpx] font-medium"
|
class="color-[#303030] font-[28rpx] font-medium"
|
||||||
:selectable="false"
|
:selectable="false"
|
||||||
|
|
@ -40,10 +40,10 @@ import TabBar from '@/components/bar/TabBar.vue'
|
||||||
import { useCityInfo } from '@/hooks/useCityInfoHook'
|
import { useCityInfo } from '@/hooks/useCityInfoHook'
|
||||||
import { useUserStore } from '@/store'
|
import { useUserStore } from '@/store'
|
||||||
|
|
||||||
import Banner from '@/components/home/Banner.vue'
|
import Banner from '@/pages-sub/components/home/Banner.vue'
|
||||||
import HomeSubMenu from '@/components/home/SubMenu.vue'
|
import HomeSubMenu from '@/pages-sub/components/home/SubMenu.vue'
|
||||||
import HotRank from '@/components/home/HotRank.vue'
|
import HotRank from '@/pages-sub/components/home/HotRank.vue'
|
||||||
import Consultation from '@/components/home/Consultation.vue'
|
import Consultation from '@/pages-sub/components/home/Consultation.vue'
|
||||||
import Fab from '@/components/fab/Fab.vue'
|
import Fab from '@/components/fab/Fab.vue'
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="h-screen overflow-hidden flex flex-col bg-[#F8F8F8]">
|
|
||||||
<view class="relative h-max" hover-class="none" :hover-stop-propagation="false">
|
|
||||||
<wd-navbar
|
|
||||||
title="院校排行榜"
|
|
||||||
left-arrow
|
|
||||||
@click-left="navigatorBack"
|
|
||||||
safeAreaInsetTop
|
|
||||||
:bordered="false"
|
|
||||||
custom-class="bg-transparent! z-[99]"
|
|
||||||
></wd-navbar>
|
|
||||||
|
|
||||||
<image
|
|
||||||
class="h-[400rpx] w-full mt-[-40rpx]"
|
|
||||||
:style="{ marginTop: `-${safeAreaInsets.top * 2}px` }"
|
|
||||||
src="/static/images/schoolRank/background.svg"
|
|
||||||
/>
|
|
||||||
<image
|
|
||||||
class="h-[78rpx] w-[270rpx] absolute top-[249rpx] left-[102rpx]"
|
|
||||||
src="/static/images/schoolRank/title.svg"
|
|
||||||
/>
|
|
||||||
<image
|
|
||||||
class="h-[190rpx] w-[190rpx] absolute top-[194rpx] left-[460rpx]"
|
|
||||||
src="/static/images/schoolRank/trophy.svg"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
class="rank-body flex flex-col items-center justify-center"
|
|
||||||
hover-class="none"
|
|
||||||
:hover-stop-propagation="false"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="flex items-center justify-center swiper-box-wrapper mt-[24rpx] px-[32rpx]"
|
|
||||||
hover-class="none"
|
|
||||||
:hover-stop-propagation="false"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
:class="[
|
|
||||||
'swiper-box',
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
tab === item.type ? 'active' : '',
|
|
||||||
]"
|
|
||||||
hover-class="none"
|
|
||||||
:hover-stop-propagation="false"
|
|
||||||
v-for="item in swiperList"
|
|
||||||
:key="item.id"
|
|
||||||
@click="tab = item.type"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="scroll-wrapper" hover-class="none">
|
|
||||||
<Scroll></Scroll>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import Scroll from '@/components/scroll/Scroll.vue'
|
|
||||||
import useNavbarWeixin from '@/hooks/useNavbarWeixin'
|
|
||||||
|
|
||||||
const { safeAreaInsets } = useNavbarWeixin()
|
|
||||||
|
|
||||||
const navigatorBack = () => {
|
|
||||||
uni.navigateBack()
|
|
||||||
}
|
|
||||||
|
|
||||||
const swiperList = [
|
|
||||||
{ id: 1, name: '武书联', type: '1' },
|
|
||||||
{ id: 2, name: '校友会', type: '2' },
|
|
||||||
{ id: 3, name: '软科', type: '3' },
|
|
||||||
{ id: 4, name: 'QS', type: '4' },
|
|
||||||
]
|
|
||||||
const tab = ref<string>('1')
|
|
||||||
|
|
||||||
onLoad((option) => {
|
|
||||||
tab.value = option?.type || '1'
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.rank-body {
|
|
||||||
height: calc(100% - 400rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-box {
|
|
||||||
width: 160rpx;
|
|
||||||
height: 52rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
|
|
||||||
font-weight: 500;
|
|
||||||
color: #a28c6c;
|
|
||||||
background-color: #f5efe1;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-box:not(:last-child) {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #684817;
|
|
||||||
background: linear-gradient(270deg, #f2ce95 0%, #f8deba 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-wrapper {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -16,3 +16,7 @@ export const getVolunteerInitialization = () => {
|
||||||
export const getCountryRules = () => {
|
export const getCountryRules = () => {
|
||||||
return http.get('/api/v1/base/rules.json', { staticType: 'static' })
|
return http.get('/api/v1/base/rules.json', { staticType: 'static' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const getUnSortType = () => {
|
||||||
|
return http.get('/api/v1/base/un_sort_type.json', { staticType: 'static' })
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,10 +16,10 @@ const initState = {
|
||||||
},
|
},
|
||||||
estimatedAchievement: {
|
estimatedAchievement: {
|
||||||
year: 0, // 学期
|
year: 0, // 学期
|
||||||
score: 0, // 成绩
|
score: '', // 成绩
|
||||||
requireSubject: { code: 0, name: '', simplename: '' },
|
requireSubject: { code: 0, name: '', simplename: '' },
|
||||||
optionSubject: [],
|
optionalSubject: [],
|
||||||
cityCode: 0,
|
cityCode: '',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -43,6 +43,11 @@ export const useUserStore = defineStore(
|
||||||
userInfo.value.estimatedAchievement = val
|
userInfo.value.estimatedAchievement = val
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 清除预估成绩
|
||||||
|
const clearUserEstimatedAchievement = () => {
|
||||||
|
userInfo.value.estimatedAchievement = { ...initState.estimatedAchievement }
|
||||||
|
}
|
||||||
|
|
||||||
// 清除用户信息
|
// 清除用户信息
|
||||||
const clearUserInfo = () => {
|
const clearUserInfo = () => {
|
||||||
userInfo.value = { ...initState }
|
userInfo.value = { ...initState }
|
||||||
|
|
@ -61,6 +66,7 @@ export const useUserStore = defineStore(
|
||||||
reset,
|
reset,
|
||||||
setUserCity,
|
setUserCity,
|
||||||
setEstimatedAchievement,
|
setEstimatedAchievement,
|
||||||
|
clearUserEstimatedAchievement,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -28,8 +28,9 @@ export type ExtraUserInfo = {
|
||||||
city?: City
|
city?: City
|
||||||
estimatedAchievement: {
|
estimatedAchievement: {
|
||||||
year: number
|
year: number
|
||||||
score: number
|
score: number | string
|
||||||
requireSubject: Rule
|
requireSubject: Rule
|
||||||
optionSubject: Rule[]
|
optionalSubject: Rule[]
|
||||||
|
cityCode: string
|
||||||
}
|
}
|
||||||
} & IUserInfo
|
} & IUserInfo
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,7 @@ declare global {
|
||||||
const toRefs: typeof import('vue')['toRefs']
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
const toValue: typeof import('vue')['toValue']
|
const toValue: typeof import('vue')['toValue']
|
||||||
const triggerRef: typeof import('vue')['triggerRef']
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
|
const unSortTypeList: typeof import('../hooks/useUnSortType')['unSortTypeList']
|
||||||
const unref: typeof import('vue')['unref']
|
const unref: typeof import('vue')['unref']
|
||||||
const useAttrs: typeof import('vue')['useAttrs']
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
const useCityInfo: typeof import('../hooks/useCityInfoHook')['useCityInfo']
|
const useCityInfo: typeof import('../hooks/useCityInfoHook')['useCityInfo']
|
||||||
|
|
@ -94,6 +95,7 @@ declare global {
|
||||||
const useRules: typeof import('../hooks/useRules')['useRules']
|
const useRules: typeof import('../hooks/useRules')['useRules']
|
||||||
const useSlots: typeof import('vue')['useSlots']
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||||
|
const useUnSortType: typeof import('../hooks/useUnSortType')['useUnSortType']
|
||||||
const useUpload: typeof import('../hooks/useUpload')['default']
|
const useUpload: typeof import('../hooks/useUpload')['default']
|
||||||
const useUpload2: typeof import('../hooks/useUpload2')['default']
|
const useUpload2: typeof import('../hooks/useUpload2')['default']
|
||||||
const watch: typeof import('vue')['watch']
|
const watch: typeof import('vue')['watch']
|
||||||
|
|
@ -187,6 +189,7 @@ declare module 'vue' {
|
||||||
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
||||||
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
|
readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
|
||||||
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
||||||
|
readonly unSortTypeList: UnwrapRef<typeof import('../hooks/useUnSortType')['unSortTypeList']>
|
||||||
readonly unref: UnwrapRef<typeof import('vue')['unref']>
|
readonly unref: UnwrapRef<typeof import('vue')['unref']>
|
||||||
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
|
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
|
||||||
readonly useCityInfo: UnwrapRef<typeof import('../hooks/useCityInfoHook')['useCityInfo']>
|
readonly useCityInfo: UnwrapRef<typeof import('../hooks/useCityInfoHook')['useCityInfo']>
|
||||||
|
|
@ -199,6 +202,7 @@ declare module 'vue' {
|
||||||
readonly useRules: UnwrapRef<typeof import('../hooks/useRules')['useRules']>
|
readonly useRules: UnwrapRef<typeof import('../hooks/useRules')['useRules']>
|
||||||
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
|
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
|
||||||
readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
|
readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
|
||||||
|
readonly useUnSortType: UnwrapRef<typeof import('../hooks/useUnSortType')['useUnSortType']>
|
||||||
readonly useUpload: UnwrapRef<typeof import('../hooks/useUpload')['default']>
|
readonly useUpload: UnwrapRef<typeof import('../hooks/useUpload')['default']>
|
||||||
readonly watch: UnwrapRef<typeof import('vue')['watch']>
|
readonly watch: UnwrapRef<typeof import('vue')['watch']>
|
||||||
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
|
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
|
||||||
|
|
|
||||||
|
|
@ -8,21 +8,21 @@ interface NavigateToOptions {
|
||||||
"/pages/index/index" |
|
"/pages/index/index" |
|
||||||
"/pages/about/about" |
|
"/pages/about/about" |
|
||||||
"/pages/aiService/index/index" |
|
"/pages/aiService/index/index" |
|
||||||
"/pages/customerService/index/index" |
|
|
||||||
"/pages/home/career/index" |
|
|
||||||
"/pages/home/city/index" |
|
|
||||||
"/pages/home/college/index" |
|
|
||||||
"/pages/home/distinguish/index" |
|
|
||||||
"/pages/home/evaluation/index" |
|
|
||||||
"/pages/home/expand/index" |
|
|
||||||
"/pages/home/inputScore/index" |
|
|
||||||
"/pages/home/line/index" |
|
|
||||||
"/pages/home/major/index" |
|
|
||||||
"/pages/home/rank/index" |
|
|
||||||
"/pages/home/schoolRank/index" |
|
|
||||||
"/pages/news/index/index" |
|
"/pages/news/index/index" |
|
||||||
"/pages/place/index/index" |
|
"/pages/place/index/index" |
|
||||||
"/pages/ucenter/index/index";
|
"/pages/ucenter/index/index" |
|
||||||
|
"/pages-sub/home/city/index" |
|
||||||
|
"/pages-sub/home/college/index" |
|
||||||
|
"/pages-sub/home/career/index" |
|
||||||
|
"/pages-sub/home/distinguish/index" |
|
||||||
|
"/pages-sub/home/evaluation/index" |
|
||||||
|
"/pages-sub/home/expand/index" |
|
||||||
|
"/pages-sub/home/line/index" |
|
||||||
|
"/pages-sub/home/major/index" |
|
||||||
|
"/pages-sub/home/rank/index" |
|
||||||
|
"/pages-sub/home/inputScore/index" |
|
||||||
|
"/pages-sub/home/schoolRank/index" |
|
||||||
|
"/pages-sub/customerService/index/index";
|
||||||
}
|
}
|
||||||
interface RedirectToOptions extends NavigateToOptions {}
|
interface RedirectToOptions extends NavigateToOptions {}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
## 2.8.5(2025-02-09)
|
||||||
|
1.`新增` 方法`scrollToX`,支持控制x轴滚动到指定位置。
|
||||||
|
2.`修复` 快手小程序中报错`await isn't allowed in non-async function`的问题。
|
||||||
|
3.`修复` 在iOS+nvue中,设置了`:loading-more-enabled="false"`后,调用`scrollToBottom`无法滚动到底部的问题。
|
||||||
|
4.`修复` 在支付宝小程序+页面滚动中,数据为空时空数据图未居中的问题。
|
||||||
|
5.`优化` fetch types修改。
|
||||||
|
## 2.8.4(2024-12-02)
|
||||||
|
1.`修复` 在虚拟列表+vue2中,顶部占位采用transformY方案;在虚拟列表+vue3中,顶部占位采用view占位方案。以解决在vue2+微信小程序+安卓+兼容模式中,可能出现的虚拟列表闪动的问题。
|
||||||
|
2.`修复` 在列表渲染时(尤其是在虚拟列表中)偶现的【点击加载更多】闪现的问题。
|
||||||
|
3.`优化` 统一在RefresherStatus枚举中Loading取值。
|
||||||
|
4.`优化` `defaultPageNo`&`defaultPageSize`修改为只允许number类型。
|
||||||
|
5.`优化` 提升兼容性&细节优化。
|
||||||
|
## 2.8.3(2024-11-27)
|
||||||
|
1.`修复` `doInsertVirtualListItem`插入数据无效的问题。
|
||||||
|
2.`优化` 提升兼容性&细节优化。
|
||||||
|
## 2.8.2(2024-11-25)
|
||||||
|
1.`优化` types中`ZPagingRef`和`ZPagingInstance`支持泛型。
|
||||||
|
## 2.8.1(2024-11-24)
|
||||||
|
1.`新增` 完整的`props`、`slots`、`methods`、`events`的typescript types声明,可在ts中获得绝佳的代码提示体验。
|
||||||
|
2.`新增` `virtual-cell-id-prefix`:虚拟列表cell id的前缀,适用于一个页面有多个虚拟列表的情况,用以区分不同虚拟列表cell的id。
|
||||||
|
3.`修复` 在vue3+(微信小程序或QQ小程序)中,使用非内置列表写法时,若`z-paging`在`swiper-item`标签内的情况下存在的无法获取slot插入的cell高度的问题。
|
||||||
|
4.`修复` 在虚拟列表中分页数据小于1页时插入新数据,虚拟列表未生效的问题。
|
||||||
|
5.`修复` 在虚拟列表中调用`refresh`时,cell的index计算不正确的问题。
|
||||||
|
6.`修复` 在快手小程序中内容较少或空数据时`z-paging`未能铺满全屏的问题。
|
||||||
|
7.`优化` `events`中的参数涉及枚举的部分,统一由之前的number类型修改为string类型,展示更直观!涉及的events:`@query`中的`from`参数;`@refresherStatusChange`中的`status`参数;`@loadingStatusChange`中的`status`参数;`slot=refresher`中的`refresherStatus`参数;`slot=chatLoading`中的`loadingMoreStatus`参数。更新版本请特别留意!
|
||||||
|
## 2.8.0(2024-10-21)
|
||||||
|
1.`新增` 全面支持鸿蒙Next。
|
||||||
|
2.`修复` 设置了`refresher-complete-delay`后,在下拉刷新期间调用reload导致的无法再次下拉刷新的问题。
|
||||||
|
3.`优化` 废弃虚拟列表transformY顶部占位方案,修改为空view占位。解决因使用旧方案导致的vue3中可能出现的虚拟列表闪动问题。提升虚拟列表的兼容性。
|
||||||
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!-- 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>
|
||||||
|
export default {
|
||||||
|
name: 'z-paging-cell',
|
||||||
|
props: {
|
||||||
|
//cellStyle
|
||||||
|
cellStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onTouchstart(e) {
|
||||||
|
this.$emit('touchstart', e)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
<!-- z-paging -->
|
||||||
|
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||||
|
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||||
|
<!-- 反馈QQ群:790460711 -->
|
||||||
|
|
||||||
|
<!-- 空数据占位view,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||||
|
<template>
|
||||||
|
<view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]" @click="emptyViewClick">
|
||||||
|
<view class="zp-main">
|
||||||
|
<image v-if="!emptyViewImg.length" :class="{'zp-main-image-rpx':unit==='rpx','zp-main-image-px':unit==='px'}" :style="[emptyViewImgStyle]" :src="emptyImg" />
|
||||||
|
<image v-else :class="{'zp-main-image-rpx':unit==='rpx','zp-main-image-px':unit==='px'}" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg" />
|
||||||
|
<text class="zp-main-title" :class="{'zp-main-title-rpx':unit==='rpx','zp-main-title-px':unit==='px'}" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text>
|
||||||
|
<text v-if="showEmptyViewReload" :class="{'zp-main-error-btn':true,'zp-main-error-btn-rpx':unit==='rpx','zp-main-error-btn-px':unit==='px'}" :style="[emptyViewReloadStyle]" @click.stop="reloadClick">{{emptyViewReloadText}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import zStatic from '../z-paging/js/z-paging-static'
|
||||||
|
export default {
|
||||||
|
name: "z-paging-empty-view",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 空数据描述文字
|
||||||
|
emptyViewText: {
|
||||||
|
type: String,
|
||||||
|
default: '没有数据哦~'
|
||||||
|
},
|
||||||
|
// 空数据图片
|
||||||
|
emptyViewImg: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否显示空数据图重新加载按钮
|
||||||
|
showEmptyViewReload: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 空数据点击重新加载文字
|
||||||
|
emptyViewReloadText: {
|
||||||
|
type: String,
|
||||||
|
default: '重新加载'
|
||||||
|
},
|
||||||
|
// 是否是加载失败
|
||||||
|
isLoadFailed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 空数据图样式
|
||||||
|
emptyViewStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 空数据图img样式
|
||||||
|
emptyViewImgStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 空数据图描述文字样式
|
||||||
|
emptyViewTitleStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 空数据图重新加载按钮样式
|
||||||
|
emptyViewReloadStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 空数据图z-index
|
||||||
|
emptyViewZIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 9
|
||||||
|
},
|
||||||
|
// 空数据图片是否使用fixed布局并铺满z-paging
|
||||||
|
emptyViewFixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 空数据图中布局的单位,默认为rpx
|
||||||
|
unit: {
|
||||||
|
type: String,
|
||||||
|
default: 'rpx'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
emptyImg() {
|
||||||
|
return this.isLoadFailed ? zStatic.base64Error : zStatic.base64Empty;
|
||||||
|
},
|
||||||
|
finalEmptyViewStyle(){
|
||||||
|
this.emptyViewStyle['z-index'] = this.emptyViewZIndex;
|
||||||
|
return this.emptyViewStyle;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击了reload按钮
|
||||||
|
reloadClick() {
|
||||||
|
this.$emit('reload');
|
||||||
|
},
|
||||||
|
// 点击了空数据view
|
||||||
|
emptyViewClick() {
|
||||||
|
this.$emit('viewClick');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.zp-container{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.zp-container-fixed {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-main{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50rpx 0rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-main-image-rpx {
|
||||||
|
width: 240rpx;
|
||||||
|
height: 240rpx;
|
||||||
|
}
|
||||||
|
.zp-main-image-px {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-main-title {
|
||||||
|
color: #aaaaaa;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.zp-main-title-rpx {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding: 0rpx 20rpx;
|
||||||
|
}
|
||||||
|
.zp-main-title-px {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-main-error-btn {
|
||||||
|
border: solid 1px #dddddd;
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
.zp-main-error-btn-rpx {
|
||||||
|
font-size: 28rpx;
|
||||||
|
padding: 8rpx 24rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
.zp-main-error-btn-px {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,143 @@
|
||||||
|
<!-- z-paging -->
|
||||||
|
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||||
|
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||||
|
<!-- 反馈QQ群:790460711 -->
|
||||||
|
|
||||||
|
<!-- 滑动切换选项卡swiper-item,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||||
|
<template>
|
||||||
|
<view class="zp-swiper-item-container">
|
||||||
|
<z-paging ref="paging" :fixed="false"
|
||||||
|
:auto="false" :useVirtualList="useVirtualList" :useInnerList="useInnerList" :cellKeyName="cellKeyName" :innerListStyle="innerListStyle"
|
||||||
|
:preloadPage="preloadPage" :cellHeightMode="cellHeightMode" :virtualScrollFps="virtualScrollFps" :virtualListCol="virtualListCol"
|
||||||
|
@query="_queryList" @listChange="_updateList">
|
||||||
|
<slot />
|
||||||
|
<template #header>
|
||||||
|
<slot name="header"/>
|
||||||
|
</template>
|
||||||
|
<template #cell="{item,index}">
|
||||||
|
<slot name="cell" :item="item" :index="index"/>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<slot name="footer"/>
|
||||||
|
</template>
|
||||||
|
</z-paging>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import zPaging from '../z-paging/z-paging'
|
||||||
|
export default {
|
||||||
|
name: "z-paging-swiper-item",
|
||||||
|
components: { zPaging },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
firstLoaded: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 当前组件的index,也就是当前组件是swiper中的第几个
|
||||||
|
tabIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: function() {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 当前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时,才去加载
|
||||||
|
if (!this.firstLoaded) {
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
let delay = 5;
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
delay = 100;
|
||||||
|
// #endif
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.paging.reload().catch(() => {});
|
||||||
|
}, delay);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
reload(data) {
|
||||||
|
return this.$refs.paging.reload(data);
|
||||||
|
},
|
||||||
|
complete(data) {
|
||||||
|
this.firstLoaded = true;
|
||||||
|
return this.$refs.paging.complete(data);
|
||||||
|
},
|
||||||
|
_queryList(pageNo, pageSize, from) {
|
||||||
|
this.$emit('query', pageNo, pageSize, from);
|
||||||
|
},
|
||||||
|
_updateList(list) {
|
||||||
|
this.$emit('updateList', list);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.zp-swiper-item-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
<!-- z-paging -->
|
||||||
|
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||||
|
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||||
|
<!-- 反馈QQ群:790460711 -->
|
||||||
|
|
||||||
|
<!-- 滑动切换选项卡swiper容器,此组件支持easycom规范,可以在项目中直接引用 -->
|
||||||
|
<template>
|
||||||
|
<view :class="fixed?'zp-swiper-container zp-swiper-container-fixed':'zp-swiper-container'" :style="[finalSwiperStyle]">
|
||||||
|
<!-- #ifndef APP-PLUS -->
|
||||||
|
<view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<slot v-if="zSlots.top" name="top" />
|
||||||
|
<view class="zp-swiper-super">
|
||||||
|
<view v-if="zSlots.left" :class="{'zp-swiper-left':true,'zp-absoulte':isOldWebView}">
|
||||||
|
<slot name="left" />
|
||||||
|
</view>
|
||||||
|
<view :class="{'zp-swiper':true,'zp-absoulte':isOldWebView}" :style="[swiperContentStyle]">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<view v-if="zSlots.right" :class="{'zp-swiper-right':true,'zp-absoulte zp-right':isOldWebView}">
|
||||||
|
<slot name="right" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<slot v-if="zSlots.bottom" name="bottom" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import commonLayoutModule from '../z-paging/js/modules/common-layout'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "z-paging-swiper",
|
||||||
|
mixins: [commonLayoutModule],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
swiperContentStyle: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 是否使用fixed布局,默认为是
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 是否开启底部安全区域适配
|
||||||
|
safeAreaInsetBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// z-paging-swiper样式
|
||||||
|
swiperStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.systemInfo = uni.getSystemInfoSync();
|
||||||
|
setTimeout(this.updateFixedLayout, 100)
|
||||||
|
})
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
this._getCssSafeAreaInsetBottom();
|
||||||
|
// #endif
|
||||||
|
this.updateLeftAndRightWidth();
|
||||||
|
|
||||||
|
this.swiperContentStyle = { 'flex': '1' };
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.swiperContentStyle = { width: '100%',height: '100%' };
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
finalSwiperStyle() {
|
||||||
|
const swiperStyle = { ...this.swiperStyle };
|
||||||
|
if (!this.systemInfo) return swiperStyle;
|
||||||
|
const windowTop = this.windowTop;
|
||||||
|
const windowBottom = this.systemInfo.windowBottom;
|
||||||
|
if (this.fixed) {
|
||||||
|
if (windowTop && !swiperStyle.top) {
|
||||||
|
swiperStyle.top = windowTop + 'px';
|
||||||
|
}
|
||||||
|
if (!swiperStyle.bottom) {
|
||||||
|
let bottom = windowBottom || 0;
|
||||||
|
bottom += this.safeAreaInsetBottom ? this.safeAreaBottom : 0;
|
||||||
|
if (bottom > 0) {
|
||||||
|
swiperStyle.bottom = bottom + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return swiperStyle;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 更新slot="left"和slot="right"宽度,当slot="left"或slot="right"宽度动态改变时调用
|
||||||
|
updateLeftAndRightWidth() {
|
||||||
|
if (!this.isOldWebView) return;
|
||||||
|
this.$nextTick(() => this._updateLeftAndRightWidth(this.swiperContentStyle, 'zp-swiper'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.zp-swiper-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-swiper-container-fixed {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-safe-area-inset-bottom {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifndef APP-PLUS */
|
||||||
|
height: env(safe-area-inset-bottom);
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-swiper-super {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-swiper-left,.zp-swiper-right{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-swiper {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-absoulte {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-swiper-item {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
<!-- [z-paging]上拉加载更多view -->
|
||||||
|
<template>
|
||||||
|
<view class="zp-l-container" :class="{'zp-l-container-rpx':c.unit==='rpx','zp-l-container-px':c.unit==='px'}" :style="[c.customStyle]" @click="doClick">
|
||||||
|
<template v-if="!c.hideContent">
|
||||||
|
<!-- 底部加载更多没有更多数据分割线 -->
|
||||||
|
<text v-if="c.showNoMoreLine&&finalStatus===M.NoMore" :class="{'zp-l-line-rpx':c.unit==='rpx','zp-l-line-px':c.unit==='px'}" :style="[{backgroundColor:zTheme.line[ts]},c.noMoreLineCustomStyle]" />
|
||||||
|
<!-- 底部加载更多loading -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<image v-if="finalStatus===M.Loading&&!!c.loadingIconCustomImage"
|
||||||
|
:src="c.loadingIconCustomImage" :style="[c.iconCustomStyle]" :class="{'zp-l-line-loading-custom-image':true,'zp-l-line-loading-custom-image-animated':c.loadingAnimated,'zp-l-line-loading-custom-image-rpx':c.unit==='rpx','zp-l-line-loading-custom-image-px':c.unit==='px'}" />
|
||||||
|
<image v-if="finalStatus===M.Loading&&finalLoadingIconType==='flower'&&!c.loadingIconCustomImage.length"
|
||||||
|
:class="{'zp-line-loading-image':true,'zp-line-loading-image-rpx':c.unit==='rpx','zp-line-loading-image-px':c.unit==='px'}" :style="[c.iconCustomStyle]" :src="zTheme.flower[ts]" />
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<!-- 在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 {
|
||||||
|
M: Enum.More,
|
||||||
|
zTheme: {
|
||||||
|
title: { white: '#efefef', black: '#a4a4a4' },
|
||||||
|
line: { white: '#efefef', black: '#eeeeee' },
|
||||||
|
circleBorder: { white: '#aaaaaa', black: '#c8c8c8' },
|
||||||
|
circleBorderTop: { white: '#ffffff', black: '#444444' },
|
||||||
|
flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower },
|
||||||
|
indicator: { white: '#eeeeee', black: '#777777' }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ['zConfig'],
|
||||||
|
computed: {
|
||||||
|
ts() {
|
||||||
|
return this.c.defaultThemeStyle;
|
||||||
|
},
|
||||||
|
// 底部加载更多配置
|
||||||
|
c() {
|
||||||
|
return this.zConfig || {};
|
||||||
|
},
|
||||||
|
// 底部加载更多文字
|
||||||
|
ownLoadingMoreText() {
|
||||||
|
return {
|
||||||
|
[this.M.Default]: this.c.defaultText,
|
||||||
|
[this.M.Loading]: this.c.loadingText,
|
||||||
|
[this.M.NoMore]: this.c.noMoreText,
|
||||||
|
[this.M.Fail]: this.c.failText,
|
||||||
|
}[this.finalStatus];
|
||||||
|
},
|
||||||
|
// 底部加载更多状态
|
||||||
|
finalStatus() {
|
||||||
|
if (this.c.defaultAsLoading && this.c.status === this.M.Default) return this.M.Loading;
|
||||||
|
return this.c.status;
|
||||||
|
},
|
||||||
|
// 加载更多icon类型
|
||||||
|
finalLoadingIconType() {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
return 'flower';
|
||||||
|
// #endif
|
||||||
|
return this.c.loadingIconType;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击了加载更多
|
||||||
|
doClick() {
|
||||||
|
this.$emit('doClick');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "../css/z-paging-static.css";
|
||||||
|
|
||||||
|
.zp-l-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
clear: both;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.zp-l-container-rpx {
|
||||||
|
height: 80rpx;
|
||||||
|
font-size: 27rpx;
|
||||||
|
}
|
||||||
|
.zp-l-container-px {
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-l-line-loading-custom-image {
|
||||||
|
color: #a4a4a4;
|
||||||
|
}
|
||||||
|
.zp-l-line-loading-custom-image-rpx {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
}
|
||||||
|
.zp-l-line-loading-custom-image-px {
|
||||||
|
margin-right: 4px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-l-line-loading-custom-image-animated{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
animation: loading-circle 1s linear infinite;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-l-circle-loading-view {
|
||||||
|
border: 3rpx solid #dddddd;
|
||||||
|
border-radius: 50%;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
animation: loading-circle 1s linear infinite;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.zp-l-circle-loading-view-rpx {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
width: 23rpx;
|
||||||
|
height: 23rpx;
|
||||||
|
}
|
||||||
|
.zp-l-circle-loading-view-px {
|
||||||
|
margin-right: 4px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-l-text-rpx {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin: 0rpx 6rpx;
|
||||||
|
}
|
||||||
|
.zp-l-text-px {
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-l-line-rpx {
|
||||||
|
height: 1px;
|
||||||
|
width: 100rpx;
|
||||||
|
margin: 0rpx 10rpx;
|
||||||
|
}
|
||||||
|
.zp-l-line-px {
|
||||||
|
height: 1px;
|
||||||
|
width: 50px;
|
||||||
|
margin: 0rpx 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@keyframes loading-circle {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,215 @@
|
||||||
|
<!-- [z-paging]下拉刷新view -->
|
||||||
|
<template>
|
||||||
|
<view style="height: 100%;">
|
||||||
|
<view :class="showUpdateTime?'zp-r-container zp-r-container-padding':'zp-r-container'">
|
||||||
|
<view class="zp-r-left">
|
||||||
|
<!-- 非加载中(继续下拉刷新、松手立即刷新状态图片) -->
|
||||||
|
<image v-if="status!==R.Loading" :class="leftImageClass" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" />
|
||||||
|
<!-- 加载状态图片 -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<image v-else :class="{'zp-line-loading-image':refreshingAnimated,'zp-r-left-image':true,'zp-r-left-image-pre-size-rpx':unit==='rpx','zp-r-left-image-pre-size-px':unit==='px'}" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" />
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- 在nvue中,加载状态loading使用系统loading -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<view v-else :style="[{'margin-right':showUpdateTime?addUnit(18,unit):addUnit(12, unit)}]">
|
||||||
|
<loading-indicator :class="isIos?{'zp-loading-image-ios-rpx':unit==='rpx','zp-loading-image-ios-px':unit==='px'}:{'zp-loading-image-android-rpx':unit==='rpx','zp-loading-image-android-px':unit==='px'}"
|
||||||
|
:style="[{color:zTheme.indicator[ts]},imgStyle]" :animating="true" />
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
<!-- 右侧文字内容 -->
|
||||||
|
<view class="zp-r-right">
|
||||||
|
<!-- 右侧下拉刷新状态文字 -->
|
||||||
|
<text class="zp-r-right-text" :style="[rightTextStyle,titleStyle]">{{currentTitle}}</text>
|
||||||
|
<!-- 右侧下拉刷新时间文字 -->
|
||||||
|
<text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text" :class="{'zp-r-right-time-text-rpx':unit==='rpx','zp-r-right-time-text-px':unit==='px'}" :style="[{color:zTheme.title[ts]},updateTimeStyle]">
|
||||||
|
{{refresherTimeText}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import zStatic from '../js/z-paging-static'
|
||||||
|
import u from '../js/z-paging-utils'
|
||||||
|
import Enum from '../js/z-paging-enum'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'z-paging-refresh',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
R: Enum.Refresher,
|
||||||
|
isIos: uni.getSystemInfoSync().platform === 'ios',
|
||||||
|
refresherTimeText: '',
|
||||||
|
zTheme: {
|
||||||
|
title: { white: '#efefef', black: '#555555' },
|
||||||
|
arrow: { white: zStatic.base64ArrowWhite, black: zStatic.base64Arrow },
|
||||||
|
flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower },
|
||||||
|
success: { white: zStatic.base64SuccessWhite, black: zStatic.base64Success },
|
||||||
|
indicator: { white: '#eeeeee', black: '#777777' }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ['status', 'defaultThemeStyle', 'defaultText', 'pullingText', 'refreshingText', 'completeText', 'goF2Text', 'defaultImg', 'pullingImg',
|
||||||
|
'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap', 'unit'
|
||||||
|
],
|
||||||
|
computed: {
|
||||||
|
ts() {
|
||||||
|
return this.defaultThemeStyle;
|
||||||
|
},
|
||||||
|
// 当前状态Map
|
||||||
|
statusTextMap() {
|
||||||
|
this.updateTime();
|
||||||
|
const { R, defaultText, pullingText, refreshingText, completeText, goF2Text } = this;
|
||||||
|
return {
|
||||||
|
[R.Default]: defaultText,
|
||||||
|
[R.ReleaseToRefresh]: pullingText,
|
||||||
|
[R.Loading]: refreshingText,
|
||||||
|
[R.Complete]: completeText,
|
||||||
|
[R.GoF2]: goF2Text,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 当前状态文字
|
||||||
|
currentTitle() {
|
||||||
|
return this.statusTextMap[this.status] || this.defaultText;
|
||||||
|
},
|
||||||
|
// 左侧图片class
|
||||||
|
leftImageClass() {
|
||||||
|
const preSizeClass = `zp-r-left-image-pre-size-${this.unit}`;
|
||||||
|
if (this.status === this.R.Complete) return preSizeClass;
|
||||||
|
return `zp-r-left-image ${preSizeClass} ${this.status === this.R.Default ? 'zp-r-arrow-down' : 'zp-r-arrow-top'}`;
|
||||||
|
},
|
||||||
|
// 左侧图片style
|
||||||
|
leftImageStyle() {
|
||||||
|
const showUpdateTime = this.showUpdateTime;
|
||||||
|
const size = showUpdateTime ? u.addUnit(36, this.unit) : u.addUnit(34, this.unit);
|
||||||
|
return {width: size,height: size,'margin-right': showUpdateTime ? u.addUnit(20, this.unit) : u.addUnit(9, this.unit)};
|
||||||
|
},
|
||||||
|
// 左侧图片src
|
||||||
|
leftImageSrc() {
|
||||||
|
const R = this.R;
|
||||||
|
const status = this.status;
|
||||||
|
if (status === R.Default) {
|
||||||
|
if (!!this.defaultImg) return this.defaultImg;
|
||||||
|
return this.zTheme.arrow[this.ts];
|
||||||
|
} else if (status === R.ReleaseToRefresh) {
|
||||||
|
if (!!this.pullingImg) return this.pullingImg;
|
||||||
|
if (!!this.defaultImg) return this.defaultImg;
|
||||||
|
return this.zTheme.arrow[this.ts];
|
||||||
|
} else if (status === R.Loading) {
|
||||||
|
if (!!this.refreshingImg) return this.refreshingImg;
|
||||||
|
return this.zTheme.flower[this.ts];;
|
||||||
|
} else if (status === R.Complete) {
|
||||||
|
if (!!this.completeImg) return this.completeImg;
|
||||||
|
return this.zTheme.success[this.ts];;
|
||||||
|
} else if (status === R.GoF2) {
|
||||||
|
return this.zTheme.arrow[this.ts];
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
// 右侧文字style
|
||||||
|
rightTextStyle() {
|
||||||
|
let stl = {};
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const textHeight = this.showUpdateTime ? u.addUnit(40, this.unit) : u.addUnit(80, this.unit);
|
||||||
|
stl = {'height': textHeight, 'line-height': textHeight}
|
||||||
|
// #endif
|
||||||
|
stl['color'] = this.zTheme.title[this.ts];
|
||||||
|
stl['font-size'] = u.addUnit(30, this.unit);
|
||||||
|
return stl;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 添加单位
|
||||||
|
addUnit(value, unit) {
|
||||||
|
return u.addUnit(value, unit);
|
||||||
|
},
|
||||||
|
// 更新下拉刷新时间
|
||||||
|
updateTime() {
|
||||||
|
if (this.showUpdateTime) {
|
||||||
|
this.refresherTimeText = u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "../css/z-paging-static.css";
|
||||||
|
|
||||||
|
.zp-r-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-container-padding {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
padding: 7px 0rpx;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-left {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #ifdef MP-ALIPAY */
|
||||||
|
margin-top: -4rpx;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-left-image {
|
||||||
|
transition-duration: .2s;
|
||||||
|
transition-property: transform;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-left-image-pre-size-rpx {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-left-image-pre-size-px {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
overflow: hidden;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-arrow-top {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-arrow-down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-right {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-r-right-time-text-rpx {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
.zp-r-right-time-text-px {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
// z-paging全局配置文件,注意避免更新时此文件被覆盖,若被覆盖,可在此文件中右键->点击本地历史记录,找回覆盖前的配置
|
||||||
|
|
||||||
|
export default {}
|
||||||
|
|
@ -0,0 +1,241 @@
|
||||||
|
/* [z-paging]公共css*/
|
||||||
|
|
||||||
|
.z-paging-content {
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-paging-content-full {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-paging-content-fixed, .zp-loading-fixed {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-f2-content {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-page-top, .zp-page-bottom {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-page-left, .zp-page-right {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-scroll-view-super {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-view-super {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-scroll-view-container, .zp-scroll-view {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-absoulte {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-scroll-view-absolute {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.zp-scroll-view-hide-scrollbar ::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.zp-paging-touch-view {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-fixed-bac-view {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-paging-main {
|
||||||
|
height: 100%;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-paging-container {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-chat-record-loading-custom-image {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 35rpx;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
animation: loading-flower 1s linear infinite;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-page-bottom-keyboard-placeholder-animate {
|
||||||
|
transition-property: height;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
will-change: height;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-custom-refresher-container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-custom-refresher-refresh {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-back-to-top {
|
||||||
|
z-index: 999;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
transition-duration: .3s;
|
||||||
|
transition-property: opacity;
|
||||||
|
}
|
||||||
|
.zp-back-to-top-rpx {
|
||||||
|
width: 76rpx;
|
||||||
|
height: 76rpx;
|
||||||
|
bottom: 0rpx;
|
||||||
|
right: 25rpx;
|
||||||
|
}
|
||||||
|
.zp-back-to-top-px {
|
||||||
|
width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-back-to-top-show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-back-to-top-hide {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-back-to-top-img {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
flex: 1;
|
||||||
|
/* #endif */
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-back-to-top-img-inversion {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-empty-view {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-empty-view-center {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-loading-fixed {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-safe-area-inset-bottom {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifndef APP-PLUS */
|
||||||
|
height: env(safe-area-inset-bottom);
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-n-refresh-container {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
width: 750rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-n-list-container{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
/* [z-paging]公用的静态css资源 */
|
||||||
|
|
||||||
|
.zp-line-loading-image {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
animation: loading-flower 1s steps(12) infinite;
|
||||||
|
/* #endif */
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.zp-line-loading-image-rpx {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
}
|
||||||
|
.zp-line-loading-image-px {
|
||||||
|
margin-right: 4px;
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-loading-image-ios-rpx {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
.zp-loading-image-ios-px {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zp-loading-image-android-rpx {
|
||||||
|
width: 34rpx;
|
||||||
|
height: 34rpx;
|
||||||
|
}
|
||||||
|
.zp-loading-image-android-px {
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@keyframes loading-flower {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(1turn);
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
|
@ -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..."
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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,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,149 @@
|
||||||
|
// [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() {
|
||||||
|
// 监听键盘高度变化(H5、百度小程序、抖音小程序、飞书小程序不支持)
|
||||||
|
// #ifndef H5 || MP-BAIDU || MP-TOUTIAO
|
||||||
|
if (this.useChatRecordMode) {
|
||||||
|
uni.onKeyboardHeightChange(this._handleKeyboardHeightChange);
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 添加聊天记录
|
||||||
|
addChatRecordData(data, toBottom = true, toBottomWithAnimate = true) {
|
||||||
|
if (!this.useChatRecordMode) return;
|
||||||
|
this.isTotalChangeFromAddData = true;
|
||||||
|
this.addDataFromTop(data, toBottom, toBottomWithAnimate);
|
||||||
|
},
|
||||||
|
// 手动触发滚动到顶部加载更多,聊天记录模式时有效
|
||||||
|
doChatRecordLoadMore() {
|
||||||
|
this.useChatRecordMode && this._onLoadingMore('click');
|
||||||
|
},
|
||||||
|
// 处理键盘高度变化
|
||||||
|
_handleKeyboardHeightChange(res) {
|
||||||
|
this.$emit('keyboardHeightChange', res);
|
||||||
|
if (this.autoAdjustPositionWhenChat) {
|
||||||
|
this.isKeyboardHeightChanged = true;
|
||||||
|
this.keyboardHeight = res.height > 0 ? res.height + this.finalChatAdjustPositionOffset : res.height;
|
||||||
|
}
|
||||||
|
if (this.autoToBottomWhenChat && this.keyboardHeight > 0) {
|
||||||
|
u.delay(() => {
|
||||||
|
this.scrollToBottom(false);
|
||||||
|
u.delay(() => {
|
||||||
|
this.scrollToBottom(false);
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
// [z-paging]通用布局相关模块
|
||||||
|
|
||||||
|
// #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 = uni.getSystemInfoSync().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 = uni.getSystemInfoSync();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取节点尺寸
|
||||||
|
_getNodeClientRect(select, inDom = true, scrollOffset = false, inParent = 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
|
||||||
|
const inDomObj = inParent ? this.$parent : this;
|
||||||
|
let res = inDom || inParent ? uni.createSelectorQuery().in(inDomObj) : 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,736 @@
|
||||||
|
// [z-paging]数据处理模块
|
||||||
|
import u from '.././z-paging-utils'
|
||||||
|
import c from '.././z-paging-constant'
|
||||||
|
import Enum from '.././z-paging-enum'
|
||||||
|
import interceptor from '../z-paging-interceptor'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 自定义初始的pageNo,默认为1
|
||||||
|
defaultPageNo: {
|
||||||
|
type: Number,
|
||||||
|
default: u.gc('defaultPageNo', 1),
|
||||||
|
observer: function(newVal) {
|
||||||
|
this.pageNo = newVal;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 自定义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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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) {
|
||||||
|
this._totalDataChange(newVal, oldVal, this.totalDataChangeThrow);
|
||||||
|
this.totalDataChangeThrow = true;
|
||||||
|
},
|
||||||
|
currentData(newVal, oldVal) {
|
||||||
|
this._currentDataChange(newVal, oldVal);
|
||||||
|
},
|
||||||
|
useChatRecordMode(newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.nLoadingMoreFixedHeight = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
handler(newVal) {
|
||||||
|
// 当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) {
|
||||||
|
// 数据是否拼接到顶部,如果是聊天记录模式并且列表没有倒置,则应该拼接在底部
|
||||||
|
let addFromTop = !this.isChatRecordModeAndNotInversion;
|
||||||
|
data = Object.prototype.toString.call(data) !== '[object Array]' ? [data] : (addFromTop ? data.reverse() : data);
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.finalUseVirtualList && this._setCellIndex(data, 'top')
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
this.totalData = addFromTop ? [...data, ...this.totalData] : [...this.totalData, ...data];
|
||||||
|
if (toTop) {
|
||||||
|
u.delay(() => this.useChatRecordMode ? this.scrollToBottom(toTopWithAnimate) : this.scrollToTop(toTopWithAnimate));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 重新设置列表数据,调用此方法不会影响pageNo和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.refresherOnly && !this.usePageScroll && newVal.length) {
|
||||||
|
this.loadingMoreTimeStamp = u.getTime();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.scrollToY(currentScrollTop);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
} else {
|
||||||
|
this.totalData = newVal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.privateConcat = true;
|
||||||
|
},
|
||||||
|
// 根据pageNo处理refresh操作
|
||||||
|
_handleRefreshWithDisPageNo(pageNo) {
|
||||||
|
if (!this.isHandlingRefreshToPage && !this.realTotalData.length) return this.reload();
|
||||||
|
if (pageNo >= 1) {
|
||||||
|
this.loading = true;
|
||||||
|
this.privateConcat = false;
|
||||||
|
const totalPageSize = pageNo * this.pageSize;
|
||||||
|
this.currentRefreshPageSize = totalPageSize;
|
||||||
|
// 如果调用refresh时是本地分页,则在组件内部自己处理分页逻辑,不emit query相关事件
|
||||||
|
if (this.isLocalPaging && this.isHandlingRefreshToPage) {
|
||||||
|
this._localPagingQueryList(this.defaultPageNo, totalPageSize, 0, res => {
|
||||||
|
this.complete(res);
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// emit query相关事件
|
||||||
|
this._emitQuery(this.defaultPageNo, totalPageSize, Enum.QueryFrom.Refresh);
|
||||||
|
this._callMyParentQuery(this.defaultPageNo, totalPageSize);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.dataPromiseResultMap.reload = { resolve, reject };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 本地分页请求
|
||||||
|
_localPagingQueryList(pageNo, pageSize, localPagingLoadingTime, callback) {
|
||||||
|
pageNo = Math.max(1, pageNo);
|
||||||
|
pageSize = Math.max(1, pageSize);
|
||||||
|
const totalPagingList = [...this.totalLocalPagingList];
|
||||||
|
const pageNoIndex = (pageNo - 1) * pageSize;
|
||||||
|
const finalPageNoIndex = Math.min(totalPagingList.length, pageNoIndex + pageSize);
|
||||||
|
const resultPagingList = totalPagingList.splice(pageNoIndex, finalPageNoIndex - pageNoIndex);
|
||||||
|
u.delay(() => callback(resultPagingList), localPagingLoadingTime)
|
||||||
|
},
|
||||||
|
// 存储列表缓存数据
|
||||||
|
_saveLocalCache(data) {
|
||||||
|
uni.setStorageSync(this.finalCacheKey, data);
|
||||||
|
},
|
||||||
|
// 通过缓存数据填充列表数据
|
||||||
|
_setListByLocalCache() {
|
||||||
|
this.totalData = uni.getStorageSync(this.finalCacheKey) || [];
|
||||||
|
this.isSettingCacheList = true;
|
||||||
|
},
|
||||||
|
// 修改父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 };
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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.refresherOnly || this.hideEmptyView || this.realTotalData.length) return false;
|
||||||
|
if (this.autoHideEmptyViewWhenLoading) {
|
||||||
|
if (this.isAddedData && !this.firstPageLoaded && !this.loading) return true;
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return !this.autoHideEmptyViewWhenPull && !this.isUserReload;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击了空数据view重新加载按钮
|
||||||
|
_emptyViewReload() {
|
||||||
|
let callbacked = false;
|
||||||
|
this.$emit('emptyViewReload', reload => {
|
||||||
|
if (reload === undefined || reload === true) {
|
||||||
|
this.fromEmptyViewReload = true;
|
||||||
|
this.reload().catch(() => {});
|
||||||
|
}
|
||||||
|
callbacked = true;
|
||||||
|
});
|
||||||
|
// 如果用户没有禁止默认的点击重新加载刷新列表事件,则触发列表重新刷新
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (!callbacked) {
|
||||||
|
this.fromEmptyViewReload = true;
|
||||||
|
this.reload().catch(() => {});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 点击了空数据view
|
||||||
|
_emptyViewClick() {
|
||||||
|
this.$emit('emptyViewClick');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
// [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'
|
||||||
|
|
||||||
|
const language = uni.getSystemInfoSync().language;
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
language
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
finalLanguage() {
|
||||||
|
try {
|
||||||
|
const local = uni.getLocale();
|
||||||
|
const language = this.language;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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.$emit('scrolltolower', from);
|
||||||
|
// 如果是只使用下拉刷新 或者 禁用底部加载更多 或者 底部加载更多不是默认状态或加载失败状态 或者 是加载中状态 或者 空数据图已经展示了,则return,不触发内部加载更多逻辑
|
||||||
|
if (this.refresherOnly || !this.loadingMoreEnabled || !(this.loadingStatus === Enum.More.Default || this.loadingStatus === Enum.More.Fail) || this.loading || this.showEmpty) return;
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
if (!this.isIos && !this.refresherOnly && !this.usePageScroll) {
|
||||||
|
const currentTimestamp = u.getTime();
|
||||||
|
// 在非ios平台+scroll-view中节流处理
|
||||||
|
if (this.loadingMoreTimeStamp > 0 && currentTimestamp - this.loadingMoreTimeStamp < 100) {
|
||||||
|
this.loadingMoreTimeStamp = 0;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// 处理加载更多数据
|
||||||
|
this._doLoadingMore();
|
||||||
|
},
|
||||||
|
// 处理开始加载更多
|
||||||
|
_doLoadingMore() {
|
||||||
|
if (this.pageNo >= this.defaultPageNo && this.loadingStatus !== Enum.More.NoMore) {
|
||||||
|
this.pageNo ++;
|
||||||
|
this._startLoading(false);
|
||||||
|
if (this.isLocalPaging) {
|
||||||
|
// 如果是本地分页,则在组件内部对数据进行分页处理,不触发@query事件
|
||||||
|
this._localPagingQueryList(this.pageNo, this.defaultPageSize, this.localPagingLoadingTime, res => {
|
||||||
|
this.completeByTotal(res, this.totalLocalPagingList.length);
|
||||||
|
this.queryFrom = Enum.QueryFrom.LoadMore;
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// emit @query相关加载更多事件
|
||||||
|
this._emitQuery(this.pageNo, this.defaultPageSize, Enum.QueryFrom.LoadMore);
|
||||||
|
this._callMyParentQuery();
|
||||||
|
}
|
||||||
|
// 设置当前加载状态为底部加载更多状态
|
||||||
|
this.loadingType = Enum.LoadingType.LoadMore;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// (预处理)判断当没有更多数据且分页内容未超出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.refresherOnly) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (this.useChatRecordMode && type !== 'Loading') return false;
|
||||||
|
if (!this.zSlots) return false;
|
||||||
|
if (type === 'Custom') {
|
||||||
|
return this.showDefaultLoadingMoreText && !(this.loadingStatus === Enum.More.NoMore && !this.showLoadingMoreNoMoreView);
|
||||||
|
}
|
||||||
|
const res = this.loadingStatus === Enum.More[type] && this.zSlots[`loadingMore${type}`] && (type === 'NoMore' ? this.showLoadingMoreNoMoreView : true);
|
||||||
|
if (res) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if (!this.isIos) {
|
||||||
|
this.nLoadingMoreFixedHeight = false;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,255 @@
|
||||||
|
// [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),
|
||||||
|
nF2Opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
nScopedSlots() {
|
||||||
|
// #ifdef VUE2
|
||||||
|
return this.$scopedSlots;
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
return null;
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
nWaterfallColumnCount() {
|
||||||
|
if (this.finalNvueListIs !== 'waterfall') return 0;
|
||||||
|
return this._nGetWaterfallConfig('column-count', 2);
|
||||||
|
},
|
||||||
|
nWaterfallColumnWidth() {
|
||||||
|
return this._nGetWaterfallConfig('column-width', 'auto');
|
||||||
|
},
|
||||||
|
nWaterfallColumnGap() {
|
||||||
|
return this._nGetWaterfallConfig('column-gap', 'normal');
|
||||||
|
},
|
||||||
|
nWaterfallLeftGap() {
|
||||||
|
return this._nGetWaterfallConfig('left-gap', 0);
|
||||||
|
},
|
||||||
|
nWaterfallRightGap() {
|
||||||
|
return this._nGetWaterfallConfig('right-gap', 0);
|
||||||
|
},
|
||||||
|
nViewIs() {
|
||||||
|
const is = this.finalNvueListIs;
|
||||||
|
return is === 'scroller' || is === 'view' ? 'view' : is === 'waterfall' ? 'header' : 'cell';
|
||||||
|
},
|
||||||
|
nSafeAreaBottomHeight() {
|
||||||
|
return this.safeAreaInsetBottom ? this.safeAreaBottom : 0;
|
||||||
|
},
|
||||||
|
finalNvueListIs() {
|
||||||
|
if (this.usePageScroll) return 'view';
|
||||||
|
const nvueListIsLowerCase = this.nvueListIs.toLowerCase();
|
||||||
|
if (['list','waterfall','scroller'].indexOf(nvueListIsLowerCase) !== -1) return nvueListIsLowerCase;
|
||||||
|
return 'list';
|
||||||
|
},
|
||||||
|
finalNvueSuperListIs() {
|
||||||
|
return this.usePageScroll ? 'view' : 'scroller';
|
||||||
|
},
|
||||||
|
finalNvueRefresherEnabled() {
|
||||||
|
return this.finalNvueListIs !== 'view' && this.finalRefresherEnabled && !this.nShowRefresherReveal && !this.useChatRecordMode;
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
//旋转屏幕时更新宽度
|
||||||
|
uni.onWindowResize((res) => {
|
||||||
|
// this._nUpdateRefresherWidth();
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
// 列表滚动时触发
|
||||||
|
_nOnScroll(e) {
|
||||||
|
this.$emit('scroll', e);
|
||||||
|
const contentOffsetY = -e.contentOffset.y;
|
||||||
|
this.oldScrollTop = contentOffsetY;
|
||||||
|
this.nListIsDragging = e.isDragging;
|
||||||
|
this._checkShouldShowBackToTop(contentOffsetY, contentOffsetY - 1);
|
||||||
|
},
|
||||||
|
// 列表滚动结束
|
||||||
|
_nOnScrollend(e) {
|
||||||
|
this.$emit('scrollend', e);
|
||||||
|
},
|
||||||
|
// 下拉刷新刷新中
|
||||||
|
_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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,831 @@
|
||||||
|
// [z-paging]下拉刷新view模块
|
||||||
|
import u from '.././z-paging-utils'
|
||||||
|
import c from '.././z-paging-constant'
|
||||||
|
import Enum from '.././z-paging-enum'
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const weexAnimation = weex.requireModule('animation');
|
||||||
|
// #endif
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 下拉刷新的主题样式,支持black,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.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));
|
||||||
|
},
|
||||||
|
// 关闭二楼
|
||||||
|
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-PLUS || 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-ios/android或微信小程序或QQ小程序或h5平台,使用js控制下拉刷新
|
||||||
|
// #ifndef APP-IOS || APP-ANDROID || 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-PLUS || MP-WEIXIN || MP-QQ || H5
|
||||||
|
// this.scrollEnable = false;
|
||||||
|
// 通过transform控制下拉刷新view垂直偏移
|
||||||
|
this.refresherTransform = `translateY(${moveDis}px)`;
|
||||||
|
this.lastRefresherTouchmove = touch;
|
||||||
|
// #endif
|
||||||
|
this.moveDis = moveDis;
|
||||||
|
},
|
||||||
|
// #ifndef APP-PLUS || 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 && (this.refresherStatus === Enum.Refresher.ReleaseToRefresh || this.refresherStatus === Enum.Refresher.GoF2)) {
|
||||||
|
// 如果是松手进入二楼状态,则触发进入二楼
|
||||||
|
if (this.refresherStatus === Enum.Refresher.GoF2) {
|
||||||
|
this._handleGoF2();
|
||||||
|
this._refresherEnd();
|
||||||
|
} else {
|
||||||
|
// 如果是松手立即刷新状态,则触发下拉刷新
|
||||||
|
// #ifndef APP-PLUS || 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-PLUS || 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) {
|
||||||
|
// 计算当前下拉刷新结束需要延迟的时间
|
||||||
|
const refresherCompleteDelay = (fromAddData && (isUserPullDown || this.showRefresherWhenReload)) ? this.refresherCompleteDelay : 0;
|
||||||
|
// 如果延迟时间大于0,则展示刷新结束状态,否则直接展示默认状态
|
||||||
|
const refresherStatus = refresherCompleteDelay > 0 ? Enum.Refresher.Complete : Enum.Refresher.Default;
|
||||||
|
if (this.finalShowRefresherWhenReload) {
|
||||||
|
const stackCount = this.refresherRevealStackCount;
|
||||||
|
this.refresherRevealStackCount --;
|
||||||
|
if (stackCount > 1) return;
|
||||||
|
}
|
||||||
|
this._cleanRefresherEndTimeout();
|
||||||
|
this.refresherEndTimeout = u.delay(() => {
|
||||||
|
// 更新下拉刷新状态
|
||||||
|
this.refresherStatus = refresherStatus;
|
||||||
|
// 如果当前下拉刷新状态不是刷新结束,则认为其不在刷新结束状态
|
||||||
|
if (refresherStatus !== Enum.Refresher.Complete) {
|
||||||
|
this.isRefresherInComplete = false;
|
||||||
|
}
|
||||||
|
}, this.refresherStatus !== Enum.Refresher.Default && refresherStatus === Enum.Refresher.Default ? this.refresherCompleteDuration : 0);
|
||||||
|
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
if (refresherCompleteDelay > 0) {
|
||||||
|
this.isRefresherInComplete = true;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
this._cleanRefresherCompleteTimeout();
|
||||||
|
this.refresherCompleteTimeout = u.delay(() => {
|
||||||
|
let animateDuration = 1;
|
||||||
|
const animateType = this.refresherEndBounceEnabled && fromAddData ? 'cubic-bezier(0.19,1.64,0.42,0.72)' : 'linear';
|
||||||
|
if (fromAddData) {
|
||||||
|
animateDuration = this.refresherEndBounceEnabled ? this.refresherCompleteDuration / 1000 : this.refresherCompleteDuration / 3000;
|
||||||
|
}
|
||||||
|
this.refresherTransition = `transform ${fromAddData ? animateDuration : this.refresherDefaultDuration / 1000}s ${animateType}`;
|
||||||
|
// #ifndef APP-PLUS || MP-WEIXIN || MP-QQ || H5
|
||||||
|
this.refresherTransform = 'translateY(0px)';
|
||||||
|
this.currentDis = 0;
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS || 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-PLUS || MP-WEIXIN || MP-QQ || H5
|
||||||
|
this.refresherTransform = `translateY(${this.finalRefresherThreshold}px)`;
|
||||||
|
// #endif
|
||||||
|
// #ifdef APP-PLUS || 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-PLUS || 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.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);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,541 @@
|
||||||
|
// [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', '')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollTop: 0,
|
||||||
|
oldScrollTop: 0,
|
||||||
|
scrollLeft: 0,
|
||||||
|
oldScrollLeft: 0,
|
||||||
|
scrollViewStyle: {},
|
||||||
|
scrollViewContainerStyle: {},
|
||||||
|
scrollViewInStyle: {},
|
||||||
|
pageScrollTop: -1,
|
||||||
|
scrollEnable: true,
|
||||||
|
privateScrollWithAnimation: -1,
|
||||||
|
cacheScrollNodeHeight: -1,
|
||||||
|
superContentHeight: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
oldScrollTop(newVal) {
|
||||||
|
!this.usePageScroll && this._scrollTopChange(newVal,false);
|
||||||
|
},
|
||||||
|
pageScrollTop(newVal) {
|
||||||
|
this.usePageScroll && this._scrollTopChange(newVal,true);
|
||||||
|
},
|
||||||
|
usePageScroll: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.loaded && this.autoHeight && this._setAutoHeight(!newVal);
|
||||||
|
// #ifdef H5
|
||||||
|
if (newVal) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const mainScrollRef = this.$refs['zp-scroll-view'].$refs.main;
|
||||||
|
if (mainScrollRef) {
|
||||||
|
mainScrollRef.style = {};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
finalScrollTop(newVal) {
|
||||||
|
this.renderPropScrollTop = newVal < 6 ? 0 : 10;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
finalScrollWithAnimation() {
|
||||||
|
if (this.privateScrollWithAnimation !== -1) {
|
||||||
|
return this.privateScrollWithAnimation === 1;
|
||||||
|
}
|
||||||
|
return this.scrollWithAnimation;
|
||||||
|
},
|
||||||
|
finalScrollViewStyle() {
|
||||||
|
if (this.superContentZIndex != 1) {
|
||||||
|
this.scrollViewStyle['z-index'] = this.superContentZIndex;
|
||||||
|
this.scrollViewStyle['position'] = 'relative';
|
||||||
|
}
|
||||||
|
return this.scrollViewStyle;
|
||||||
|
},
|
||||||
|
finalScrollTop() {
|
||||||
|
return this.usePageScroll ? this.pageScrollTop : this.oldScrollTop;
|
||||||
|
},
|
||||||
|
// 当前是否是旧版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.$emit('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;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 滚动到底部
|
||||||
|
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
|
||||||
|
this._getNodeClientRect('#' + sel.replace('#', ''), this.$parent).then((node) => {
|
||||||
|
if (node) {
|
||||||
|
let nodeTop = node[0].top;
|
||||||
|
this._scrollIntoViewByNodeTop(nodeTop, offset, animate);
|
||||||
|
finishCallback && finishCallback();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (e) {}
|
||||||
|
},
|
||||||
|
// 通过nodeTop滚动到指定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 } = e.detail;
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.finalUseVirtualList && this._updateVirtualScroll(scrollTop, this.oldScrollTop - scrollTop);
|
||||||
|
// #endif
|
||||||
|
this.oldScrollTop = scrollTop;
|
||||||
|
this.oldScrollLeft = scrollLeft;
|
||||||
|
// 滚动区域内容的总高度 - 当前滚动的scrollTop = 当前滚动区域的顶部与内容底部的距离
|
||||||
|
const scrollDiff = e.detail.scrollHeight - this.oldScrollTop;
|
||||||
|
// 在非ios平台滚动中,再次验证一下是否滚动到了底部。因为在一些安卓设备中,有概率滚动到底部不触发@scrolltolower事件,因此添加双重检测逻辑
|
||||||
|
!this.isIos && this._checkScrolledToBottom(scrollDiff);
|
||||||
|
},
|
||||||
|
// 更新内置的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)}`;
|
||||||
|
let safeAreaInsetBottomAdd = this.safeAreaInsetBottom;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
let delayTime = 0;
|
||||||
|
// #ifdef MP-BAIDU || APP-NVUE
|
||||||
|
delayTime = 50;
|
||||||
|
// #endif
|
||||||
|
u.delay(() => {
|
||||||
|
this._getNodeClientRect(node).then((res) => {
|
||||||
|
if (res) {
|
||||||
|
let pageScrollNodeHeight = res[0].height;
|
||||||
|
if (type === 'bottom') {
|
||||||
|
if (safeAreaInsetBottomAdd) {
|
||||||
|
pageScrollNodeHeight += this.safeAreaBottom;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.cacheTopHeight = pageScrollNodeHeight;
|
||||||
|
}
|
||||||
|
this.$set(this.scrollViewStyle, marginText, `${pageScrollNodeHeight}px`);
|
||||||
|
} else if (safeAreaInsetBottomAdd) {
|
||||||
|
this.$set(this.scrollViewStyle, marginText, `${this.safeAreaBottom}px`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, delayTime)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,549 @@
|
||||||
|
// [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', '')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
virtualListKey: u.getInstanceId(),
|
||||||
|
virtualPageHeight: 0,
|
||||||
|
virtualCellHeight: 0,
|
||||||
|
virtualScrollTimeStamp: 0,
|
||||||
|
|
||||||
|
virtualList: [],
|
||||||
|
virtualPlaceholderTopHeight: 0,
|
||||||
|
virtualPlaceholderBottomHeight: 0,
|
||||||
|
virtualTopRangeIndex: 0,
|
||||||
|
virtualBottomRangeIndex: 0,
|
||||||
|
lastVirtualTopRangeIndex: 0,
|
||||||
|
lastVirtualBottomRangeIndex: 0,
|
||||||
|
virtualItemInsertedCount: 0,
|
||||||
|
|
||||||
|
virtualHeightCacheList: [],
|
||||||
|
|
||||||
|
getCellHeightRetryCount: {
|
||||||
|
fixed: 0,
|
||||||
|
dynamic: 0
|
||||||
|
},
|
||||||
|
pagingOrgTop: -1,
|
||||||
|
updateVirtualListFromDataChange: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 监听总数据的改变,刷新虚拟列表布局
|
||||||
|
realTotalData() {
|
||||||
|
this.updateVirtualListRender();
|
||||||
|
},
|
||||||
|
// 监听虚拟列表渲染数组的改变并emit
|
||||||
|
virtualList(newVal){
|
||||||
|
this.$emit('update:virtualList', newVal);
|
||||||
|
this.$emit('virtualListChange', newVal);
|
||||||
|
},
|
||||||
|
// 监听虚拟列表顶部占位高度改变并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.virtualPageHeight > 0 ? this.virtualPageHeight : this.windowHeight;
|
||||||
|
},
|
||||||
|
finalFixedCellHeight() {
|
||||||
|
return u.convertToPx(this.fixedCellHeight);
|
||||||
|
},
|
||||||
|
fianlVirtualCellIdPrefix() {
|
||||||
|
const prefix = this.virtualCellIdPrefix ? this.virtualCellIdPrefix + '-' : '';
|
||||||
|
return prefix + 'zp-id';
|
||||||
|
},
|
||||||
|
finalPlaceholderTopHeightStyle() {
|
||||||
|
// #ifdef VUE2
|
||||||
|
return { transform: this.virtualPlaceholderTopHeight > 0 ? `translateY(${this.virtualPlaceholderTopHeight}px)` : 'none' };
|
||||||
|
// #endif
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
virtualRangePageHeight(){
|
||||||
|
return this.finalVirtualPageHeight * this.preloadPage;
|
||||||
|
},
|
||||||
|
virtualScrollDisTimeStamp() {
|
||||||
|
return 1000 / this.virtualScrollFps;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 在使用动态高度虚拟列表时,若在列表数组中需要插入某个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
|
||||||
|
},
|
||||||
|
// 初始化虚拟列表
|
||||||
|
_virtualListInit() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
u.delay(() => {
|
||||||
|
// 获取虚拟列表滚动区域的高度
|
||||||
|
this._getNodeClientRect('.zp-scroll-view').then(node => {
|
||||||
|
if (node) {
|
||||||
|
this.pagingOrgTop = node[0].top;
|
||||||
|
this.virtualPageHeight = node[0].height;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// cellHeightMode为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 inParent = false;
|
||||||
|
// 在vue3+(微信小程序或QQ小程序)中,使用非内置列表写法时,若z-paging在swiper-item内存在无法获取slot插入的cell高度的问题
|
||||||
|
// 通过uni.createSelectorQuery().in(this.$parent)来解决此问题
|
||||||
|
// #ifdef VUE3
|
||||||
|
// #ifdef MP-WEIXIN || MP-QQ
|
||||||
|
if (this.forceCloseInnerList) {
|
||||||
|
inParent = true;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #endif
|
||||||
|
return this._getNodeClientRect(`#${this.fianlVirtualCellIdPrefix}-${index}`, this.finalUseInnerList, false, inParent);
|
||||||
|
},
|
||||||
|
// 处理使用内置列表时点击了cell事件
|
||||||
|
_innerCellClick(item, index) {
|
||||||
|
this.$emit('innerCellClick', item, index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
// [z-paging]常量
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// 当前版本号
|
||||||
|
version: '2.8.5',
|
||||||
|
// 延迟操作的通用时间
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
|
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,516 @@
|
||||||
|
// [z-paging]核心js
|
||||||
|
|
||||||
|
import zStatic from './z-paging-static'
|
||||||
|
import c from './z-paging-constant'
|
||||||
|
import u from './z-paging-utils'
|
||||||
|
|
||||||
|
import zPagingRefresh from '../components/z-paging-refresh'
|
||||||
|
import zPagingLoadMore from '../components/z-paging-load-more'
|
||||||
|
import zPagingEmptyView from '../../z-paging-empty-view/z-paging-empty-view'
|
||||||
|
|
||||||
|
// modules
|
||||||
|
import commonLayoutModule from './modules/common-layout'
|
||||||
|
import dataHandleModule from './modules/data-handle'
|
||||||
|
import i18nModule from './modules/i18n'
|
||||||
|
import nvueModule from './modules/nvue'
|
||||||
|
import emptyModule from './modules/empty'
|
||||||
|
import refresherModule from './modules/refresher'
|
||||||
|
import loadMoreModule from './modules/load-more'
|
||||||
|
import loadingModule from './modules/loading'
|
||||||
|
import chatRecordModerModule from './modules/chat-record-mode'
|
||||||
|
import scrollerModule from './modules/scroller'
|
||||||
|
import backToTopModule from './modules/back-to-top'
|
||||||
|
import virtualListModule from './modules/virtual-list'
|
||||||
|
|
||||||
|
import Enum from './z-paging-enum'
|
||||||
|
|
||||||
|
const systemInfo = uni.getSystemInfoSync();
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "z-paging",
|
||||||
|
components: {
|
||||||
|
zPagingRefresh,
|
||||||
|
zPagingLoadMore,
|
||||||
|
zPagingEmptyView
|
||||||
|
},
|
||||||
|
mixins: [
|
||||||
|
commonLayoutModule,
|
||||||
|
dataHandleModule,
|
||||||
|
i18nModule,
|
||||||
|
nvueModule,
|
||||||
|
emptyModule,
|
||||||
|
refresherModule,
|
||||||
|
loadMoreModule,
|
||||||
|
loadingModule,
|
||||||
|
chatRecordModerModule,
|
||||||
|
scrollerModule,
|
||||||
|
backToTopModule,
|
||||||
|
virtualListModule
|
||||||
|
],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// --------------静态资源---------------
|
||||||
|
base64BackToTop: zStatic.base64BackToTop,
|
||||||
|
|
||||||
|
// -------------全局数据相关--------------
|
||||||
|
// 当前加载类型
|
||||||
|
loadingType: Enum.LoadingType.Refresher,
|
||||||
|
requestTimeStamp: 0,
|
||||||
|
wxsPropType: '',
|
||||||
|
renderPropScrollTop: -1,
|
||||||
|
checkScrolledToBottomTimeOut: null,
|
||||||
|
cacheTopHeight: -1,
|
||||||
|
statusBarHeight: systemInfo.statusBarHeight,
|
||||||
|
|
||||||
|
// --------------状态&判断---------------
|
||||||
|
insideOfPaging: -1,
|
||||||
|
isLoadFailed: false,
|
||||||
|
isIos: systemInfo.platform === 'ios',
|
||||||
|
disabledBounce: false,
|
||||||
|
fromCompleteEmit: false,
|
||||||
|
disabledCompleteEmit: false,
|
||||||
|
pageLaunched: false,
|
||||||
|
active: false,
|
||||||
|
|
||||||
|
// ---------------wxs相关---------------
|
||||||
|
wxsIsScrollTopInTopRange: true,
|
||||||
|
wxsScrollTop: 0,
|
||||||
|
wxsPageScrollTop: 0,
|
||||||
|
wxsOnPullingDown: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
// 调用complete后延迟处理的时间,单位为毫秒,默认0毫秒,优先级高于minDelay
|
||||||
|
delay: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: u.gc('delay', 0),
|
||||||
|
},
|
||||||
|
// 触发@query后最小延迟处理的时间,单位为毫秒,默认0毫秒,优先级低于delay(假设设置为300毫秒,若分页请求时间小于300毫秒,则在调用complete后延迟[300毫秒-请求时长];若请求时长大于300毫秒,则不延迟),当show-refresher-when-reload为true或reload(true)时,其最小值为400
|
||||||
|
minDelay: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: u.gc('minDelay', 0),
|
||||||
|
},
|
||||||
|
// 设置z-paging的style,部分平台(如微信小程序)无法直接修改组件的style,可使用此属性代替
|
||||||
|
pagingStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: u.gc('pagingStyle', {}),
|
||||||
|
},
|
||||||
|
// z-paging的高度,优先级低于pagingStyle中设置的height;传字符串,如100px、100rpx、100%
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('height', '')
|
||||||
|
},
|
||||||
|
// z-paging的宽度,优先级低于pagingStyle中设置的width;传字符串,如100px、100rpx、100%
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('width', '')
|
||||||
|
},
|
||||||
|
// z-paging的最大宽度,优先级低于pagingStyle中设置的max-width;传字符串,如100px、100rpx、100%。默认为空,也就是铺满窗口宽度,若设置了特定值则会自动添加margin: 0 auto
|
||||||
|
maxWidth: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('maxWidth', '')
|
||||||
|
},
|
||||||
|
// z-paging的背景色,优先级低于pagingStyle中设置的background。传字符串,如"#ffffff"
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('bgColor', '')
|
||||||
|
},
|
||||||
|
// 设置z-paging的容器(插槽的父view)的style
|
||||||
|
pagingContentStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: u.gc('pagingContentStyle', {}),
|
||||||
|
},
|
||||||
|
// z-paging是否自动高度,若自动高度则会自动铺满屏幕
|
||||||
|
autoHeight: {
|
||||||
|
type: Boolean,
|
||||||
|
default: u.gc('autoHeight', false)
|
||||||
|
},
|
||||||
|
// z-paging是否自动高度时,附加的高度,注意添加单位px或rpx,若需要减少高度,则传负数
|
||||||
|
autoHeightAddition: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: u.gc('autoHeightAddition', '0px')
|
||||||
|
},
|
||||||
|
// loading(下拉刷新、上拉加载更多)的主题样式,支持black,white,默认black
|
||||||
|
defaultThemeStyle: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('defaultThemeStyle', 'black')
|
||||||
|
},
|
||||||
|
// z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认为100%,默认为是(当使用内置scroll-view滚动时有效)
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: u.gc('fixed', true)
|
||||||
|
},
|
||||||
|
// 是否开启底部安全区域适配
|
||||||
|
safeAreaInsetBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: u.gc('safeAreaInsetBottom', false)
|
||||||
|
},
|
||||||
|
// 开启底部安全区域适配后,是否使用placeholder形式实现,默认为否。为否时滚动区域会自动避开底部安全区域,也就是所有滚动内容都不会挡住底部安全区域,若设置为是,则滚动时滚动内容会挡住底部安全区域,但是当滚动到底部时才会避开底部安全区域
|
||||||
|
useSafeAreaPlaceholder: {
|
||||||
|
type: Boolean,
|
||||||
|
default: u.gc('useSafeAreaPlaceholder', false)
|
||||||
|
},
|
||||||
|
// z-paging bottom的背景色,默认透明,传字符串,如"#ffffff"
|
||||||
|
bottomBgColor: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('bottomBgColor', '')
|
||||||
|
},
|
||||||
|
// slot="top"的view的z-index,默认为99,仅使用页面滚动时有效
|
||||||
|
topZIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: u.gc('topZIndex', 99)
|
||||||
|
},
|
||||||
|
// z-paging内容容器父view的z-index,默认为1
|
||||||
|
superContentZIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: u.gc('superContentZIndex', 1)
|
||||||
|
},
|
||||||
|
// z-paging内容容器部分的z-index,默认为1
|
||||||
|
contentZIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: u.gc('contentZIndex', 1)
|
||||||
|
},
|
||||||
|
// z-paging二楼的z-index,默认为100
|
||||||
|
f2ZIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: u.gc('f2ZIndex', 100)
|
||||||
|
},
|
||||||
|
// 使用页面滚动时,是否在不满屏时自动填充满屏幕,默认为是
|
||||||
|
autoFullHeight: {
|
||||||
|
type: Boolean,
|
||||||
|
default: u.gc('autoFullHeight', true)
|
||||||
|
},
|
||||||
|
// 是否监听列表触摸方向改变,默认为否
|
||||||
|
watchTouchDirectionChange: {
|
||||||
|
type: Boolean,
|
||||||
|
default: u.gc('watchTouchDirectionChange', false)
|
||||||
|
},
|
||||||
|
// z-paging中布局的单位,默认为rpx
|
||||||
|
unit: {
|
||||||
|
type: String,
|
||||||
|
default: u.gc('unit', 'rpx')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 组件创建时,检测是否开始加载状态
|
||||||
|
if (this.createdReload && !this.refresherOnly && this.auto) {
|
||||||
|
this._startLoading();
|
||||||
|
this.$nextTick(this._preReload);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.active = true;
|
||||||
|
this.wxsPropType = u.getTime().toString();
|
||||||
|
this.renderJsIgnore;
|
||||||
|
if (!this.createdReload && !this.refresherOnly && this.auto) {
|
||||||
|
// 开始预加载
|
||||||
|
u.delay(() => this.$nextTick(this._preReload), 0);
|
||||||
|
}
|
||||||
|
// 如果开启了列表缓存,在初始化的时候通过缓存数据填充列表数据
|
||||||
|
this.finalUseCache && this._setListByLocalCache();
|
||||||
|
let delay = 0;
|
||||||
|
// #ifdef H5 || MP
|
||||||
|
delay = c.delayTime;
|
||||||
|
// #endif
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 初始化systemInfo
|
||||||
|
this.systemInfo = uni.getSystemInfoSync();
|
||||||
|
// 初始化z-paging高度
|
||||||
|
!this.usePageScroll && this.autoHeight && this._setAutoHeight();
|
||||||
|
// #ifdef MP-KUAISHOU
|
||||||
|
this._setFullScrollViewInHeight();
|
||||||
|
// #endif
|
||||||
|
this.loaded = true;
|
||||||
|
u.delay(() => {
|
||||||
|
// 更新fixed模式下z-paging的布局,主要是更新windowTop、windowBottom
|
||||||
|
this.updateFixedLayout();
|
||||||
|
// 更新缓存中z-paging整个内容容器高度
|
||||||
|
this._updateCachedSuperContentHeight();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
// 初始化页面滚动模式下slot="top"、slot="bottom"高度
|
||||||
|
this.updatePageScrollTopHeight();
|
||||||
|
this.updatePageScrollBottomHeight();
|
||||||
|
// 初始化slot="left"、slot="right"宽度
|
||||||
|
this.updateLeftAndRightWidth();
|
||||||
|
if (this.finalRefresherEnabled && this.useCustomRefresher) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.isTouchmoving = true;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 监听uni.$emit中全局emit的complete error等事件
|
||||||
|
this._onEmit();
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if (!this.isIos && !this.useChatRecordMode) {
|
||||||
|
this.nLoadingMoreFixedHeight = true;
|
||||||
|
}
|
||||||
|
// 在nvue中更新nvue下拉刷新view容器的宽度,而不是写死默认的750rpx,需要考虑列表宽度不是铺满屏幕的情况
|
||||||
|
this._nUpdateRefresherWidth();
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
// 虚拟列表模式时,初始化数据
|
||||||
|
this.finalUseVirtualList && this._virtualListInit();
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 非app平台中,在通过获取css设置的底部安全区域占位view高度设置bottom距离后,更新页面滚动底部高度
|
||||||
|
setTimeout(() => {
|
||||||
|
this._getCssSafeAreaInsetBottom(() => this.safeAreaInsetBottom && this.updatePageScrollBottomHeight());
|
||||||
|
}, delay)
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
this._handleUnmounted();
|
||||||
|
},
|
||||||
|
// #ifdef VUE3
|
||||||
|
unmounted() {
|
||||||
|
this._handleUnmounted();
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
watch: {
|
||||||
|
defaultThemeStyle: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal.length) {
|
||||||
|
this.finalRefresherDefaultStyle = newVal;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
autoHeight(newVal) {
|
||||||
|
this.loaded && !this.usePageScroll && this._setAutoHeight(newVal);
|
||||||
|
},
|
||||||
|
autoHeightAddition(newVal) {
|
||||||
|
this.loaded && !this.usePageScroll && this.autoHeight && this._setAutoHeight(newVal);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 当前z-paging的内置样式
|
||||||
|
finalPagingStyle() {
|
||||||
|
const pagingStyle = { ...this.pagingStyle };
|
||||||
|
if (!this.systemInfo) return pagingStyle;
|
||||||
|
const { windowTop, windowBottom } = this;
|
||||||
|
if (!this.usePageScroll && this.fixed) {
|
||||||
|
if (windowTop && !pagingStyle.top) {
|
||||||
|
pagingStyle.top = windowTop + 'px';
|
||||||
|
}
|
||||||
|
if (windowBottom && !pagingStyle.bottom) {
|
||||||
|
pagingStyle.bottom = windowBottom + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.bgColor.length && !pagingStyle['background']) {
|
||||||
|
pagingStyle['background'] = this.bgColor;
|
||||||
|
}
|
||||||
|
if (this.height.length && !pagingStyle['height']) {
|
||||||
|
pagingStyle['height'] = this.height;
|
||||||
|
}
|
||||||
|
if (this.width.length && !pagingStyle['width']) {
|
||||||
|
pagingStyle['width'] = this.width;
|
||||||
|
}
|
||||||
|
if (this.maxWidth.length && !pagingStyle['max-width']) {
|
||||||
|
pagingStyle['max-width'] = this.maxWidth;
|
||||||
|
pagingStyle['margin'] = '0 auto';
|
||||||
|
}
|
||||||
|
return pagingStyle;
|
||||||
|
},
|
||||||
|
// 当前z-paging内容的样式
|
||||||
|
finalPagingContentStyle() {
|
||||||
|
if (this.contentZIndex != 1) {
|
||||||
|
this.pagingContentStyle['z-index'] = this.contentZIndex;
|
||||||
|
this.pagingContentStyle['position'] = 'relative';
|
||||||
|
}
|
||||||
|
return this.pagingContentStyle;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderJsIgnore() {
|
||||||
|
if ((this.usePageScroll && this.useChatRecordMode) || (!this.refresherEnabled && this.scrollable) || !this.useCustomRefresher) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.renderPropScrollTop = 10;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
windowHeight() {
|
||||||
|
if (!this.systemInfo) return 0;
|
||||||
|
return this.systemInfo.windowHeight || 0;
|
||||||
|
},
|
||||||
|
windowBottom() {
|
||||||
|
if (!this.systemInfo) return 0;
|
||||||
|
let windowBottom = this.systemInfo.windowBottom || 0;
|
||||||
|
// 如果开启底部安全区域适配并且不使用placeholder的形式体现并且不是聊天记录模式(因为聊天记录模式在keyboardHeight计算初已添加了底部安全区域),在windowBottom添加底部安全区域高度
|
||||||
|
if (this.safeAreaInsetBottom && !this.useSafeAreaPlaceholder && !this.useChatRecordMode) {
|
||||||
|
windowBottom += this.safeAreaBottom;
|
||||||
|
}
|
||||||
|
return windowBottom;
|
||||||
|
},
|
||||||
|
isIosAndH5() {
|
||||||
|
// #ifndef H5
|
||||||
|
return false;
|
||||||
|
// #endif
|
||||||
|
return this.isIos;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 当前版本号
|
||||||
|
getVersion() {
|
||||||
|
return `z-paging v${c.version}`;
|
||||||
|
},
|
||||||
|
// 设置nvue List的specialEffects
|
||||||
|
setSpecialEffects(args) {
|
||||||
|
this.setListSpecialEffects(args);
|
||||||
|
},
|
||||||
|
// 与setSpecialEffects等效,兼容旧版本
|
||||||
|
setListSpecialEffects(args) {
|
||||||
|
this.nFixFreezing = args && Object.keys(args).length;
|
||||||
|
if (this.isIos) {
|
||||||
|
this.privateRefresherEnabled = 0;
|
||||||
|
}
|
||||||
|
!this.usePageScroll && this.$refs['zp-n-list'].setSpecialEffects(args);
|
||||||
|
},
|
||||||
|
// #ifdef APP-VUE
|
||||||
|
// 当app长时间进入后台后进入前台,因系统内存管理导致app重新加载时,进行一些适配处理
|
||||||
|
_handlePageLaunch() {
|
||||||
|
// 首次触发不进行处理,只有进入后台后打开app重新加载时才处理
|
||||||
|
if (this.pageLaunched) {
|
||||||
|
// 解决在vue3+ios中,app ReLaunch时顶部下拉刷新展示位置向下偏移的问题
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.refresherThresholdUpdateTag = 1;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.refresherThresholdUpdateTag = 0;
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// 解决使用虚拟列表时,app ReLaunch时白屏问题
|
||||||
|
this._checkVirtualListScroll();
|
||||||
|
}
|
||||||
|
this.pageLaunched = true;
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// 使手机发生较短时间的振动(15ms)
|
||||||
|
_doVibrateShort() {
|
||||||
|
// #ifndef H5
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
if (this.isIos) {
|
||||||
|
const UISelectionFeedbackGenerator = plus.ios.importClass('UISelectionFeedbackGenerator');
|
||||||
|
const feedbackGenerator = new UISelectionFeedbackGenerator();
|
||||||
|
feedbackGenerator.init();
|
||||||
|
setTimeout(() => {
|
||||||
|
feedbackGenerator.selectionChanged();
|
||||||
|
}, 0)
|
||||||
|
} else {
|
||||||
|
plus.device.vibrate(15);
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-PLUS
|
||||||
|
uni.vibrateShort();
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 设置z-paging高度
|
||||||
|
async _setAutoHeight(shouldFullHeight = true, scrollViewNode = null) {
|
||||||
|
const heightKey = 'min-height';
|
||||||
|
try {
|
||||||
|
if (shouldFullHeight) {
|
||||||
|
// 如果需要铺满全屏,则计算当前全屏可是区域的高度
|
||||||
|
let finalScrollViewNode = scrollViewNode || await this._getNodeClientRect('.zp-scroll-view');
|
||||||
|
let finalScrollBottomNode = await this._getNodeClientRect('.zp-page-bottom');
|
||||||
|
if (finalScrollViewNode) {
|
||||||
|
const scrollViewTop = finalScrollViewNode[0].top;
|
||||||
|
let scrollViewHeight = this.windowHeight - scrollViewTop;
|
||||||
|
scrollViewHeight -= finalScrollBottomNode ? finalScrollBottomNode[0].height : 0;
|
||||||
|
const additionHeight = u.convertToPx(this.autoHeightAddition);
|
||||||
|
// 在支付宝小程序中,添加!important会导致min-height失效,因此在支付宝小程序中需要去掉
|
||||||
|
let importantSuffix = ' !important';
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
importantSuffix = '';
|
||||||
|
// #endif
|
||||||
|
const finalHeight = scrollViewHeight + additionHeight - (this.insideMore ? 1 : 0) + 'px' + importantSuffix;
|
||||||
|
this.$set(this.scrollViewStyle, heightKey, finalHeight);
|
||||||
|
this.$set(this.scrollViewInStyle, heightKey, finalHeight);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$delete(this.scrollViewStyle, heightKey);
|
||||||
|
this.$delete(this.scrollViewInStyle, heightKey);
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
},
|
||||||
|
// #ifdef MP-KUAISHOU
|
||||||
|
// 设置scroll-view内容器的最小高度等于scroll-view的高度(为了解决在快手小程序中内容较少时scroll-view内容器高度无法铺满scroll-view的问题)
|
||||||
|
async _setFullScrollViewInHeight() {
|
||||||
|
try {
|
||||||
|
// 如果需要铺满全屏,则计算当前全屏可是区域的高度
|
||||||
|
const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view');
|
||||||
|
scrollViewNode && this.$set(this.scrollViewInStyle, 'min-height', scrollViewNode[0].height + 'px');
|
||||||
|
} catch (e) {}
|
||||||
|
},
|
||||||
|
// #endif
|
||||||
|
// 组件销毁后续处理
|
||||||
|
_handleUnmounted() {
|
||||||
|
this.active = false;
|
||||||
|
this._offEmit();
|
||||||
|
// 取消监听键盘高度变化事件(H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序不支持)
|
||||||
|
// #ifndef H5 || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU
|
||||||
|
this.useChatRecordMode && uni.offKeyboardHeightChange(this._handleKeyboardHeightChange);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
// 触发更新是否超出页面状态
|
||||||
|
_updateInsideOfPaging() {
|
||||||
|
this.insideMore && this.insideOfPaging === true && setTimeout(this.doLoadMore, 200)
|
||||||
|
},
|
||||||
|
// 清除timeout
|
||||||
|
_cleanTimeout(timeout) {
|
||||||
|
if (timeout) {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = null;
|
||||||
|
}
|
||||||
|
return timeout;
|
||||||
|
},
|
||||||
|
// 添加全局emit监听
|
||||||
|
_onEmit() {
|
||||||
|
uni.$on(c.errorUpdateKey, (errorMsg) => {
|
||||||
|
if (this.loading) {
|
||||||
|
if (!!errorMsg) {
|
||||||
|
this.customerEmptyViewErrorText = errorMsg;
|
||||||
|
}
|
||||||
|
this.complete(false).catch(() => {});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
uni.$on(c.completeUpdateKey, (data) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.loading) {
|
||||||
|
if (!this.disabledCompleteEmit) {
|
||||||
|
const type = data.type || 'normal';
|
||||||
|
const list = data.list || data;
|
||||||
|
const rule = data.rule;
|
||||||
|
this.fromCompleteEmit = true;
|
||||||
|
switch (type){
|
||||||
|
case 'normal':
|
||||||
|
this.complete(list);
|
||||||
|
break;
|
||||||
|
case 'total':
|
||||||
|
this.completeByTotal(list, rule);
|
||||||
|
break;
|
||||||
|
case 'nomore':
|
||||||
|
this.completeByNoMore(list, rule);
|
||||||
|
break;
|
||||||
|
case 'key':
|
||||||
|
this.completeByKey(list, rule);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.disabledCompleteEmit = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 1);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 销毁全局emit和listener监听
|
||||||
|
_offEmit(){
|
||||||
|
uni.$off(c.errorUpdateKey);
|
||||||
|
uni.$off(c.completeUpdateKey);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
// [z-paging]使用页面滚动时引入此mixin,用于监听和处理onPullDownRefresh等页面生命周期方法
|
||||||
|
|
||||||
|
export default {
|
||||||
|
onPullDownRefresh() {
|
||||||
|
if (this.isPagingRefNotFound()) return;
|
||||||
|
this.$refs.paging.reload().catch(() => {});
|
||||||
|
},
|
||||||
|
onPageScroll(e) {
|
||||||
|
if (this.isPagingRefNotFound()) return;
|
||||||
|
this.$refs.paging.updatePageScrollTop(e.scrollTop);
|
||||||
|
e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore();
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
if (this.isPagingRefNotFound()) return;
|
||||||
|
this.$refs.paging.pageReachBottom();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isPagingRefNotFound() {
|
||||||
|
return !this.$refs.paging;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,288 @@
|
||||||
|
// [z-paging]工具类
|
||||||
|
|
||||||
|
import zLocalConfig from '../config/index'
|
||||||
|
import c from './z-paging-constant'
|
||||||
|
|
||||||
|
const storageKey = 'Z-PAGING-REFRESHER-TIME-STORAGE-KEY';
|
||||||
|
let config = null;
|
||||||
|
let configLoaded = false;
|
||||||
|
const timeoutMap = {};
|
||||||
|
|
||||||
|
// #ifdef APP-HARMONY
|
||||||
|
let screenWidth = 0;
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 获取默认配置信息
|
||||||
|
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 getTouch(e) {
|
||||||
|
let touch = null;
|
||||||
|
if (e.touches && e.touches.length) {
|
||||||
|
touch = e.touches[0];
|
||||||
|
} else if (e.changedTouches && e.changedTouches.length) {
|
||||||
|
touch = e.changedTouches[0];
|
||||||
|
} else if (e.datail && e.datail != {}) {
|
||||||
|
touch = e.datail;
|
||||||
|
} else {
|
||||||
|
return { touchX: 0, touchY: 0 }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
touchX: touch.clientX,
|
||||||
|
touchY: touch.clientY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断当前手势是否在z-paging内触发
|
||||||
|
function getTouchFromZPaging(target) {
|
||||||
|
if (target && target.tagName && target.tagName !== 'BODY' && target.tagName !== 'UNI-PAGE-BODY') {
|
||||||
|
const classList = target.classList;
|
||||||
|
if (classList && classList.contains('z-paging-content')) {
|
||||||
|
// 此处额外记录当前z-paging是否是页面滚动、是否滚动到了顶部、是否是聊天记录模式以传给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 { isFromZp: false };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 递归获取z-paging所在的parent,如果查找不到则返回null
|
||||||
|
function getParent(parent) {
|
||||||
|
if (!parent) return null;
|
||||||
|
if (parent.$refs.paging) return parent;
|
||||||
|
return getParent(parent.$parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打印错误信息
|
||||||
|
function consoleErr(err) {
|
||||||
|
console.error(`[z-paging]${err}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 延时操作,如果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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置下拉刷新时间
|
||||||
|
function setRefesrherTime(time, key) {
|
||||||
|
const datas = getRefesrherTime() || {};
|
||||||
|
datas[key] = time;
|
||||||
|
uni.setStorageSync(storageKey, datas);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取下拉刷新时间
|
||||||
|
function getRefesrherTime() {
|
||||||
|
return uni.getStorageSync(storageKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过下拉刷新标识key获取下拉刷新时间
|
||||||
|
function getRefesrherTimeByKey(key) {
|
||||||
|
const datas = getRefesrherTime();
|
||||||
|
return datas && datas[key] ? datas[key] : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通过下拉刷新标识key获取下拉刷新时间(格式化之后)
|
||||||
|
function getRefesrherFormatTimeByKey(key, textMap) {
|
||||||
|
const time = getRefesrherTimeByKey(key);
|
||||||
|
const timeText = time ? _timeFormat(time, textMap) : textMap.none;
|
||||||
|
return `${textMap.title}${timeText}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将文本的px或者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) {
|
||||||
|
// #ifdef APP-HARMONY
|
||||||
|
if (!screenWidth) {
|
||||||
|
screenWidth = uni.getSystemInfoSync().screenWidth;
|
||||||
|
}
|
||||||
|
return (screenWidth * Number.parseFloat(rpx)) / 750;
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-HARMONY
|
||||||
|
return uni.upx2px(rpx);
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前时间
|
||||||
|
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 newObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------------------ 私有方法 ------------------------
|
||||||
|
// 处理全局配置
|
||||||
|
function _handleDefaultConfig() {
|
||||||
|
// 确保只加载一次全局配置
|
||||||
|
if (configLoaded) return;
|
||||||
|
// 优先从config.js中读取
|
||||||
|
if (zLocalConfig && Object.keys(zLocalConfig).length) {
|
||||||
|
config = zLocalConfig;
|
||||||
|
}
|
||||||
|
// 如果在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, textMap) {
|
||||||
|
const date = new Date(time);
|
||||||
|
const currentDate = new Date();
|
||||||
|
// 设置time对应的天,去除时分秒,使得可以直接比较日期
|
||||||
|
const dateDay = new Date(time).setHours(0, 0, 0, 0);
|
||||||
|
// 设置当前的天,去除时分秒,使得可以直接比较日期
|
||||||
|
const currentDateDay = new Date().setHours(0, 0, 0, 0);
|
||||||
|
const disTime = dateDay - currentDateDay;
|
||||||
|
let dayStr = '';
|
||||||
|
const timeStr = _dateTimeFormat(date);
|
||||||
|
if (disTime === 0) {
|
||||||
|
dayStr = textMap.today;
|
||||||
|
} else if (disTime === -86400000) {
|
||||||
|
dayStr = textMap.yesterday;
|
||||||
|
} else {
|
||||||
|
dayStr = _dateDayFormat(date, date.getFullYear() !== currentDate.getFullYear());
|
||||||
|
}
|
||||||
|
return `${dayStr} ${timeStr}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// date格式化为年月日
|
||||||
|
function _dateDayFormat(date, showYear = true) {
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = date.getMonth() + 1;
|
||||||
|
const day = date.getDate();
|
||||||
|
return showYear ? `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}` : `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// data格式化为时分
|
||||||
|
function _dateTimeFormat(date) {
|
||||||
|
const hour = date.getHours();
|
||||||
|
const minute = date.getMinutes();
|
||||||
|
return `${_fullZeroToTwo(hour)}:${_fullZeroToTwo(minute)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 不满2位在前面填充0
|
||||||
|
function _fullZeroToTwo(str) {
|
||||||
|
str = str.toString();
|
||||||
|
return str.length === 1 ? '0' + str : str;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 驼峰转短横线
|
||||||
|
function _toKebab(value) {
|
||||||
|
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 短横线转驼峰
|
||||||
|
function _toCamelCase(value) {
|
||||||
|
return value.replace(/-([a-z])/g, (_, group1) => group1.toUpperCase());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
gc,
|
||||||
|
setRefesrherTime,
|
||||||
|
getRefesrherFormatTimeByKey,
|
||||||
|
getTouch,
|
||||||
|
getTouchFromZPaging,
|
||||||
|
getParent,
|
||||||
|
convertToPx,
|
||||||
|
getTime,
|
||||||
|
getInstanceId,
|
||||||
|
consoleErr,
|
||||||
|
delay,
|
||||||
|
wait,
|
||||||
|
isPromise,
|
||||||
|
addUnit,
|
||||||
|
deepCopy,
|
||||||
|
rpx2px
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
// [z-paging]使用renderjs在app-vue和h5中对touchmove事件冒泡进行处理
|
||||||
|
|
||||||
|
import u from '../js/z-paging-utils'
|
||||||
|
const data = {
|
||||||
|
startY: 0,
|
||||||
|
isTouchFromZPaging: false,
|
||||||
|
isUsePageScroll: false,
|
||||||
|
isReachedTop: true,
|
||||||
|
isIosAndH5: false,
|
||||||
|
useChatRecordMode: false,
|
||||||
|
appLaunched: false
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
if (window) {
|
||||||
|
this._handleTouch();
|
||||||
|
// #ifdef APP-VUE
|
||||||
|
this.$ownerInstance.callMethod('_handlePageLaunch');
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 接收逻辑层发送的数据(是否是ios+h5)
|
||||||
|
renderPropIsIosAndH5Change(newVal) {
|
||||||
|
if (newVal === -1) return;
|
||||||
|
data.isIosAndH5 = newVal;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 拦截处理touch事件
|
||||||
|
_handleTouch() {
|
||||||
|
if (!window.$zPagingRenderJsInited) {
|
||||||
|
window.$zPagingRenderJsInited = true;
|
||||||
|
window.addEventListener('touchstart', this._handleTouchstart, { passive: true })
|
||||||
|
window.addEventListener('touchmove', this._handleTouchmove, { passive: false })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 处理touch开始
|
||||||
|
_handleTouchstart(e) {
|
||||||
|
const touch = u.getTouch(e);
|
||||||
|
data.startY = touch.touchY;
|
||||||
|
const touchResult = u.getTouchFromZPaging(e.target);
|
||||||
|
data.isTouchFromZPaging = touchResult.isFromZp;
|
||||||
|
data.isUsePageScroll = touchResult.isPageScroll;
|
||||||
|
data.isReachedTop = touchResult.isReachedTop;
|
||||||
|
data.useChatRecordMode = touchResult.isUseChatRecordMode;
|
||||||
|
},
|
||||||
|
// 处理touch中
|
||||||
|
_handleTouchmove(e) {
|
||||||
|
const touch = u.getTouch(e);
|
||||||
|
const moveY = touch.touchY - data.startY;
|
||||||
|
// 如果是在z-paging内触摸并且(是在顶部位置且是下拉的情况下(或不是聊天记录滚动模式并且在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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,382 @@
|
||||||
|
// [z-paging]微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新,降低逻辑层与视图层的通信折损,提升性能
|
||||||
|
|
||||||
|
var currentDis = 0;
|
||||||
|
var isPCFlag = -1;
|
||||||
|
var startY = -1;
|
||||||
|
|
||||||
|
// 监听js层传过来的数据
|
||||||
|
function propObserver(newVal, oldVal, ownerIns, ins) {
|
||||||
|
var state = ownerIns.getState() || {};
|
||||||
|
state.currentIns = ins;
|
||||||
|
var dataset = ins.getDataset();
|
||||||
|
var loading = dataset.loading == true;
|
||||||
|
// 如果是下拉刷新结束,更新transform
|
||||||
|
if (newVal && newVal.indexOf('end') != -1) {
|
||||||
|
var transition = newVal.split('end')[0];
|
||||||
|
_setTransform('translateY(0px)', ins, false, transition);
|
||||||
|
state.moveDis = 0;
|
||||||
|
state.oldMoveDis = 0;
|
||||||
|
currentDis = 0;
|
||||||
|
} else if (newVal && newVal.indexOf('begin') != -1) {
|
||||||
|
// 如果是下拉刷新开始,更新transform
|
||||||
|
var refresherThreshold = ins.getDataset().refresherthreshold;
|
||||||
|
_setTransformValue(refresherThreshold, ins, state, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// touch开始
|
||||||
|
function touchstart(e, ownerIns) {
|
||||||
|
var ins = _getIns(ownerIns);
|
||||||
|
var state = {};
|
||||||
|
var dataset = {};
|
||||||
|
ownerIns.callMethod('_handleListTouchstart');
|
||||||
|
if (ins) {
|
||||||
|
state = ins.getState();
|
||||||
|
dataset = ins.getDataset();
|
||||||
|
if (_touchDisabled(e, ins, 0)) return;
|
||||||
|
}
|
||||||
|
var isTouchEnded = state.isTouchEnded;
|
||||||
|
state.oldMoveDis = 0;
|
||||||
|
var touch = _getTouch(e);
|
||||||
|
var loading = _isTrue(dataset.loading);
|
||||||
|
state.startY = touch.touchY;
|
||||||
|
startY = state.startY;
|
||||||
|
state.lastTouch = touch;
|
||||||
|
if (!loading && isTouchEnded) {
|
||||||
|
state.isTouchmoving = false;
|
||||||
|
}
|
||||||
|
state.isTouchEnded = false;
|
||||||
|
// 通知js层touch开始
|
||||||
|
ownerIns.callMethod('_handleRefresherTouchstart', touch);
|
||||||
|
}
|
||||||
|
|
||||||
|
// touch中
|
||||||
|
function touchmove(e, ownerIns) {
|
||||||
|
var touch = _getTouch(e);
|
||||||
|
var ins = _getIns(ownerIns);
|
||||||
|
var dataset = ins.getDataset();
|
||||||
|
var refresherThreshold = dataset.refresherthreshold;
|
||||||
|
var refresherF2Threshold = dataset.refresherf2threshold;
|
||||||
|
var refresherF2Enabled = _isTrue(dataset.refresherf2enabled);
|
||||||
|
var isIos = _isTrue(dataset.isios);
|
||||||
|
var state = ins.getState();
|
||||||
|
var watchTouchDirectionChange = _isTrue(dataset.watchtouchdirectionchange);
|
||||||
|
var moveDisObj = {};
|
||||||
|
var moveDis = 0;
|
||||||
|
var prevent = false;
|
||||||
|
// 如果需要监听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)) {
|
||||||
|
_handlePullingDown(state, ownerIns, false);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
moveDisObj = _getMoveDis(e, ins);
|
||||||
|
moveDis = moveDisObj.currentDis;
|
||||||
|
prevent = moveDisObj.isDown;
|
||||||
|
if (moveDis < 0) {
|
||||||
|
// moveDis小于0,将transform重置为0
|
||||||
|
_setTransformValue(0, ins, state, false);
|
||||||
|
_handlePullingDown(state, ownerIns, false);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (prevent && !state.disabledBounce) {
|
||||||
|
// 如果是用户下拉并且需要触发下拉刷新,需要通知js层将列表禁止滚动,防止在下拉刷新过程中列表也可以滚动导致的下拉刷新偏移过大的问题(在下拉刷新过程中仅通知一次)
|
||||||
|
ownerIns.callMethod('_handleScrollViewBounce', { bounce: false });
|
||||||
|
state.disabledBounce = true;
|
||||||
|
_handlePullingDown(state, ownerIns, prevent);
|
||||||
|
return !prevent;
|
||||||
|
}
|
||||||
|
// 更新transform
|
||||||
|
_setTransformValue(moveDis, ins, state, false);
|
||||||
|
var oldRefresherStatus = state.refresherStatus;
|
||||||
|
var oldIsTouchmoving = _isTrue(dataset.oldistouchmoving);
|
||||||
|
var hasTouchmove = _isTrue(dataset.hastouchmove);
|
||||||
|
var isTouchmoving = state.isTouchmoving;
|
||||||
|
state.refresherStatus = moveDis >= refresherThreshold ? (refresherF2Enabled && moveDis > refresherF2Threshold ? 'goF2' : 'releaseToRefresh') : 'default';
|
||||||
|
if (!isTouchmoving) {
|
||||||
|
state.isTouchmoving = true;
|
||||||
|
isTouchmoving = true;
|
||||||
|
}
|
||||||
|
if (state.isTouchEnded) {
|
||||||
|
state.isTouchEnded = false;
|
||||||
|
}
|
||||||
|
// 如果需要实时监听下拉位置偏移,则需要实时通知js层,此操作会使wxs层与js层频繁通信从而导致在一些性能较差设备中下拉刷新卡顿
|
||||||
|
if (hasTouchmove) {
|
||||||
|
ownerIns.callMethod('_handleWxsPullingDown', { moveDis: moveDis, diffDis: moveDisObj.diffDis });
|
||||||
|
}
|
||||||
|
// 在下拉刷新状态改变时通知js层
|
||||||
|
if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving != isTouchmoving) {
|
||||||
|
ownerIns.callMethod('_handleRefresherTouchmove', moveDis, touch);
|
||||||
|
}
|
||||||
|
_handlePullingDown(state, ownerIns, prevent);
|
||||||
|
return !prevent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// touch结束
|
||||||
|
function touchend(e, ownerIns) {
|
||||||
|
var touch = _getTouch(e);
|
||||||
|
var ins = _getIns(ownerIns);
|
||||||
|
var dataset = ins.getDataset();
|
||||||
|
var state = ins.getState();
|
||||||
|
if (state.disabledBounce) {
|
||||||
|
// 通知js允许列表滚动
|
||||||
|
ownerIns.callMethod('_handleScrollViewBounce', { bounce: true });
|
||||||
|
state.disabledBounce = false;
|
||||||
|
}
|
||||||
|
if (_touchDisabled(e, ins, 2)) return;
|
||||||
|
state.reachMaxAngle = true;
|
||||||
|
state.hitReachMaxAngleCount = 0;
|
||||||
|
state.fixedIsTopHitCount = 0;
|
||||||
|
if (!state.isTouchmoving) return;
|
||||||
|
var oldRefresherStatus = state.refresherStatus;
|
||||||
|
var oldMoveDis = state.moveDis;
|
||||||
|
var refresherThreshold = ins.getDataset().refresherthreshold;
|
||||||
|
var moveDis = _getMoveDis(e, ins).currentDis;
|
||||||
|
if (!(moveDis >= refresherThreshold && oldRefresherStatus === 'releaseToRefresh')) {
|
||||||
|
state.isTouchmoving = false;
|
||||||
|
}
|
||||||
|
// 通知js层touch结束
|
||||||
|
ownerIns.callMethod('_handleRefresherTouchend', moveDis);
|
||||||
|
state.isTouchEnded = true;
|
||||||
|
if (oldMoveDis < refresherThreshold) return;
|
||||||
|
var animate = false;
|
||||||
|
if (moveDis >= refresherThreshold) {
|
||||||
|
moveDis = refresherThreshold;
|
||||||
|
animate = true;
|
||||||
|
}
|
||||||
|
_setTransformValue(moveDis, ins, state, animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
|
// 判断是否是pc平台
|
||||||
|
function isPC() {
|
||||||
|
if (!navigator) return false;
|
||||||
|
if (isPCFlag != -1) return isPCFlag;
|
||||||
|
var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||||
|
isPCFlag = agents.every(function(item) { return navigator.userAgent.indexOf(item) < 0 });
|
||||||
|
return isPCFlag;
|
||||||
|
}
|
||||||
|
|
||||||
|
var movable = false;
|
||||||
|
|
||||||
|
// 在pc平台监听mousedown、mousemove、mouseup等相关事件并转为对应touch事件处理,使得在pc平台也支持通过鼠标进行下拉刷新
|
||||||
|
|
||||||
|
function mousedown(e, ins) {
|
||||||
|
if (!isPC()) return;
|
||||||
|
touchstart(e, ins);
|
||||||
|
movable = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousemove(e, ins) {
|
||||||
|
if (!isPC() || !movable) return;
|
||||||
|
touchmove(e, ins);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseup(e, ins) {
|
||||||
|
if (!isPC()) return;
|
||||||
|
touchend(e, ins);
|
||||||
|
movable = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseleave(e, ins) {
|
||||||
|
if (!isPC()) return;
|
||||||
|
movable = false;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
|
// 修改视图层transform
|
||||||
|
function _setTransformValue(value, ins, state, animate) {
|
||||||
|
value = value || 0;
|
||||||
|
if (state.moveDis == value) return;
|
||||||
|
state.moveDis = value;
|
||||||
|
_setTransform('translateY(' + value + 'px)', ins, animate, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置视图层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) {
|
||||||
|
stl['transition'] = 'transform .1s linear';
|
||||||
|
}
|
||||||
|
if (transition.length) {
|
||||||
|
stl['transition'] = transition;
|
||||||
|
}
|
||||||
|
ins.setStyle(stl);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 进一步处理下拉刷新的偏移数据
|
||||||
|
function _getMoveDis(e, ins) {
|
||||||
|
var state = ins.getState();
|
||||||
|
var refresherThreshold = parseFloat(ins.getDataset().refresherthreshold);
|
||||||
|
var refresherOutRate = parseFloat(ins.getDataset().refresheroutrate);
|
||||||
|
var refresherPullRate = parseFloat(ins.getDataset().refresherpullrate);
|
||||||
|
var touch = _getTouch(e);
|
||||||
|
var currentStartY = !state.startY || state.startY == 'NaN' ? startY : state.startY;
|
||||||
|
var moveDis = touch.touchY - currentStartY;
|
||||||
|
var oldMoveDis = state.oldMoveDis || 0;
|
||||||
|
state.oldMoveDis = moveDis;
|
||||||
|
// 获取当前下拉刷新位置与上次的偏移量
|
||||||
|
var diffDis = moveDis - oldMoveDis;
|
||||||
|
if (diffDis > 0) {
|
||||||
|
// 对偏移量进行进一步处理,通过refresherPullRate等配置进行约束
|
||||||
|
diffDis = diffDis * refresherPullRate;
|
||||||
|
if (currentDis > refresherThreshold) {
|
||||||
|
diffDis = diffDis * (1 - refresherOutRate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 控制diffDis过大的情况,比如进入页面突然猛然下拉,此时diffDis不应进行太大的偏移
|
||||||
|
diffDis = diffDis > 100 ? diffDis / 100 : (diffDis > 20 ? diffDis / 2.2 : diffDis);
|
||||||
|
currentDis += diffDis;
|
||||||
|
currentDis = Math.max(0, currentDis);
|
||||||
|
return {
|
||||||
|
currentDis: currentDis,
|
||||||
|
diffDis: diffDis,
|
||||||
|
isDown: diffDis > 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取经过统一格式包装的当前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 != {}) {
|
||||||
|
touch = e.datail;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
touchX: touch.clientX,
|
||||||
|
touchY: touch.clientY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取当前currentIns
|
||||||
|
function _getIns(ownerIns) {
|
||||||
|
var ins = ownerIns.getState().currentIns;
|
||||||
|
if (!ins) {
|
||||||
|
ownerIns.callMethod('_handlePropUpdate');
|
||||||
|
}
|
||||||
|
return ins;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断当前状态是否允许下拉刷新
|
||||||
|
function _touchDisabled(e, ins, processTag) {
|
||||||
|
var dataset = ins.getDataset();
|
||||||
|
var state = ins.getState();
|
||||||
|
var loading = _isTrue(dataset.loading);
|
||||||
|
var useChatRecordMode = _isTrue(dataset.usechatrecordmode);
|
||||||
|
var refresherEnabled = _isTrue(dataset.refresherenabled);
|
||||||
|
var useCustomRefresher = _isTrue(dataset.usecustomrefresher);
|
||||||
|
var usePageScroll = _isTrue(dataset.usepagescroll);
|
||||||
|
var pageScrollTop = parseFloat(dataset.pagescrolltop);
|
||||||
|
var scrollTop = parseFloat(dataset.scrolltop);
|
||||||
|
var finalScrollTop = usePageScroll ? pageScrollTop : scrollTop;
|
||||||
|
var fixedIsTop = false;
|
||||||
|
// 是否要处理滚动到顶部scrollTop不为0时候的容错,为解决在安卓中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 <= 2) {
|
||||||
|
fixedIsTop = false;
|
||||||
|
}
|
||||||
|
state.fixedIsTopHitCount = fixedIsTopHitCount;
|
||||||
|
} else {
|
||||||
|
state.fixedIsTopHitCount = 0;
|
||||||
|
}
|
||||||
|
if (handleFaultTolerantMove && processTag === 0) {
|
||||||
|
state.startScrollTop = finalScrollTop || 0;
|
||||||
|
}
|
||||||
|
if (handleFaultTolerantMove && processTag === 2) {
|
||||||
|
fixedIsTop = true;
|
||||||
|
}
|
||||||
|
return loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher ||
|
||||||
|
((usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) ||
|
||||||
|
((!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断下拉刷新的角度是否在要求范围内
|
||||||
|
function _getAngleIsInRange(e, touch, state, dataset) {
|
||||||
|
var maxAngle = dataset.refreshermaxangle;
|
||||||
|
var refresherAecc = _isTrue(dataset.refresheraecc);
|
||||||
|
var lastTouch = state.lastTouch;
|
||||||
|
var reachMaxAngle = state.reachMaxAngle;
|
||||||
|
var moveDis = state.oldMoveDis;
|
||||||
|
if (!lastTouch) return true;
|
||||||
|
if (maxAngle >= 0 && maxAngle <= 90 && lastTouch) {
|
||||||
|
// 考虑下拉刷新手势由水平移动转为垂直方向移动的情况,此时不应当只判断垂直方向角度是否符合要求,应当直接禁止以避免在swiper中使用下拉刷新时,横向切换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 < maxAngle) {
|
||||||
|
// 如果角度小于配置要求,则return,同时通过hitReachMaxAngleCount控制角度判断的灵敏程度以最大程度兼容各种使用场景
|
||||||
|
var hitReachMaxAngleCount = state.hitReachMaxAngleCount || 0;
|
||||||
|
state.hitReachMaxAngleCount = ++hitReachMaxAngleCount;
|
||||||
|
if (state.hitReachMaxAngleCount > 2) {
|
||||||
|
state.lastTouch = touch;
|
||||||
|
state.reachMaxAngle = false;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.lastTouch = touch;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 进一步处理是否在下拉刷新并通知js层
|
||||||
|
function _handlePullingDown(state, ins, onPullingDown) {
|
||||||
|
var oldOnPullingDown = state.onPullingDown || false;
|
||||||
|
if (oldOnPullingDown != onPullingDown) {
|
||||||
|
ins.callMethod('_handleWxsPullingDownStatusChange', onPullingDown);
|
||||||
|
}
|
||||||
|
state.onPullingDown = onPullingDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断js层传过来的值是否为true
|
||||||
|
function _isTrue(value) {
|
||||||
|
value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
|
||||||
|
return value == true || value == 'true';
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
touchstart: touchstart,
|
||||||
|
touchmove: touchmove,
|
||||||
|
touchend: touchend,
|
||||||
|
mousedown: mousedown,
|
||||||
|
mousemove: mousemove,
|
||||||
|
mouseup: mouseup,
|
||||||
|
mouseleave: mouseleave,
|
||||||
|
propObserver: propObserver
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,354 @@
|
||||||
|
<!-- _
|
||||||
|
____ _ __ __ _ __ _(_)_ __ __ _
|
||||||
|
|_ /____| '_ \ / _` |/ _` | | '_ \ / _` |
|
||||||
|
/ /_____| |_) | (_| | (_| | | | | | (_| |
|
||||||
|
/___| | .__/ \__,_|\__, |_|_| |_|\__, |
|
||||||
|
|_| |___/ |___/
|
||||||
|
v2.8.5 (2025-02-09)
|
||||||
|
@author ZXLee <admin@zxlee.cn>
|
||||||
|
-->
|
||||||
|
<!-- 文档地址:https://z-paging.zxlee.cn -->
|
||||||
|
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
|
||||||
|
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
|
||||||
|
<!-- 反馈QQ群:343409055 -->
|
||||||
|
|
||||||
|
<template name="z-paging">
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view :class="{'z-paging-content':true,'z-paging-content-full':!usePageScroll,'z-paging-content-fixed':!usePageScroll&&fixed,'z-paging-content-page':usePageScroll,'z-paging-reached-top':renderPropScrollTop<1,'z-paging-use-chat-record-mode':useChatRecordMode}" :style="[finalPagingStyle]">
|
||||||
|
<!-- #ifndef APP-PLUS -->
|
||||||
|
<view v-if="cssSafeAreaInsetBottom===-1" class="zp-safe-area-inset-bottom"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- 二楼view -->
|
||||||
|
<view v-if="showF2 && showRefresherF2" @touchmove.stop.prevent class="zp-f2-content" :style="[{'transform': f2Transform, 'transition': `transform .2s linear`, 'height': superContentHeight + 'px', 'z-index': f2ZIndex}]">
|
||||||
|
<slot name="f2"/>
|
||||||
|
</view>
|
||||||
|
<!-- 顶部固定的slot -->
|
||||||
|
<slot v-if="!usePageScroll&&zSlots.top" name="top" />
|
||||||
|
<view class="zp-page-top" @touchmove.stop.prevent v-else-if="usePageScroll&&zSlots.top" :style="[{'top':`${windowTop}px`,'z-index':topZIndex}]">
|
||||||
|
<slot name="top" />
|
||||||
|
</view>
|
||||||
|
<view :class="{'zp-view-super':true,'zp-scroll-view-super':!usePageScroll}" :style="[finalScrollViewStyle]">
|
||||||
|
<view v-if="zSlots.left" :class="{'zp-page-left':true,'zp-absoulte':finalIsOldWebView}">
|
||||||
|
<slot name="left" />
|
||||||
|
</view>
|
||||||
|
<view :class="{'zp-scroll-view-container':true,'zp-absoulte':finalIsOldWebView}" :style="[scrollViewContainerStyle]">
|
||||||
|
<scroll-view
|
||||||
|
ref="zp-scroll-view" :class="{'zp-scroll-view':true,'zp-scroll-view-absolute':!usePageScroll,'zp-scroll-view-hide-scrollbar':!showScrollbar}" :style="[chatRecordRotateStyle]"
|
||||||
|
:scroll-top="scrollTop" :scroll-left="scrollLeft" :scroll-x="scrollX"
|
||||||
|
:scroll-y="finalScrollable" :enable-back-to-top="finalEnableBackToTop"
|
||||||
|
:show-scrollbar="showScrollbar" :scroll-with-animation="finalScrollWithAnimation"
|
||||||
|
:scroll-into-view="scrollIntoView" :lower-threshold="finalLowerThreshold" :upper-threshold="5"
|
||||||
|
:refresher-enabled="finalRefresherEnabled&&!useCustomRefresher" :refresher-threshold="finalRefresherThreshold"
|
||||||
|
:refresher-default-style="finalRefresherDefaultStyle" :refresher-background="refresherBackground"
|
||||||
|
:refresher-triggered="finalRefresherTriggered" @scroll="_scroll" @scrolltolower="_onScrollToLower"
|
||||||
|
@scrolltoupper="_onScrollToUpper" @refresherrestore="_onRestore" @refresherrefresh="_onRefresh(true)"
|
||||||
|
>
|
||||||
|
<view class="zp-paging-touch-view"
|
||||||
|
<!-- #ifndef APP-PLUS || MP-WEIXIN || MP-QQ || H5 -->
|
||||||
|
@touchstart="_refresherTouchstart" @touchmove="_refresherTouchmove" @touchend="_refresherTouchend" @touchcancel="_refresherTouchend"
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || H5 -->
|
||||||
|
@touchstart="pagingWxs.touchstart" @touchmove="pagingWxs.touchmove" @touchend="pagingWxs.touchend" @touchcancel="pagingWxs.touchend"
|
||||||
|
@mousedown="pagingWxs.mousedown" @mousemove="pagingWxs.mousemove" @mouseup="pagingWxs.mouseup" @mouseleave="pagingWxs.mouseleave"
|
||||||
|
<!-- #endif -->
|
||||||
|
>
|
||||||
|
<view v-if="finalRefresherFixedBacHeight>0" class="zp-fixed-bac-view" :style="[{'background': refresherFixedBackground,'height': `${finalRefresherFixedBacHeight}px`}]"></view>
|
||||||
|
<view class="zp-paging-main" :style="[scrollViewInStyle,{'transform': finalRefresherTransform,'transition': refresherTransition}]"
|
||||||
|
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || H5 -->
|
||||||
|
:change:prop="pagingWxs.propObserver" :prop="wxsPropType"
|
||||||
|
:data-refresherThreshold="finalRefresherThreshold" :data-refresherF2Enabled="refresherF2Enabled" :data-refresherF2Threshold="finalRefresherF2Threshold" :data-isIos="isIos"
|
||||||
|
:data-loading="loading||isRefresherInComplete" :data-useChatRecordMode="useChatRecordMode"
|
||||||
|
:data-refresherEnabled="refresherEnabled" :data-useCustomRefresher="useCustomRefresher" :data-pageScrollTop="wxsPageScrollTop"
|
||||||
|
:data-scrollTop="wxsScrollTop" :data-refresherMaxAngle="refresherMaxAngle" :data-refresherNoTransform="refresherNoTransform"
|
||||||
|
:data-refresherAecc="refresherAngleEnableChangeContinued" :data-usePageScroll="usePageScroll" :data-watchTouchDirectionChange="watchTouchDirectionChange"
|
||||||
|
:data-oldIsTouchmoving="isTouchmoving" :data-refresherOutRate="finalRefresherOutRate" :data-refresherPullRate="finalRefresherPullRate" :data-hasTouchmove="hasTouchmove"
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-PLUS || H5 -->
|
||||||
|
:change:renderPropIsIosAndH5="pagingRenderjs.renderPropIsIosAndH5Change" :renderPropIsIosAndH5="isIosAndH5"
|
||||||
|
<!-- #endif -->
|
||||||
|
>
|
||||||
|
<view v-if="showRefresher" class="zp-custom-refresher-view" :style="[{'margin-top': `-${finalRefresherThreshold+refresherThresholdUpdateTag}px`,'background': refresherBackground,'opacity': isTouchmoving ? 1 : 0}]">
|
||||||
|
<view class="zp-custom-refresher-container" :style="[{'height': `${finalRefresherThreshold}px`,'background': refresherBackground}]">
|
||||||
|
<view v-if="useRefresherStatusBarPlaceholder" class="zp-custom-refresher-status-bar-placeholder" :style="[{'height': `${statusBarHeight}px`}]" />
|
||||||
|
<!-- 下拉刷新view -->
|
||||||
|
<view class="zp-custom-refresher-slot-view">
|
||||||
|
<slot v-if="!(zSlots.refresherComplete&&refresherStatus===R.Complete)&&!(zSlots.refresherF2&&refresherStatus===R.GoF2)" :refresherStatus="refresherStatus" name="refresher" />
|
||||||
|
</view>
|
||||||
|
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
||||||
|
<slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
||||||
|
<z-paging-refresh ref="refresh" v-else-if="!showCustomRefresher" class="zp-custom-refresher-refresh" :style="[{'height': `${finalRefresherThreshold - finalRefresherThresholdPlaceholder}px`}]" :status="refresherStatus"
|
||||||
|
:defaultThemeStyle="finalRefresherThemeStyle" :defaultText="finalRefresherDefaultText"
|
||||||
|
:pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
||||||
|
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
||||||
|
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
||||||
|
:imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" :unit="unit" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="zp-paging-container" :style="[{justifyContent:useChatRecordMode?'flex-end':'flex-start'}]">
|
||||||
|
<!-- 全屏Loading -->
|
||||||
|
<slot v-if="showLoading&&zSlots.loading&&!loadingFullFixed" name="loading" />
|
||||||
|
<!-- 主体内容 -->
|
||||||
|
<view class="zp-paging-container-content" :style="[finalPlaceholderTopHeightStyle,finalPagingContentStyle]">
|
||||||
|
<!-- #ifdef VUE3 -->
|
||||||
|
<!-- 虚拟列表顶部占位view -->
|
||||||
|
<view v-if="useVirtualList" class="zp-virtual-placeholder" :style="[{height:virtualPlaceholderTopHeight+'px'}]"/>
|
||||||
|
<!-- #endif -->
|
||||||
|
<slot />
|
||||||
|
<!-- 内置列表&虚拟列表 -->
|
||||||
|
<template v-if="finalUseInnerList">
|
||||||
|
<slot name="header"/>
|
||||||
|
<view class="zp-list-container" :style="[innerListStyle]">
|
||||||
|
<template v-if="finalUseVirtualList">
|
||||||
|
<view class="zp-list-cell" :style="[innerCellStyle]" :id="`${fianlVirtualCellIdPrefix}-${item[virtualCellIndexKey]}`" v-for="(item,index) in virtualList" :key="item['zp_unique_index']" @click="_innerCellClick(item,virtualTopRangeIndex+index)">
|
||||||
|
<view v-if="useCompatibilityMode">使用兼容模式请在组件源码z-paging.vue第103行中注释这一行,并打开下面一行注释</view>
|
||||||
|
<!-- <zp-public-virtual-cell v-if="useCompatibilityMode" :extraData="extraData" :item="item" :index="virtualTopRangeIndex+index" /> -->
|
||||||
|
<slot v-else name="cell" :item="item" :index="virtualTopRangeIndex+index"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<view class="zp-list-cell" v-for="(item,index) in realTotalData" :key="index" @click="_innerCellClick(item,index)">
|
||||||
|
<slot name="cell" :item="item" :index="index"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
<slot name="footer"/>
|
||||||
|
</template>
|
||||||
|
<!-- 聊天记录模式加载更多loading -->
|
||||||
|
<template v-if="useChatRecordMode&&realTotalData.length>=defaultPageSize&&(loadingStatus!==M.NoMore||zSlots.chatNoMore)&&(realTotalData.length||(showChatLoadingWhenReload&&showLoading))&&!isFirstPageAndNoMore">
|
||||||
|
<view :style="[chatRecordRotateStyle]">
|
||||||
|
<slot v-if="loadingStatus===M.NoMore&&zSlots.chatNoMore" name="chatNoMore" />
|
||||||
|
<template v-else>
|
||||||
|
<slot v-if="zSlots.chatLoading" :loadingMoreStatus="loadingStatus" name="chatLoading" />
|
||||||
|
<z-paging-load-more v-else @doClick="_onLoadingMore('click')" :zConfig="zLoadMoreConfig" />
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<!-- 虚拟列表底部占位view -->
|
||||||
|
<view v-if="useVirtualList" class="zp-virtual-placeholder" :style="[{height:virtualPlaceholderBottomHeight+'px'}]"/>
|
||||||
|
<!-- 上拉加载更多view -->
|
||||||
|
<!-- #ifndef MP-ALIPAY -->
|
||||||
|
<slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" />
|
||||||
|
<slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" />
|
||||||
|
<slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" />
|
||||||
|
<slot v-else-if="showLoadingMoreFail" name="loadingMoreFail" />
|
||||||
|
<z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMoreCustom" :zConfig="zLoadMoreConfig" />
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef MP-ALIPAY -->
|
||||||
|
<slot v-if="loadingStatus===M.Default&&zSlots.loadingMoreDefault&&showLoadingMore&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreDefault" />
|
||||||
|
<slot v-else-if="loadingStatus===M.Loading&&zSlots.loadingMoreLoading&&showLoadingMore&&loadingMoreEnabled" name="loadingMoreLoading" />
|
||||||
|
<slot v-else-if="loadingStatus===M.NoMore&&zSlots.loadingMoreNoMore&&showLoadingMore&&showLoadingMoreNoMoreView&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreNoMore" />
|
||||||
|
<slot v-else-if="loadingStatus===M.Fail&&zSlots.loadingMoreFail&&showLoadingMore&&loadingMoreEnabled&&!useChatRecordMode" name="loadingMoreFail" />
|
||||||
|
<z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMore&&showDefaultLoadingMoreText&&!(loadingStatus===M.NoMore&&!showLoadingMoreNoMoreView)&&loadingMoreEnabled&&!useChatRecordMode" :zConfig="zLoadMoreConfig" />
|
||||||
|
<!-- #endif -->
|
||||||
|
<view v-if="safeAreaInsetBottom&&useSafeAreaPlaceholder&&!useChatRecordMode" class="zp-safe-area-placeholder" :style="[{height:safeAreaBottom+'px'}]" />
|
||||||
|
</view>
|
||||||
|
<!-- 空数据图 -->
|
||||||
|
<view v-if="showEmpty" :class="{'zp-empty-view':true,'zp-empty-view-center':emptyViewCenter}" :style="[emptyViewSuperStyle,chatRecordRotateStyle]">
|
||||||
|
<slot v-if="zSlots.empty" name="empty" :isLoadFailed="isLoadFailed"/>
|
||||||
|
<z-paging-empty-view v-else :emptyViewImg="finalEmptyViewImg" :emptyViewText="finalEmptyViewText" :showEmptyViewReload="finalShowEmptyViewReload"
|
||||||
|
:emptyViewReloadText="finalEmptyViewReloadText" :isLoadFailed="isLoadFailed" :emptyViewStyle="emptyViewStyle" :emptyViewTitleStyle="emptyViewTitleStyle"
|
||||||
|
:emptyViewImgStyle="emptyViewImgStyle" :emptyViewReloadStyle="emptyViewReloadStyle" :emptyViewZIndex="emptyViewZIndex" :emptyViewFixed="emptyViewFixed" :unit="unit"
|
||||||
|
@reload="_emptyViewReload" @viewClick="_emptyViewClick" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view v-if="zSlots.right" :class="{'zp-page-right':true,'zp-absoulte zp-right':finalIsOldWebView}">
|
||||||
|
<slot name="right" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 底部固定的slot -->
|
||||||
|
<view class="zp-page-bottom-container" :style="{'background': bottomBgColor}">
|
||||||
|
<slot v-if="!usePageScroll&&zSlots.bottom" name="bottom" />
|
||||||
|
<view class="zp-page-bottom" @touchmove.stop.prevent v-else-if="usePageScroll&&zSlots.bottom" :style="[{'bottom': `${windowBottom}px`}]">
|
||||||
|
<slot name="bottom" />
|
||||||
|
</view>
|
||||||
|
<!-- 聊天记录模式底部占位 -->
|
||||||
|
<template v-if="useChatRecordMode&&autoAdjustPositionWhenChat">
|
||||||
|
<view :style="[{height:chatRecordModeSafeAreaBottom+'px'}]" />
|
||||||
|
<view class="zp-page-bottom-keyboard-placeholder-animate" :style="[{height:keyboardHeight+'px'}]" />
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
<!-- 点击返回顶部view -->
|
||||||
|
<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
|
||||||
|
<slot v-if="zSlots.backToTop" name="backToTop" />
|
||||||
|
<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
|
||||||
|
</view>
|
||||||
|
<!-- 全屏Loading(铺满z-paging并固定) -->
|
||||||
|
<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
|
||||||
|
<slot name="loading" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<component ref="z-paging-content" :is="finalNvueSuperListIs" :style="[finalPagingStyle]" :class="{'z-paging-content-fixed':fixed&&!usePageScroll}" :scrollable="false">
|
||||||
|
<!-- 二楼view -->
|
||||||
|
<view v-if="showF2 && showRefresherF2" ref="zp-n-f2" class="zp-f2-content" @touchmove.stop.prevent :style="[{'height': superContentHeight + 'px', 'width': nRefresherWidth + 'px', 'opacity': nF2Opacity}]">
|
||||||
|
<slot name="f2"/>
|
||||||
|
</view>
|
||||||
|
<!-- 顶部固定的slot -->
|
||||||
|
<view ref="zp-page-top" v-if="zSlots.top" :class="{'zp-page-top':usePageScroll}" :style="[usePageScroll?{'top':`${windowTop}px`,'z-index':topZIndex}:{}]">
|
||||||
|
<slot name="top" />
|
||||||
|
</view>
|
||||||
|
<!-- 聊天记录模式加载更多loading(loading时候显示) -->
|
||||||
|
<view v-if="useChatRecordMode&&loadingStatus!==M.NoMore&&showChatLoadingWhenReload&&showLoading">
|
||||||
|
<slot v-if="zSlots.chatLoading" :loadingMoreStatus="loadingStatus" name="chatLoading" />
|
||||||
|
<z-paging-load-more v-else @doClick="_onLoadingMore('click')" :zConfig="zLoadMoreConfig" />
|
||||||
|
</view>
|
||||||
|
<component :is="finalNvueSuperListIs" class="zp-n-list-container" :scrollable="false">
|
||||||
|
<view v-if="zSlots.left" class="zp-page-left">
|
||||||
|
<slot name="left" />
|
||||||
|
</view>
|
||||||
|
<component :is="finalNvueListIs" ref="zp-n-list" :id="nvueListId" :style="[{'flex': 1,'top':isIos?'0px':'-1px'},usePageScroll?scrollViewStyle:{},chatRecordRotateStyle]" :alwaysScrollableVertical="true"
|
||||||
|
:fixFreezing="nFixFreezing" :show-scrollbar="showScrollbar" :loadmoreoffset="finalLowerThreshold" :enable-back-to-top="enableBackToTop"
|
||||||
|
:scrollable="finalScrollable" :bounce="nvueBounce" :column-count="nWaterfallColumnCount" :column-width="nWaterfallColumnWidth"
|
||||||
|
:column-gap="nWaterfallColumnGap" :left-gap="nWaterfallLeftGap" :right-gap="nWaterfallRightGap" :pagingEnabled="nvuePagingEnabled" :offset-accuracy="offsetAccuracy"
|
||||||
|
@loadmore="_nOnLoadmore" @scroll="_nOnScroll" @scrollend="_nOnScrollend">
|
||||||
|
<refresh v-if="(zSlots.top?cacheTopHeight!==-1:true)&&finalNvueRefresherEnabled" class="zp-n-refresh" :style="[nvueRefresherStyle]" :display="nRefresherLoading?'show':'hide'" @refresh="_nOnRrefresh" @pullingdown="_nOnPullingdown">
|
||||||
|
<view ref="zp-n-refresh-container" class="zp-n-refresh-container" :style="[{background:refresherBackground,width:nRefresherWidth}]" id="zp-n-refresh-container">
|
||||||
|
<view v-if="useRefresherStatusBarPlaceholder" class="zp-custom-refresher-status-bar-placeholder" :style="[{'height': `${statusBarHeight}px`}]" />
|
||||||
|
<!-- 下拉刷新view -->
|
||||||
|
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
||||||
|
<slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
||||||
|
<slot v-else-if="(nScopedSlots?nScopedSlots:zSlots).refresher" :refresherStatus="refresherStatus" name="refresher" />
|
||||||
|
<z-paging-refresh ref="refresh" v-else :status="refresherStatus" :defaultThemeStyle="finalRefresherThemeStyle"
|
||||||
|
:defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
||||||
|
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
||||||
|
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
||||||
|
:imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" :unit="unit" />
|
||||||
|
</view>
|
||||||
|
</refresh>
|
||||||
|
<component :is="nViewIs" v-if="isIos&&!useChatRecordMode?oldScrollTop>10:true" ref="zp-n-list-top-tag" class="zp-n-list-top-tag" style="margin-top: -1rpx;" :style="[{height:finalNvueRefresherEnabled?'0px':'1px'}]"></component>
|
||||||
|
<component :is="nViewIs" v-if="nShowRefresherReveal" ref="zp-n-list-refresher-reveal" :style="[{transform:`translateY(-${nShowRefresherRevealHeight}px)`},{background:refresherBackground}]">
|
||||||
|
<view v-if="useRefresherStatusBarPlaceholder" class="zp-custom-refresher-status-bar-placeholder" :style="[{'height': `${statusBarHeight}px`}]" />
|
||||||
|
<!-- 下拉刷新view -->
|
||||||
|
<slot v-if="zSlots.refresherComplete&&refresherStatus===R.Complete" name="refresherComplete" />
|
||||||
|
<slot v-else-if="zSlots.refresherF2&&refresherStatus===R.GoF2" name="refresherF2" />
|
||||||
|
<slot v-else-if="(nScopedSlots?nScopedSlots:$slots).refresher" :refresherStatus="R.Loading" name="refresher" />
|
||||||
|
<z-paging-refresh ref="refresh" v-else :status="R.Loading" :defaultThemeStyle="finalRefresherThemeStyle"
|
||||||
|
:defaultText="finalRefresherDefaultText" :pullingText="finalRefresherPullingText" :refreshingText="finalRefresherRefreshingText" :completeText="finalRefresherCompleteText" :goF2Text="finalRefresherGoF2Text"
|
||||||
|
:defaultImg="refresherDefaultImg" :pullingImg="refresherPullingImg" :refreshingImg="refresherRefreshingImg" :completeImg="refresherCompleteImg" :refreshingAnimated="refresherRefreshingAnimated"
|
||||||
|
:showUpdateTime="showRefresherUpdateTime" :updateTimeKey="refresherUpdateTimeKey" :updateTimeTextMap="finalRefresherUpdateTimeTextMap"
|
||||||
|
:imgStyle="refresherImgStyle" :titleStyle="refresherTitleStyle" :updateTimeStyle="refresherUpdateTimeStyle" :unit="unit" />
|
||||||
|
</component>
|
||||||
|
<!-- 内置列表 -->
|
||||||
|
<template v-if="finalUseInnerList">
|
||||||
|
<component :is="nViewIs">
|
||||||
|
<slot name="header"/>
|
||||||
|
</component>
|
||||||
|
<component :is="nViewIs" class="zp-list-cell" v-for="(item,index) in realTotalData" :key="finalCellKeyName.length?item[finalCellKeyName]:index">
|
||||||
|
<slot name="cell" :item="item" :index="index"/>
|
||||||
|
</component>
|
||||||
|
<component :is="nViewIs">
|
||||||
|
<slot name="footer"/>
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<slot />
|
||||||
|
</template>
|
||||||
|
<!-- 全屏Loading -->
|
||||||
|
<component :is="nViewIs" v-if="showLoading&&zSlots.loading&&!loadingFullFixed" :class="{'z-paging-content-fixed':usePageScroll}" style="flex:1" :style="[chatRecordRotateStyle]">
|
||||||
|
<slot name="loading" />
|
||||||
|
</component>
|
||||||
|
<!-- 上拉加载更多view -->
|
||||||
|
<component :is="nViewIs" v-if="!refresherOnly&&loadingMoreEnabled&&!showEmpty">
|
||||||
|
<!-- 聊天记录模式加载更多loading(滚动到顶部加载更多或无更多数据时显示) -->
|
||||||
|
<template v-if="useChatRecordMode&&realTotalData.length>=defaultPageSize&&(loadingStatus!==M.NoMore||zSlots.chatNoMore)&&realTotalData.length&&isChatRecordModeAndInversion">
|
||||||
|
<view :style="[chatRecordRotateStyle]">
|
||||||
|
<slot v-if="loadingStatus===M.NoMore&&zSlots.chatNoMore" name="chatNoMore" />
|
||||||
|
<template v-else>
|
||||||
|
<slot v-if="zSlots.chatLoading" :loadingMoreStatus="loadingStatus" name="chatLoading" />
|
||||||
|
<z-paging-load-more v-else @doClick="_onLoadingMore('click')" :zConfig="zLoadMoreConfig" />
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view :style="nLoadingMoreFixedHeight?{height:loadingMoreCustomStyle&&loadingMoreCustomStyle.height?loadingMoreCustomStyle.height:loadingMoreFixedHeight}:{}">
|
||||||
|
<slot v-if="showLoadingMoreDefault" name="loadingMoreDefault" />
|
||||||
|
<slot v-else-if="showLoadingMoreLoading" name="loadingMoreLoading" />
|
||||||
|
<slot v-else-if="showLoadingMoreNoMore" name="loadingMoreNoMore" />
|
||||||
|
<slot v-else-if="showLoadingMoreFail" name="loadingMoreFail" />
|
||||||
|
<z-paging-load-more @doClick="_onLoadingMore('click')" v-else-if="showLoadingMoreCustom" :zConfig="zLoadMoreConfig" />
|
||||||
|
<view v-if="safeAreaInsetBottom&&useSafeAreaPlaceholder&&!useChatRecordMode" class="zp-safe-area-placeholder" :style="[{height:safeAreaBottom+'px'}]" />
|
||||||
|
</view>
|
||||||
|
</component>
|
||||||
|
<!-- 空数据图 -->
|
||||||
|
<component :is="nViewIs" v-if="showEmpty" :class="{'z-paging-content-fixed':usePageScroll}" :style="[{flex:emptyViewCenter?1:0},emptyViewSuperStyle,chatRecordRotateStyle]">
|
||||||
|
<view :class="{'zp-empty-view':true,'zp-empty-view-center':emptyViewCenter}">
|
||||||
|
<slot v-if="zSlots.empty" name="empty" :isLoadFailed="isLoadFailed" />
|
||||||
|
<z-paging-empty-view v-else :emptyViewImg="finalEmptyViewImg" :emptyViewText="finalEmptyViewText" :showEmptyViewReload="finalShowEmptyViewReload"
|
||||||
|
:emptyViewReloadText="finalEmptyViewReloadText" :isLoadFailed="isLoadFailed" :emptyViewStyle="emptyViewStyle" :emptyViewTitleStyle="emptyViewTitleStyle"
|
||||||
|
:emptyViewImgStyle="emptyViewImgStyle" :emptyViewReloadStyle="emptyViewReloadStyle" :emptyViewZIndex="emptyViewZIndex" :emptyViewFixed="emptyViewFixed" :unit="unit"
|
||||||
|
@reload="_emptyViewReload" @viewClick="_emptyViewClick" />
|
||||||
|
</view>
|
||||||
|
</component>
|
||||||
|
<component :is="nViewIs" v-if="!hideNvueBottomTag" ref="zp-n-list-bottom-tag" class="zp-n-list-bottom-tag"></component>
|
||||||
|
</component>
|
||||||
|
<view v-if="zSlots.right" class="zp-page-right">
|
||||||
|
<slot name="right" />
|
||||||
|
</view>
|
||||||
|
</component>
|
||||||
|
<!-- 底部固定的slot -->
|
||||||
|
<view class="zp-page-bottom-container" :style="{'background': bottomBgColor}">
|
||||||
|
<slot name="bottom" />
|
||||||
|
<!-- 聊天记录模式底部占位 -->
|
||||||
|
<template v-if="useChatRecordMode&&autoAdjustPositionWhenChat">
|
||||||
|
<view :style="[{height:chatRecordModeSafeAreaBottom+'px'}]" />
|
||||||
|
<view class="zp-page-bottom-keyboard-placeholder-animate" :style="[{height:keyboardHeight+'px'}]" />
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
<!-- 点击返回顶部view -->
|
||||||
|
<view v-if="showBackToTopClass" :class="finalBackToTopClass" :style="[finalBackToTopStyle]" @click.stop="_backToTopClick">
|
||||||
|
<slot v-if="zSlots.backToTop" name="backToTop" />
|
||||||
|
<image v-else class="zp-back-to-top-img" :class="{'zp-back-to-top-img-inversion': useChatRecordMode&&!backToTopImg.length}" :src="backToTopImg.length?backToTopImg:base64BackToTop" />
|
||||||
|
</view>
|
||||||
|
<!-- 全屏Loading(铺满z-paging并固定) -->
|
||||||
|
<view v-if="showLoading&&zSlots.loading&&loadingFullFixed" class="zp-loading-fixed">
|
||||||
|
<slot name="loading" />
|
||||||
|
</view>
|
||||||
|
</component>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<!-- #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || H5 -->
|
||||||
|
<script src="./wxs/z-paging-wxs.wxs" module="pagingWxs" lang="wxs"></script>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<script module="pagingRenderjs" lang="renderjs">
|
||||||
|
import pagingRenderjs from './wxs/z-paging-renderjs.js';
|
||||||
|
/**
|
||||||
|
* z-paging 分页组件
|
||||||
|
* @description 高性能,全平台兼容。支持虚拟列表,支持nvue、vue3
|
||||||
|
* @tutorial https://z-paging.zxlee.cn
|
||||||
|
* @notice 以下仅为部分常用属性、方法和事件,完整文档请查阅z-paging官网
|
||||||
|
* @property {Number|String} default-page-no 自定义初始的pageNo,默认为1
|
||||||
|
* @property {Number|String} default-page-size 自定义pageSize,默认为10
|
||||||
|
* @property {Object} paging-style 设置z-paging的style,部分平台(如微信小程序)无法直接修改组件的style,可使用此属性代替
|
||||||
|
* @property {String} height z-paging的高度,优先级低于pagingStyle中设置的height,传字符串,如100px、100rpx、100%
|
||||||
|
* @property {String} width z-paging的宽度,优先级低于pagingStyle中设置的width,传字符串,如100px、100rpx、100%
|
||||||
|
* @property {Boolean} use-page-scroll 使用页面滚动,默认为否
|
||||||
|
* @property {Boolean} use-virtual-list 是否使用虚拟列表,默认为否
|
||||||
|
* @property {Boolean} fixed z-paging是否使用fixed布局,若使用fixed布局,则z-paging的父view无需固定高度,z-paging高度默认为100%,默认为是(当使用内置scroll-view滚动时有效)
|
||||||
|
* @property {Boolean} auto [z-paging]mounted后是否自动调用reload方法(mounted后自动调用接口),默认为是
|
||||||
|
* @property {Boolean} use-chat-record-mode 使用聊天记录模式,默认为否
|
||||||
|
* @event {Function} query 下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止,请设置:auto="false")。pageNo和pageSize会自动计算好,直接传给服务器即可。
|
||||||
|
* @example <z-paging ref="paging" v-model="dataList" @query="queryList"></z-paging>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name:"z-paging",
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
mixins: [pagingRenderjs],
|
||||||
|
// #endif
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="./js/z-paging-main.js" />
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "./css/z-paging-main.css";
|
||||||
|
@import "./css/z-paging-static.css";
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
{
|
||||||
|
"id": "z-paging",
|
||||||
|
"name": "z-paging",
|
||||||
|
"displayName": "【z-paging下拉刷新、上拉加载】高性能,全平台兼容。支持虚拟列表,分页全自动处理",
|
||||||
|
"version": "2.8.5",
|
||||||
|
"description": "超简单、低耦合!使用wxs+renderjs实现。支持自定义下拉刷新、上拉加载更多、虚拟列表、下拉进入二楼、自动管理空数据图、无闪动聊天分页、本地分页、国际化等数百项配置",
|
||||||
|
"keywords": [
|
||||||
|
"下拉刷新",
|
||||||
|
"上拉加载",
|
||||||
|
"分页器",
|
||||||
|
"nvue",
|
||||||
|
"虚拟列表"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/SmileZXLee/uni-z-paging",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.0.7"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": "393727164"
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/z-paging",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y",
|
||||||
|
"app-harmony": "u",
|
||||||
|
"app-uvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"钉钉": "y",
|
||||||
|
"快手": "y",
|
||||||
|
"飞书": "y",
|
||||||
|
"京东": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
# z-paging
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<img alt="logo" src="https://z-paging.zxlee.cn/img/title-logo.png" height="100" style="margin-bottom: 50px;" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
[](https://github.com/SmileZXLee/uni-z-paging) [](https://en.wikipedia.org/wiki/MIT_License)
|
||||||
|
<img height="0" width="0" src="https://api.z-notify.zxlee.cn/v1/public/statistics/8293556910106066944/addOnly?from=uni" />
|
||||||
|
|
||||||
|
`z-paging-x`现已支持uniapp x,持续完善中,插件地址👉🏻 [https://ext.dcloud.net.cn/plugin?name=z-paging-x](https://ext.dcloud.net.cn/plugin?name=z-paging-x)
|
||||||
|
|
||||||
|
### 文档地址:[https://z-paging.zxlee.cn](https://z-paging.zxlee.cn)
|
||||||
|
|
||||||
|
### 更新组件前,请注意[版本差异](https://z-paging.zxlee.cn/start/upgrade-guide.html)
|
||||||
|
|
||||||
|
***
|
||||||
|
### 功能&特点
|
||||||
|
* 【配置简单】仅需两步(绑定网络请求方法、绑定分页结果数组)轻松完成完整下拉刷新,上拉加载更多功能。
|
||||||
|
* 【低耦合,低侵入】分页自动管理。在page中无需处理任何分页相关逻辑,无需在data中定义任何分页相关变量,全由z-paging内部处理。
|
||||||
|
* 【超灵活,支持各种类型自定义】支持自定义下拉刷新,自定义上拉加载更多等各种自定义效果;支持使用内置自动分页,同时也支持通过监听下拉刷新和滚动到底部事件自行处理;支持使用自带全屏布局规范,同时也支持将z-paging自由放在任意容器中。
|
||||||
|
* 【功能丰富】支持国际化,支持自定义且自动管理空数据图,支持主题模式切换,支持本地分页,支持无闪动聊天分页模式,支持展示最后更新时间,支持吸顶效果,支持内部scroll-view滚动与页面滚动,支持一键滚动到顶部,支持下拉进入二楼等诸多功能。
|
||||||
|
* 【【全平台兼容】支持vue&nvue,vue2&vue3,js&ts,支持h5、app、鸿蒙Next及各家小程序。
|
||||||
|
* 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs在视图层实现下拉刷新;支持虚拟列表,轻松渲染百万级列表数据!
|
||||||
|
|
||||||
|
***
|
||||||
|
### 反馈qq群
|
||||||
|
* 官方1群`已满`:[790460711](https://jq.qq.com/?_wv=1027&k=vU2fKZZH)
|
||||||
|
|
||||||
|
* 官方2群`已满`:[371624008](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=avPmibADf2TNi4LxkIwjCE5vbfXpa-r1&authKey=dQ%2FVDAR87ONxI4b32Py%2BvmXbhnopjHN7%2FJPtdsqJdsCPFZB6zDQ17L06Uh0kITUZ&noverify=0&group_code=371624008)
|
||||||
|
* 官方3群:[343409055](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=sIaNqiCMIjxGQVksjytCw6R8DSiibHR7&authKey=pp995q8ZzFtl5F2xUwvvceP24QTcguWW%2FRVoDnMa8JZF4L2DmS%2B%2FV%2F5sYrcgPsmW&noverify=0&group_code=343409055)
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
### 预览
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
| 自定义下拉刷新效果演示 | 滑动切换选项卡+吸顶演示 | 聊天记录模式演示 |
|
||||||
|
| :----------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------ |
|
||||||
|
|  |  |  |
|
||||||
|
|
||||||
|
| 虚拟列表(流畅渲染1万+条)演示 | 下拉进入二楼演示 | 在弹窗内使用演示 |
|
||||||
|
| :----------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------ |
|
||||||
|
|  |  |  |
|
||||||
|
|
||||||
|
|
||||||
|
### 在线demo体验地址:
|
||||||
|
|
||||||
|
* [https://demo.z-paging.zxlee.cn](https://demo.z-paging.zxlee.cn)
|
||||||
|
|
||||||
|
| 扫码体验 |
|
||||||
|
| ------------------------------------------------------------ |
|
||||||
|
|  |
|
||||||
|
|
||||||
|
### demo下载
|
||||||
|
* 支持vue2&vue3的`选项式api`写法demo下载,请点击页面右上角的【使用HBuilderX导入示例项目】或【下载示例项目ZIP】。
|
||||||
|
* 支持vue3的`组合式api`写法demo下载,请访问[github](https://github.com/SmileZXLee/uni-z-paging)。
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
['z-paging']: typeof import('./comps/z-paging')['ZPaging']
|
||||||
|
['z-paging-swiper']: typeof import('./comps/z-paging-swiper')['ZPagingSwiper']
|
||||||
|
['z-paging-swiper-item']: typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItem']
|
||||||
|
['z-paging-empty-view']: typeof import('./comps/z-paging-empty-view')['ZPagingEmptyView']
|
||||||
|
['z-paging-cell']: typeof import('./comps/z-paging-cell')['ZPagingCell']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export interface AllowedComponentProps {
|
||||||
|
class?: unknown;
|
||||||
|
style?: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VNodeProps {
|
||||||
|
key?: string | number | symbol;
|
||||||
|
ref?: unknown;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||||
|
|
||||||
|
// ****************************** Props ******************************
|
||||||
|
declare interface ZPagingCellProps {
|
||||||
|
/**
|
||||||
|
* z-paging-cell样式
|
||||||
|
*/
|
||||||
|
cellStyle?: Record<string, any>
|
||||||
|
}
|
||||||
|
|
||||||
|
// ****************************** Slots ******************************
|
||||||
|
declare interface ZPagingCellSlots {
|
||||||
|
// ******************** 主体布局Slot ********************
|
||||||
|
/**
|
||||||
|
* 默认插入的view
|
||||||
|
*/
|
||||||
|
['default']?: () => any
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface _ZPagingCell {
|
||||||
|
new (): {
|
||||||
|
$props: AllowedComponentProps &
|
||||||
|
VNodeProps &
|
||||||
|
ZPagingCellProps
|
||||||
|
$slots: ZPagingCellSlots
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export declare const ZPagingCell: _ZPagingCell
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||||
|
|
||||||
|
// ****************************** Props ******************************
|
||||||
|
declare interface ZPagingEmptyViewProps {
|
||||||
|
/**
|
||||||
|
* 空数据图片是否铺满z-paging,默认为是。若设置为否,则为填充满z-paging的剩余部分
|
||||||
|
* @default false
|
||||||
|
* @since 2.0.3
|
||||||
|
*/
|
||||||
|
emptyViewFixed?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图描述文字
|
||||||
|
* @default "没有数据哦~"
|
||||||
|
*/
|
||||||
|
emptyViewText?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图图片,默认使用z-paging内置的图片
|
||||||
|
* - 建议使用绝对路径,开头不要添加"@",请以"/"开头
|
||||||
|
*/
|
||||||
|
emptyViewImg?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图点击重新加载文字
|
||||||
|
* @default "重新加载"
|
||||||
|
* @since 1.6.7
|
||||||
|
*/
|
||||||
|
emptyViewReloadText?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图样式,可设置空数据view的top等
|
||||||
|
* - 如果空数据图不是fixed布局,则此处是`margin-top`
|
||||||
|
*/
|
||||||
|
emptyViewStyle?: Record<string, any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图img样式
|
||||||
|
*/
|
||||||
|
emptyViewImgStyle?: Record<string, any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图描述文字样式
|
||||||
|
*/
|
||||||
|
emptyViewTitleStyle?: Record<string, any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图重新加载按钮样式
|
||||||
|
* @since 1.6.7
|
||||||
|
*/
|
||||||
|
emptyViewReloadStyle?: Record<string, any>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否显示空数据图重新加载按钮(无数据时)
|
||||||
|
* @default false
|
||||||
|
* @since 1.6.7
|
||||||
|
*/
|
||||||
|
showEmptyViewReload?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否是加载失败
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
isLoadFailed?: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 空数据图中布局的单位
|
||||||
|
* @default 'rpx'
|
||||||
|
* @since 2.6.7
|
||||||
|
*/
|
||||||
|
unit?: 'rpx' | 'px';
|
||||||
|
|
||||||
|
// ****************************** Events ******************************
|
||||||
|
/**
|
||||||
|
* 点击了重新加载按钮
|
||||||
|
*/
|
||||||
|
onReload?: () => void
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击了空数据view
|
||||||
|
* @since 2.3.3
|
||||||
|
*/
|
||||||
|
onViewClick?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface _ZPagingEmptyView {
|
||||||
|
new (): {
|
||||||
|
$props: AllowedComponentProps &
|
||||||
|
VNodeProps &
|
||||||
|
ZPagingEmptyViewProps
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export declare const ZPagingEmptyView: _ZPagingEmptyView
|
||||||
|
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||||
|
|
||||||
|
// ****************************** Props ******************************
|
||||||
|
declare interface ZPagingSwiperItemProps {
|
||||||
|
/**
|
||||||
|
* 当前组件的index,也就是当前组件是swiper中的第几个
|
||||||
|
* @default 0
|
||||||
|
*/
|
||||||
|
tabIndex?: number
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前swiper切换到第几个index
|
||||||
|
* @default 0
|
||||||
|
*/
|
||||||
|
currentIndex?: number
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否使用虚拟列表。使用页面滚动或nvue时,不支持虚拟列表。在nvue中z-paging内置了list组件,效果与虚拟列表类似,并且可以提供更好的性能。
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
useVirtualList?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 虚拟列表cell高度模式,默认为`fixed`,也就是每个cell高度完全相同,将以第一个cell高度为准进行计算。
|
||||||
|
* @default 'fixed'
|
||||||
|
*/
|
||||||
|
cellHeightMode?: 'fixed' | 'dynamic'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 预加载的列表可视范围(列表高度)页数。此数值越大,则虚拟列表中加载的dom越多,内存消耗越大(会维持在一个稳定值),但增加预加载页面数量可缓解快速滚动短暂白屏问题。
|
||||||
|
* @default 12
|
||||||
|
*/
|
||||||
|
preloadPage?: number | string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 虚拟列表列数,默认为1。常用于每行有多列的情况,例如每行有2列数据,需要将此值设置为2。
|
||||||
|
* @default 1
|
||||||
|
* @since 2.2.8
|
||||||
|
*/
|
||||||
|
virtualListCol?: number | string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 虚拟列表scroll取样帧率,默认为80,过低容易出现白屏问题,过高容易出现卡顿问题
|
||||||
|
* @default 80
|
||||||
|
*/
|
||||||
|
virtualScrollFps?: number | string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否在z-paging内部循环渲染列表(使用内置列表)。
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
useInnerList?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 内置列表cell的key名称(仅nvue有效,在nvue中开启use-inner-list时必须填此项)
|
||||||
|
* @since 2.2.7
|
||||||
|
*/
|
||||||
|
cellKeyName?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* innerList样式
|
||||||
|
*/
|
||||||
|
innerListStyle?: Record<string, any>
|
||||||
|
}
|
||||||
|
|
||||||
|
// ****************************** Methods ******************************
|
||||||
|
declare interface _ZPagingSwiperItemRef {
|
||||||
|
/**
|
||||||
|
* 重新加载分页数据,pageNo恢复为默认值,相当于下拉刷新的效果
|
||||||
|
*
|
||||||
|
* @param [animate=false] 是否展示下拉刷新动画
|
||||||
|
*/
|
||||||
|
reload: (animate?: boolean) => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 请求结束
|
||||||
|
* - 当通过complete传进去的数组长度小于pageSize时,则判定为没有更多了
|
||||||
|
*
|
||||||
|
* @param [data] 请求结果数组
|
||||||
|
* @param [success=true] 是否请求成功
|
||||||
|
*/
|
||||||
|
complete: (data?: any[] | false, success?: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface _ZPagingSwiperItem {
|
||||||
|
new (): {
|
||||||
|
$props: AllowedComponentProps &
|
||||||
|
VNodeProps &
|
||||||
|
ZPagingSwiperItemProps
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export declare const ZPagingSwiperItem: _ZPagingSwiperItem
|
||||||
|
|
||||||
|
export declare const ZPagingSwiperItemRef: _ZPagingSwiperItemRef
|
||||||
|
|
@ -0,0 +1,89 @@
|
||||||
|
import { AllowedComponentProps, VNodeProps } from './_common'
|
||||||
|
|
||||||
|
// ****************************** Props ******************************
|
||||||
|
declare interface ZPagingSwiperProps {
|
||||||
|
/**
|
||||||
|
* 是否使用fixed布局,若使用fixed布局,则z-paging-swiper的父view无需固定高度,z-paging高度默认铺满屏幕,页面中的view请放z-paging-swiper标签内,需要固定在顶部的view使用slot="top"包住,需要固定在底部的view使用slot="bottom"包住。
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
fixed?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 是否开启底部安全区域适配
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
safeAreaInsetBottom?: boolean
|
||||||
|
|
||||||
|
/**
|
||||||
|
* z-paging-swiper样式
|
||||||
|
*/
|
||||||
|
swiperStyle?: Record<string, any>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ****************************** Slots ******************************
|
||||||
|
declare interface ZPagingSwiperSlots {
|
||||||
|
// ******************** 主体布局Slot ********************
|
||||||
|
/**
|
||||||
|
* 默认插入的view
|
||||||
|
*/
|
||||||
|
['default']?: () => any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。
|
||||||
|
* 注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed;
|
||||||
|
* @since 1.5.5
|
||||||
|
*/
|
||||||
|
['top']?: () => any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。
|
||||||
|
* 注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed;
|
||||||
|
* @since 1.6.2
|
||||||
|
*/
|
||||||
|
['bottom']?: () => any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。
|
||||||
|
* 注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed;
|
||||||
|
* @since 2.2.3
|
||||||
|
*/
|
||||||
|
['left']?: () => any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="right"的view中。
|
||||||
|
* 注意,当有多个需要固定的view时,请用一个view包住它们,并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed;
|
||||||
|
* @since 2.2.3
|
||||||
|
*/
|
||||||
|
['right']?: () => any
|
||||||
|
}
|
||||||
|
|
||||||
|
// ****************************** Methods ******************************
|
||||||
|
declare interface _ZPagingSwiperRef {
|
||||||
|
/**
|
||||||
|
* 更新slot="left"和slot="right"宽度,当slot="left"或slot="right"宽度动态改变后调用
|
||||||
|
*
|
||||||
|
* @since 2.3.5
|
||||||
|
*/
|
||||||
|
updateLeftAndRightWidth: () => void;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新fixed模式下z-paging-swiper的布局,在onShow时候调用,以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回,底部有一段空白区域的问题
|
||||||
|
*
|
||||||
|
* @since 2.6.5
|
||||||
|
*/
|
||||||
|
updateFixedLayout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface _ZPagingSwiper {
|
||||||
|
new (): {
|
||||||
|
$props: AllowedComponentProps &
|
||||||
|
VNodeProps &
|
||||||
|
ZPagingSwiperProps
|
||||||
|
$slots: ZPagingSwiperSlots
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export declare const ZPagingSwiper: _ZPagingSwiper
|
||||||
|
|
||||||
|
export declare const ZPagingSwiperRef: _ZPagingSwiperRef
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
||||||
|
/// <reference path="./comps.d.ts" />
|
||||||
|
declare module 'z-paging' {
|
||||||
|
export function install() : void
|
||||||
|
/**
|
||||||
|
* z-paging全局配置
|
||||||
|
* - uni.$zp
|
||||||
|
*
|
||||||
|
* @since 2.6.5
|
||||||
|
*/
|
||||||
|
interface $zp {
|
||||||
|
/**
|
||||||
|
* 全局配置
|
||||||
|
*/
|
||||||
|
config : Record<string, any>;
|
||||||
|
}
|
||||||
|
global {
|
||||||
|
interface Uni {
|
||||||
|
$zp : $zp
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type ZPagingSwiperRef = typeof import('./comps/z-paging-swiper')['ZPagingSwiperRef']
|
||||||
|
declare type ZPagingSwiperItemRef = typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItemRef']
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
## 0.3.0(2024-10-21)
|
||||||
|
支持鸿蒙Next
|
||||||
|
## 0.2.7(2024-07-18)
|
||||||
|
1.`新增` 支持切换rpx&px
|
||||||
|
2.`修复` 宽度小于屏幕时底部tabs位置不正确的问题
|
||||||
|
3.`修复` 偶现的Cannot read property 'left' of undefind的问题
|
||||||
|
|
||||||
|
## 0.2.5(2023-01-09)
|
||||||
|
修复可能出现的可能出现的与swiper联动时报错node不存在的bug
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
// z-tabs全局配置文件,注意避免更新时此文件被覆盖,若被覆盖,可在此文件中右键->点击本地历史记录,找回覆盖前的配置
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,791 @@
|
||||||
|
<!-- z-tabs v0.3.0 by-ZXLee -->
|
||||||
|
<!-- github地址:https://github.com/SmileZXLee/uni-z-tabs -->
|
||||||
|
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?name=z-tabs -->
|
||||||
|
<!-- 反馈QQ群:371624008 -->
|
||||||
|
|
||||||
|
<template name="z-tabs">
|
||||||
|
<view class="z-tabs-conatiner" :style="[{background:bgColor}, {height: unit==='rpx' ? '80rpx' : '40px'}, tabsStyle]">
|
||||||
|
<view class="z-tabs-left">
|
||||||
|
<slot name="left" />
|
||||||
|
</view>
|
||||||
|
<view ref="z-tabs-scroll-view-conatiner" class="z-tabs-scroll-view-conatiner">
|
||||||
|
<scroll-view ref="z-tabs-scroll-view" class="z-tabs-scroll-view" :scroll-x="true" :scroll-left="scrollLeft" :show-scrollbar="false" :scroll-with-animation="isFirstLoaded" @scroll="scroll">
|
||||||
|
<view class="z-tabs-list-container" :style="[tabsListStyle]">
|
||||||
|
<view class="z-tabs-list" :style="[tabsListStyle, {marginTop: -finalBottomSpace+'px'}]">
|
||||||
|
<view :ref="`z-tabs-item-${index}`" :id="`z-tabs-item-${index}`" class="z-tabs-item" :style="[tabStyle]" v-for="(item,index) in list" :key="index" @click="tabsClick(index,item)">
|
||||||
|
<view class="z-tabs-item-title-container">
|
||||||
|
<text :class="{'z-tabs-item-title-rpx':unit==='rpx','z-tabs-item-title-px':unit==='px','z-tabs-item-title-disabled':item.disabled}"
|
||||||
|
:style="[{color:item.disabled?disabledColor:(currentIndex===index?activeColor:inactiveColor)},item.disabled?disabledStyle:(currentIndex===index?activeStyle:inactiveStyle)]">
|
||||||
|
{{item[nameKey]||item}}
|
||||||
|
</text>
|
||||||
|
<text v-if="item.badge&&_formatCount(item.badge.count).length" class="z-tabs-item-badge" :class="{'z-tabs-item-badge-rpx':unit==='rpx','z-tabs-item-badge-px':unit==='px'}" :style="[badgeStyle]">{{_formatCount(item.badge.count)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="z-tabs-bottom" :style="[{width: tabsContainerWidth+'px', bottom: finalBottomSpace+'px'}]">
|
||||||
|
<view ref="z-tabs-bottom-dot" class="z-tabs-bottom-dot"
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
:style="[{transform:`translateX(${bottomDotX}px)`,transition:dotTransition,background:activeColor},finalDotStyle]"
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
:style="[{background:activeColor},finalDotStyle]"
|
||||||
|
<!-- #endif -->
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<view class="z-tabs-right">
|
||||||
|
<slot name="right" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const weexDom = weex.requireModule('dom');
|
||||||
|
const weexAnimation = weex.requireModule('animation');
|
||||||
|
// #endif
|
||||||
|
import zTabsConfig from './config/index'
|
||||||
|
|
||||||
|
// #ifdef APP-HARMONY
|
||||||
|
let screenWidth = 0;
|
||||||
|
// #endif
|
||||||
|
// 获取默认配置信息
|
||||||
|
function _gc(key, defaultValue) {
|
||||||
|
let config = null;
|
||||||
|
if (zTabsConfig && Object.keys(zTabsConfig).length) {
|
||||||
|
config = zTabsConfig;
|
||||||
|
} else {
|
||||||
|
return defaultValue;
|
||||||
|
}
|
||||||
|
const value = config[_toKebab(key)];
|
||||||
|
return value === undefined ? defaultValue : value;
|
||||||
|
}
|
||||||
|
// 驼峰转短横线
|
||||||
|
function _toKebab(value) {
|
||||||
|
return value.replace(/([A-Z])/g, "-$1").toLowerCase();
|
||||||
|
}
|
||||||
|
// rpx => px,兼容鸿蒙
|
||||||
|
function rpx2px(rpx) {
|
||||||
|
// #ifdef APP-HARMONY
|
||||||
|
if (!screenWidth) {
|
||||||
|
screenWidth = uni.getSystemInfoSync().screenWidth;
|
||||||
|
}
|
||||||
|
return (screenWidth * Number.parseFloat(rpx)) / 750;
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-HARMONY
|
||||||
|
return uni.upx2px(rpx);
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* z-tabs 标签
|
||||||
|
* @description 一个简单轻量的tabs标签,全平台兼容,支持nvue、vue3
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?name=z-tabs
|
||||||
|
* @property {Array} list 数据源数组,支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
|
||||||
|
* @property {Number|String} current 当前选中的index,默认为0
|
||||||
|
* @property {Number|String} scroll-count list数组长度超过scrollCount时滚动显示(不自动铺满全屏),默认为5
|
||||||
|
* @property {Number|String} tab-width 自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
* @property {Number|String} bar-width 滑块宽度,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
* @property {Number|String} bar-height 滑块高度,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
* @property {Object} bar-style 滑块样式,其中的width和height将被bar-width和bar-height覆盖
|
||||||
|
* @property {Number|String} bottom-space tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
* @property {String} bar-animate-mode 切换tab时滑块动画模式,与swiper联动时有效,点击切换tab时无效,必须调用setDx。默认为line,即切换tab时滑块宽度保持不变,线性运动。可选值为worm,即为类似毛毛虫蠕动效果
|
||||||
|
* @property {String} name-key list中item的name(标题)的key,默认为name
|
||||||
|
* @property {String} value-key list中item的value的key,默认为value
|
||||||
|
* @property {String} active-color 激活状态tab的颜色
|
||||||
|
* @property {String} inactive-color 未激活状态tab的颜色
|
||||||
|
* @property {String} disabled-color 禁用状态tab的颜色
|
||||||
|
* @property {Object} active-style 激活状态tab的样式
|
||||||
|
* @property {Object} inactive-style 未激活状态tab的样式
|
||||||
|
* @property {Object} disabled-style 禁用状态tab的样式
|
||||||
|
* @property {Number|String} badge-max-count 徽标数最大数字限制,超过这个数字将变成badge-max-count+,默认为99
|
||||||
|
* @property {Object} badge-style 徽标样式,例如可自定义背景色,字体等等
|
||||||
|
* @property {String} bg-color z-tabs背景色
|
||||||
|
* @property {Object} tabs-style z-tabs样式
|
||||||
|
* @property {Boolean} init-trigger-change 初始化时是否自动触发change事件
|
||||||
|
* @property {String} unit z-tabs中布局的单位,默认为rpx
|
||||||
|
* @event {Function(index,value)} change tabs改变时触发,index:当前切换到的index;value:当前切换到的value
|
||||||
|
* @example <z-tabs :list="list"></z-tabs>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'z-tabs',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0,
|
||||||
|
currentSwiperIndex: 0,
|
||||||
|
bottomDotX: -1,
|
||||||
|
bottomDotXForIndex: 0,
|
||||||
|
showBottomDot: false,
|
||||||
|
shouldSetDx: true,
|
||||||
|
|
||||||
|
barCalcedWidth: 0,
|
||||||
|
pxBarWidth: 0,
|
||||||
|
scrollLeft: 0,
|
||||||
|
tabsSuperWidth: rpx2px(750),
|
||||||
|
tabsWidth: rpx2px(750),
|
||||||
|
tabsHeight: rpx2px(80),
|
||||||
|
tabsLeft: 0,
|
||||||
|
tabsContainerWidth: 0,
|
||||||
|
itemNodeInfos: [],
|
||||||
|
isFirstLoaded: false,
|
||||||
|
currentScrollLeft: 0,
|
||||||
|
changeTriggerFailed: false,
|
||||||
|
currentChanged: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
//数据源数组,支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: function() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//当前选中的index
|
||||||
|
current: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('current',0)
|
||||||
|
},
|
||||||
|
//list数组长度超过scrollCount时滚动显示(不自动铺满全屏)
|
||||||
|
scrollCount: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('scrollCount',5)
|
||||||
|
},
|
||||||
|
//z-tabs样式
|
||||||
|
tabsStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return _gc('tabsStyle',{})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
tabWidth: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('tabWidth',0)
|
||||||
|
},
|
||||||
|
//滑块宽度,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
barWidth: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('barWidth',45)
|
||||||
|
},
|
||||||
|
//滑块高度,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
barHeight: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('barHeight',8)
|
||||||
|
},
|
||||||
|
//swiper的宽度,单位rpx,支持传100、"100px"或"100rpx",默认为"750rpx"
|
||||||
|
swiperWidth: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('swiperWidth',750)
|
||||||
|
},
|
||||||
|
//滑块样式,其中的width和height将被barWidth和barHeight覆盖
|
||||||
|
barStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return _gc('barStyle',{});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx"
|
||||||
|
bottomSpace: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('bottomSpace',8)
|
||||||
|
},
|
||||||
|
//切换tab时滑块动画模式,与swiper联动时有效,点击切换tab时无效,必须调用setDx。默认为line,即切换tab时滑块宽度保持不变,线性运动。可选值为worm,即为类似毛毛虫蠕动效果
|
||||||
|
barAnimateMode: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('barAnimateMode','line')
|
||||||
|
},
|
||||||
|
//list中item的name(标题)的key
|
||||||
|
nameKey: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('nameKey','name')
|
||||||
|
},
|
||||||
|
//list中item的value的key
|
||||||
|
valueKey: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('valueKey','value')
|
||||||
|
},
|
||||||
|
//激活状态tab的颜色
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('activeColor','#007AFF')
|
||||||
|
},
|
||||||
|
//未激活状态tab的颜色
|
||||||
|
inactiveColor: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('inactiveColor','#666666')
|
||||||
|
},
|
||||||
|
//禁用状态tab的颜色
|
||||||
|
disabledColor: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('disabledColor','#bbbbbb')
|
||||||
|
},
|
||||||
|
//激活状态tab的样式
|
||||||
|
activeStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return _gc('activeStyle',{});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//未激活状态tab的样式
|
||||||
|
inactiveStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return _gc('inactiveStyle',{});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//禁用状态tab的样式
|
||||||
|
disabledStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return _gc('disabledStyle',{});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//z-tabs背景色
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('bgColor','white')
|
||||||
|
},
|
||||||
|
//徽标数最大数字限制,超过这个数字将变成badgeMaxCount+
|
||||||
|
badgeMaxCount: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: _gc('badgeMaxCount',99)
|
||||||
|
},
|
||||||
|
//徽标样式,例如可自定义背景色,字体等等
|
||||||
|
badgeStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return _gc('badgeStyle',{})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//初始化时是否自动触发change事件
|
||||||
|
initTriggerChange: {
|
||||||
|
type: Boolean,
|
||||||
|
default: _gc('initTriggerChange',false)
|
||||||
|
},
|
||||||
|
//z-tabs中布局的单位,默认为rpx
|
||||||
|
unit: {
|
||||||
|
type: String,
|
||||||
|
default: _gc('unit', 'rpx')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateSubviewLayout();
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.currentChanged && this._lockDx();
|
||||||
|
this.currentIndex = newVal;
|
||||||
|
this._preUpdateDotPosition(this.currentIndex);
|
||||||
|
if (this.initTriggerChange) {
|
||||||
|
if (newVal < this.list.length) {
|
||||||
|
this.$emit('change', newVal, this.list[newVal][this.valueKey]);
|
||||||
|
}else {
|
||||||
|
this.changeTriggerFailed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.currentChanged = true;
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
handler(newVal) {
|
||||||
|
this._handleListChange(newVal);
|
||||||
|
},
|
||||||
|
immediate: false
|
||||||
|
},
|
||||||
|
bottomDotX(newVal) {
|
||||||
|
if(newVal >= 0){
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.showBottomDot = true;
|
||||||
|
// #endif
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
weexAnimation.transition(this.$refs['z-tabs-bottom-dot'], {
|
||||||
|
styles: {
|
||||||
|
transform: `translateX(${newVal}px)`
|
||||||
|
},
|
||||||
|
duration: this.showAnimate ? 200 : 0,
|
||||||
|
delay: 0
|
||||||
|
})
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showBottomDot = true;
|
||||||
|
},10)
|
||||||
|
// #endif
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
finalBarWidth: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.barCalcedWidth = newVal;
|
||||||
|
this.pxBarWidth = this.barCalcedWidth;
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
|
currentIndex: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.currentSwiperIndex = newVal;
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
shouldScroll(){
|
||||||
|
return this.list.length > this.scrollCount;
|
||||||
|
},
|
||||||
|
finalTabsHeight(){
|
||||||
|
return this.tabsHeight;
|
||||||
|
},
|
||||||
|
tabStyle(){
|
||||||
|
const stl = this.shouldScroll ? {'flex-shrink': 0} : {'flex': 1};
|
||||||
|
if(this.finalTabWidth > 0){
|
||||||
|
stl['width'] = this.finalTabWidth + 'px';
|
||||||
|
}else{
|
||||||
|
delete stl.width;
|
||||||
|
}
|
||||||
|
return stl;
|
||||||
|
},
|
||||||
|
tabsListStyle(){
|
||||||
|
return this.shouldScroll ? {} : {'flex':1};
|
||||||
|
},
|
||||||
|
showAnimate(){
|
||||||
|
return this.isFirstLoaded && !this.shouldSetDx;
|
||||||
|
},
|
||||||
|
dotTransition(){
|
||||||
|
return this.showAnimate ? 'transform .2s linear':'none';
|
||||||
|
},
|
||||||
|
finalDotStyle(){
|
||||||
|
return {...this.barStyle, width: this.barCalcedWidth + 'px', height: this.finalBarHeight + 'px', opacity: this.showBottomDot ? 1 : 0};
|
||||||
|
},
|
||||||
|
finalTabWidth(){
|
||||||
|
return this._convertTextToPx(this.tabWidth);
|
||||||
|
},
|
||||||
|
finalBarWidth(){
|
||||||
|
return this._convertTextToPx(this._addUnit(this.barWidth, this.unit));
|
||||||
|
},
|
||||||
|
finalBarHeight(){
|
||||||
|
return this._convertTextToPx(this._addUnit(this.barHeight, this.unit));
|
||||||
|
},
|
||||||
|
finalSwiperWidth(){
|
||||||
|
return this._convertTextToPx(this.swiperWidth);
|
||||||
|
},
|
||||||
|
finalBottomSpace(){
|
||||||
|
return this._convertTextToPx(this._addUnit(this.bottomSpace, this.unit));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//根据swiper的@transition实时更新底部dot位置
|
||||||
|
setDx(dx) {
|
||||||
|
if (!this.shouldSetDx) return;
|
||||||
|
const isLineMode = this.barAnimateMode === 'line';
|
||||||
|
const isWormMode = this.barAnimateMode === 'worm';
|
||||||
|
let dxRate = dx / this.finalSwiperWidth;
|
||||||
|
this.currentSwiperIndex = this.currentIndex + parseInt(dxRate);
|
||||||
|
const isRight = dxRate > 0;
|
||||||
|
const barWidth = this.pxBarWidth;
|
||||||
|
if(this.currentSwiperIndex !== this.currentIndex){
|
||||||
|
dxRate = dxRate - (this.currentSwiperIndex - this.currentIndex);
|
||||||
|
const currentNode = this.itemNodeInfos[this.currentSwiperIndex];
|
||||||
|
if (!!currentNode){
|
||||||
|
this.bottomDotXForIndex = this._getBottomDotX(currentNode, barWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const currentIndex = this.currentSwiperIndex;
|
||||||
|
let nextIndex = currentIndex + (isRight ? 1 : -1);
|
||||||
|
nextIndex = Math.max(0, nextIndex);
|
||||||
|
nextIndex = Math.min(nextIndex, this.itemNodeInfos.length - 1);
|
||||||
|
const currentNodeInfo = this.itemNodeInfos[currentIndex];
|
||||||
|
const nextNodeInfo = this.itemNodeInfos[nextIndex];
|
||||||
|
const nextBottomX = this._getBottomDotX(nextNodeInfo, barWidth);
|
||||||
|
if (isLineMode){
|
||||||
|
this.bottomDotX = this.bottomDotXForIndex + (nextBottomX - this.bottomDotXForIndex) * Math.abs(dxRate);
|
||||||
|
} else if (isWormMode) {
|
||||||
|
if ((isRight && currentIndex >= this.itemNodeInfos.length - 1) || (!isRight && currentIndex <= 0)) return;
|
||||||
|
const spaceOffset = isRight ? nextNodeInfo.right - currentNodeInfo.left : currentNodeInfo.right - nextNodeInfo.left;
|
||||||
|
let barCalcedWidth = barWidth + spaceOffset * Math.abs(dxRate);
|
||||||
|
if (isRight) {
|
||||||
|
if (barCalcedWidth > nextBottomX - this.bottomDotX + barWidth) {
|
||||||
|
const barMinusWidth = barWidth + spaceOffset * (1 - dxRate);
|
||||||
|
this.bottomDotX = this.bottomDotXForIndex + (barCalcedWidth - barMinusWidth) / 2;
|
||||||
|
barCalcedWidth = barMinusWidth;
|
||||||
|
}
|
||||||
|
}else if (!isRight) {
|
||||||
|
if (barCalcedWidth > this.bottomDotXForIndex + barWidth - nextBottomX){
|
||||||
|
const barMinusWidth = barWidth + spaceOffset * (1 + dxRate);
|
||||||
|
barCalcedWidth = barMinusWidth;
|
||||||
|
this.bottomDotX = nextBottomX;
|
||||||
|
} else{
|
||||||
|
this.bottomDotX = this.bottomDotXForIndex - (barCalcedWidth - barWidth);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
barCalcedWidth = Math.max(barCalcedWidth, barWidth);
|
||||||
|
this.barCalcedWidth = barCalcedWidth;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//在swiper的@animationfinish中通知z-tabs结束多setDx的锁定,若在父组件中调用了setDx,则必须调用unlockDx
|
||||||
|
unlockDx() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.shouldSetDx = true;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//更新z-tabs内部布局
|
||||||
|
updateSubviewLayout(tryCount = 0) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
let delayTime = 10;
|
||||||
|
// #ifdef APP-NVUE || MP-BAIDU
|
||||||
|
delayTime = 50;
|
||||||
|
// #endif
|
||||||
|
setTimeout(() => {
|
||||||
|
this._getNodeClientRect('.z-tabs-scroll-view-conatiner').then(res=>{
|
||||||
|
if (res){
|
||||||
|
if (!res[0].width && tryCount < 10) {
|
||||||
|
setTimeout(() => {
|
||||||
|
tryCount ++;
|
||||||
|
this.updateSubviewLayout(tryCount);
|
||||||
|
}, 50);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.tabsWidth = res[0].width;
|
||||||
|
this.tabsHeight = res[0].height;
|
||||||
|
this.tabsLeft = res[0].left;
|
||||||
|
this._handleListChange(this.list);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this._getNodeClientRect('.z-tabs-conatiner').then(res=>{
|
||||||
|
if(res && res[0].width){
|
||||||
|
this.tabsSuperWidth = res[0].width;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},delayTime)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//点击了tabs
|
||||||
|
tabsClick(index,item) {
|
||||||
|
if (item.disabled) return;
|
||||||
|
if (this.currentIndex != index) {
|
||||||
|
this.shouldSetDx = false;
|
||||||
|
this.$emit('change', index, item[this.valueKey]);
|
||||||
|
this.currentIndex = index;
|
||||||
|
this._preUpdateDotPosition(index);
|
||||||
|
} else {
|
||||||
|
this.$emit('secondClick',index, item[this.valueKey]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//scroll-view滚动
|
||||||
|
scroll(e){
|
||||||
|
this.currentScrollLeft = e.detail.scrollLeft;
|
||||||
|
},
|
||||||
|
//锁定dx,用于避免在swiper被动触发滚动时候执行setDx中的代码
|
||||||
|
_lockDx() {
|
||||||
|
this.shouldSetDx = false;
|
||||||
|
},
|
||||||
|
//更新底部dot位置之前的预处理
|
||||||
|
_preUpdateDotPosition(index) {
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
this.$nextTick(() => {
|
||||||
|
uni.createSelectorQuery().in(this).select(".z-tabs-scroll-view").fields({
|
||||||
|
scrollOffset: true
|
||||||
|
}, data => {
|
||||||
|
if (data) {
|
||||||
|
this.currentScrollLeft = data.scrollLeft;
|
||||||
|
this._updateDotPosition(index);
|
||||||
|
} else {
|
||||||
|
this._updateDotPosition(index);
|
||||||
|
}
|
||||||
|
}).exec();
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this._updateDotPosition(index);
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
//更新底部dot位置
|
||||||
|
_updateDotPosition(index){
|
||||||
|
if(index >= this.itemNodeInfos.length) return;
|
||||||
|
this.$nextTick(async ()=>{
|
||||||
|
let node = this.itemNodeInfos[index];
|
||||||
|
let offset = 0;
|
||||||
|
let tabsContainerWidth = this.tabsContainerWidth;
|
||||||
|
if (JSON.stringify(this.activeStyle) !== '{}') {
|
||||||
|
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${index}`,true);
|
||||||
|
if (nodeRes) {
|
||||||
|
node = nodeRes[0];
|
||||||
|
offset = this.currentScrollLeft;
|
||||||
|
this.tabsHeight = Math.max(node.height + rpx2px(28), this.tabsHeight);
|
||||||
|
tabsContainerWidth = 0;
|
||||||
|
for(let i = 0;i < this.itemNodeInfos.length;i++){
|
||||||
|
let oldNode = this.itemNodeInfos[i];
|
||||||
|
tabsContainerWidth += i === index ? node.width : oldNode.width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (node) {
|
||||||
|
this.bottomDotX = this._getBottomDotX(node, this.finalBarWidth, offset);
|
||||||
|
}
|
||||||
|
this.bottomDotXForIndex = this.bottomDotX;
|
||||||
|
if (this.tabsWidth) {
|
||||||
|
setTimeout(()=>{
|
||||||
|
let scrollLeft = this.bottomDotX - this.tabsWidth / 2 + this.finalBarWidth / 2;
|
||||||
|
scrollLeft = Math.max(0,scrollLeft);
|
||||||
|
if (tabsContainerWidth) {
|
||||||
|
scrollLeft = Math.min(scrollLeft,tabsContainerWidth - this.tabsWidth + 10);
|
||||||
|
}
|
||||||
|
if (this.shouldScroll && tabsContainerWidth > this.tabsWidth) {
|
||||||
|
this.scrollLeft = scrollLeft;
|
||||||
|
}
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.isFirstLoaded = true;
|
||||||
|
})
|
||||||
|
},200)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理list改变
|
||||||
|
_handleListChange(newVal) {
|
||||||
|
this.$nextTick(async ()=>{
|
||||||
|
if(newVal.length){
|
||||||
|
let itemNodeInfos = [];
|
||||||
|
let tabsContainerWidth = 0;
|
||||||
|
let delayTime = 0;
|
||||||
|
// #ifdef MP-BAIDU
|
||||||
|
delayTime = 100;
|
||||||
|
// #endif
|
||||||
|
setTimeout(async()=>{
|
||||||
|
for(let i = 0;i < newVal.length;i++){
|
||||||
|
const nodeRes = await this._getNodeClientRect(`#z-tabs-item-${i}`,true);
|
||||||
|
if(nodeRes){
|
||||||
|
const node = nodeRes[0];
|
||||||
|
node.left += this.currentScrollLeft;
|
||||||
|
itemNodeInfos.push(node);
|
||||||
|
tabsContainerWidth += node.width;
|
||||||
|
}
|
||||||
|
if (i === this.currentIndex){
|
||||||
|
this.itemNodeInfos = itemNodeInfos;
|
||||||
|
this.tabsContainerWidth = tabsContainerWidth;
|
||||||
|
this._updateDotPosition(this.currentIndex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.itemNodeInfos = itemNodeInfos;
|
||||||
|
this.tabsContainerWidth = tabsContainerWidth;
|
||||||
|
this._updateDotPosition(this.currentIndex);
|
||||||
|
},delayTime)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.initTriggerChange && this.changeTriggerFailed && newVal.length) {
|
||||||
|
if (this.current < newVal.length) {
|
||||||
|
this.$emit('change', this.current, newVal[this.current][this.valueKey]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//根据node获取bottomX
|
||||||
|
_getBottomDotX(node, barWidth = this.finalBarWidth, offset = 0){
|
||||||
|
return node.left + node.width / 2 - barWidth / 2 + offset - this.tabsLeft;
|
||||||
|
},
|
||||||
|
//获取节点信息
|
||||||
|
_getNodeClientRect(select, withRefArr = false) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
select = select.replace('.', '').replace('#', '');
|
||||||
|
const ref = withRefArr ? this.$refs[select][0] : this.$refs[select];
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (ref) {
|
||||||
|
weexDom.getComponentRect(ref, option => {
|
||||||
|
if (option && option.result) {
|
||||||
|
resolve([option.size]);
|
||||||
|
} else resolve(false);
|
||||||
|
})
|
||||||
|
} else resolve(false);
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
// #endif
|
||||||
|
const res = uni.createSelectorQuery().in(this);
|
||||||
|
res.select(select).boundingClientRect();
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
res.exec(data => {
|
||||||
|
resolve((data && data != '' && data != undefined && data.length) ? data : false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//格式化badge中的count
|
||||||
|
_formatCount(count) {
|
||||||
|
if (!count) return '';
|
||||||
|
if (count > this.badgeMaxCount) {
|
||||||
|
return this.badgeMaxCount + '+';
|
||||||
|
}
|
||||||
|
return count.toString();
|
||||||
|
},
|
||||||
|
//将文本的px或者rpx转为px的值
|
||||||
|
_convertTextToPx(text) {
|
||||||
|
const dataType = Object.prototype.toString.call(text);
|
||||||
|
if (dataType === '[object Number]') {
|
||||||
|
return rpx2px(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', '');
|
||||||
|
} else {
|
||||||
|
text = rpx2px(text);
|
||||||
|
}
|
||||||
|
if (!isNaN(text)) {
|
||||||
|
if (isRpx) return Number(rpx2px(text));
|
||||||
|
return Number(text);
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
// 添加单位
|
||||||
|
_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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.z-tabs-conatiner{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 750rpx;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-scroll-view-conatiner{
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.z-tabs-scroll-view ::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.z-tabs-scroll-view{
|
||||||
|
flex-direction: row;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-list-container{
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: 100%;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-list,.z-tabs-list-container{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-title-container{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-title-rpx{
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-title-px{
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-title-disabled{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-badge{
|
||||||
|
background-color: #ec5b56;
|
||||||
|
color: white;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-badge-rpx{
|
||||||
|
margin-left: 8rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
padding: 0rpx 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-item-badge-px{
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 0px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-bottom{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-bottom-dot{
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.z-tabs-left,.z-tabs-right{
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
{
|
||||||
|
"id": "z-tabs",
|
||||||
|
"name": "z-tabs",
|
||||||
|
"displayName": "【z-tabs】一个简单轻量的tabs组件",
|
||||||
|
"version": "0.3.0",
|
||||||
|
"description": "全平台兼容,支持nvue、vue3",
|
||||||
|
"keywords": [
|
||||||
|
"tabs"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/SmileZXLee/uni-z-tabs",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.0.7"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": "393727164"
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@zxlee/z-tabs",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y",
|
||||||
|
"钉钉": "y",
|
||||||
|
"快手": "y",
|
||||||
|
"飞书": "y",
|
||||||
|
"京东": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
# z-tabs
|
||||||
|
|
||||||
|
[](https://github.com/SmileZXLee/uni-z-tabs)
|
||||||
|
[](https://en.wikipedia.org/wiki/MIT_License)
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
### 反馈qq群(点击加群):[371624008](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=avPmibADf2TNi4LxkIwjCE5vbfXpa-r1&authKey=dQ%2FVDAR87ONxI4b32Py%2BvmXbhnopjHN7%2FJPtdsqJdsCPFZB6zDQ17L06Uh0kITUZ&noverify=0&group_code=371624008)
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
## z-tabs文档
|
||||||
|
|
||||||
|
### 安装
|
||||||
|
|
||||||
|
#### 方式1(推荐):通过uni_modules安装,在插件市场中点击右上角【使用HbuilderX导入插件】即可。
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
#### 方式2:通过npm安装
|
||||||
|
|
||||||
|
```bash
|
||||||
|
//若项目之前未使用npm管理依赖(项目根目录下无package.json文件),先在项目根目录执行命令初始化npm工程
|
||||||
|
npm init -y
|
||||||
|
|
||||||
|
//安装
|
||||||
|
npm install @zxlee/z-tabs --save
|
||||||
|
//更新
|
||||||
|
npm update @zxlee/z-tabs
|
||||||
|
```
|
||||||
|
|
||||||
|
然后在`pages.json`中配置`easycom`(注意:下方配置只有在使用npm安装时才需要配置!!!!!)
|
||||||
|
|
||||||
|
```json
|
||||||
|
"easycom": {
|
||||||
|
"^z-tabs": "@zxlee/z-tabs/components/z-tabs/z-tabs.vue"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 基本使用
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<z-tabs :list="list"></z-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
const list = [];
|
||||||
|
for(let i = 0;i < 10;i++) {
|
||||||
|
// list内item支持字符串或对象,下方这个是字符串
|
||||||
|
list.push('tab标题');
|
||||||
|
|
||||||
|
// 如果要展示徽标数,则list中item的数据结构应为:
|
||||||
|
list.push({
|
||||||
|
name: 'tab标题',
|
||||||
|
badge: {
|
||||||
|
// 设置徽标数为6
|
||||||
|
count: 6
|
||||||
|
},
|
||||||
|
// 可以禁用某个item
|
||||||
|
disabled: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.list = list;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||||
|
| :------------------ | :----------------------------------------------------------- | :------------- | :------ | :----- |
|
||||||
|
| list | 数据源数组,支持形如`['tab1','tab2']`的格式或`[{name:'tab1',value:1}]`的格式 | Array | [] | - |
|
||||||
|
| current | 当前选中的index | Number\|String | 0 | - |
|
||||||
|
| scroll-count | list数组长度超过scrollCount时滚动显示(不自动铺满全屏) | Number\|String | 5 | - |
|
||||||
|
| tab-width | 自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 0 | 0 |
|
||||||
|
| bar-width | 滑块宽度,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 45rpx | - |
|
||||||
|
| bar-height | 滑块高度,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - |
|
||||||
|
| bar-style | 滑块样式,其中的`width`和`height`将被`bar-width`和`bar-height`覆盖 | Object | {} | - |
|
||||||
|
| bottom-space | tabs与底部的间距,单位rpx,支持传100、"100px"或"100rpx" | Number\|String | 8rpx | - |
|
||||||
|
| bar-animate-mode | 【v0.1.5起支持】切换tab时滑块动画模式,与`swiper`联动时有效,点击切换tab时无效,必须调用`setDx`。默认为`line`,即切换tab时滑块宽度保持不变,线性运动。可选值为`worm`,即为类似毛毛虫蠕动效果 | String | line | worm |
|
||||||
|
| name-key | list中item的name(标题)的key | String | name | - |
|
||||||
|
| value-key | list中item的value的key | String | value | - |
|
||||||
|
| active-color | 激活状态tab的颜色 | String | #007AFF | - |
|
||||||
|
| inactive-color | 未激活状态tab的颜色 | String | #666666 | - |
|
||||||
|
| disabled-color | 禁用状态tab的颜色 | String | #bbbbbb | - |
|
||||||
|
| active-style | 激活状态tab的样式 | Object | {} | - |
|
||||||
|
| inactive-style | 未激活状态tab的样式 | Object | {} | - |
|
||||||
|
| disabled-style | 禁用状态tab的样式 | Object | {} | - |
|
||||||
|
| badge-max-count | 徽标数最大数字限制,超过这个数字将变成`badge-max-count`+ | Number\|String | 99 | - |
|
||||||
|
| badge-style | 徽标样式,例如可自定义背景色,字体等等 | Object | {} | - |
|
||||||
|
| bg-color | z-tabs背景色 | String | white | - |
|
||||||
|
| tabs-style | z-tabs样式 | Object | {} | - |
|
||||||
|
| init-trigger-change | 初始化时是否自动触发change事件 | Boolean | true | false |
|
||||||
|
| unit | z-tabs中布局的单位,默认为rpx | String | rpx | px |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### events
|
||||||
|
|
||||||
|
| 事件名 | 说明 | 回调参数 |
|
||||||
|
| ------------ | -------------------- | ------------------------------------------------------------ |
|
||||||
|
| @change | tabs改变(点击)时触发 | `参数1`:index(当前切换到的index);<br/>`参数2`:value(当前切换到的value) |
|
||||||
|
| @secondClick | tabs二次点击时触发 | `参数1`:index(当前切换到的index);<br/>`参数2`:value(当前切换到的value) |
|
||||||
|
|
||||||
|
### methods
|
||||||
|
|
||||||
|
| 方法名 | 说明 | 参数 |
|
||||||
|
| ------------------- | ------------------------------------------------------------ | -------------------------------------- |
|
||||||
|
| setDx | 根据swiper的`@transition`实时更新底部dot位置 | swiper的`@transition`中的`e.detail.dx` |
|
||||||
|
| unlockDx | 在swiper的`@animationfinish`中通知`z-tabs`结束多`setDx`的锁定,若在父组件中调用了`setDx`,则必须调用`unlockDx` | - |
|
||||||
|
| updateSubviewLayout | 在nvue+安卓中,若在cell中使用`z-tabs`,且页面加载时cell在屏幕之外,因cell的复用机制,可能导致`z-tabs`内部的布局失效:例如底部bar无法显示,此时可在list滚动到一定区域内(例如快显示`z-tabs`)的时候调用此方法以更新其内部布局。其他情况无需调用! | - |
|
||||||
|
|
||||||
|
### slots
|
||||||
|
|
||||||
|
| 名称 | 说明 |
|
||||||
|
| :---- | ------------ |
|
||||||
|
| left | tabs左侧插槽 |
|
||||||
|
| right | tabs右侧插槽 |
|
||||||
|
|
||||||
|
### 支持全局配置
|
||||||
|
|
||||||
|
* 在`/z-tabs/components/z-tabs/config/index.js`文件中进行配置
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
'active-color': 'red'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 【v0.1.4起支持】底部dot与swiper联动演示
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
|
||||||
|
<swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
||||||
|
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||||||
|
xxx
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: ['测试1','测试2','测试3','测试4'],
|
||||||
|
current: 0, // tabs组件的current值,表示当前活动的tab选项
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//tabs通知swiper切换
|
||||||
|
tabsChange(index) {
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
//swiper滑动中
|
||||||
|
swiperTransition(e) {
|
||||||
|
this.$refs.tabs.setDx(e.detail.dx);
|
||||||
|
},
|
||||||
|
//swiper滑动结束
|
||||||
|
swiperAnimationfinish(e) {
|
||||||
|
this.current = e.detail.current;
|
||||||
|
this.$refs.tabs.unlockDx();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -80,7 +80,7 @@ export default ({ command, mode }) => {
|
||||||
imports: ['vue', 'uni-app'],
|
imports: ['vue', 'uni-app'],
|
||||||
dts: 'src/types/auto-import.d.ts',
|
dts: 'src/types/auto-import.d.ts',
|
||||||
dirs: ['src/hooks'], // 自动导入 hooks
|
dirs: ['src/hooks'], // 自动导入 hooks
|
||||||
eslintrc: { enabled: true },
|
eslintrc: { enabled: false },
|
||||||
vueTemplate: true, // default false
|
vueTemplate: true, // default false
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue