<template>
<view class="scroll-list-wrap" :style="[scrollListWrapStyle]">
<scroll-view
class="scroll-view"
:class="[elClass]"
:style="[listWrapStyle]"
scroll-y
scroll-anchoring
enable-back-to-top
:scroll-top="scrollTop"
:lower-threshold="defaultOption.lowerThreshold"
@scroll="handleScroll"
@touchend="handleTouchEnd"
@touchmove.prevent.stop="handleTouchMove"
@touchstart="handleTouchStart"
@scrolltolower="handleScrolltolower"
>
<view class="scroll-content" :style="[scrollContentStyle]">
<view class="pull-down-wrap">
<slot name="pulldown" v-if="$slots.pulldown"></slot>
<view class="refresh-view" :style="[refreshViewStyle]" v-else>
<view class="pull-down-animation" :class="{ refreshing: refreshing }" :style="[pullDownAnimationStyle]"></view>
<text class="pull-down-text" :style="[pullDownTextStyle]">{{ refreshStateText }}</text>
</view>
</view>
<view class="empty-wrap-me" v-if="showEmpty">
<slot name="empty" v-if="$slots.empty"></slot>
<view class="empty-view-me" v-else>
<image class="empty-image" :src="defaultOption.emptyImage || images.empty" mode="aspectFit"></image>
<text class="empty-text" :style="[emptyTextStyle]">{{ emptyText }}</text>
</view>
</view>
<view class="list-content"><slot></slot></view>
<view class="pull-up-wrap" v-if="showPullUp">
<slot name="pullup" v-if="$slots.pullup"></slot>
<view class="load-view" v-else>
<view class="pull-up-animation" v-if="loading" :style="[pullUpAnimationStyle]"></view>
<text class="pull-up-text" :style="[pullUpTextStyle]">{{ loadStateText }}</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import images from './images.js';
export default {
name: 'scroll-list',
props: {
// 配置信息
option: {
type: Object,
default: () => ({})
}
},
data() {
return {
defaultOption: {
page: 1, // 分页
size: 10, // 分页大小
auto: true, // 自动加载
height: null, // 组件高度
disabled: false, // 禁用
background: '', // 背景颜色属性
emptyImage: '', // 空数据提示图片
offsetBottom: 0, // 底部高度补偿
pullDownSpeed: 0.5, // 下拉速率
lowerThreshold: 40, // 距离底部上拉加载距离
refresherThreshold: 80, // 距离顶部下拉刷新距离
refreshDelayed: 800, // 刷新延迟
refreshFinishDelayed: 800, // 刷新完成后的延迟
safeArea: false, // 是否开启安全区域适配
emptyTextColor: '#82848a', // 空提示文字颜色
loadTextColor: '#82848a', // 上拉加载文字颜色
loadIconColor: '#82848a', // 上拉加载图标颜色
refresherTextColor: '#82848a', // 下拉刷新文字颜色
refresherIconColor: '#82848a', // 下拉刷新图标颜色
emptyText: '暂无列表~', // 空数据提示文字
loadingText: '正在加载中~', // 加载中文字
loadFailText: '加载失败啦~', // 加载失败文字
noMoreText: '没有更多啦~', // 没有更多文字
refreshingText: '正在刷新~', // 正在刷新文字
refreshFailText: '刷新失败~', // 刷新失败文字
refreshSuccessText: '刷新成功~', // 刷新成功文字
pulldownText: '下拉刷新~', // 下拉中的文字
pulldownFinishText: '松开刷新~' // 下拉完成的文字
},
images, // 内置图片
elClass: '', // 组件动态class
windowInfo: {}, // 窗口信息
scrollTop: 0, // 距离顶部滚动高度
scrollViewTop: -1, // 滚动视图顶部位置
scrollViewHeight: 0, // 滚动视图高度
currentPage: 1, // 当前分页页码
currentSize: 15, // 当前分页大小
currentScrollTop: 0, // 当前滚动高度
emptyText: '暂无列表~',
loadStateText: '正在加载中~', // 加载状态文字
refreshStateText: '下拉刷新~', // 刷新状态文字
loadDisabled: false, // 是否禁用上拉加载
loading: false, // 是否加载中
refreshing: false, // 是否刷新中
refreshFinish: false, // 是否刷新完成
pulldowning: false, // 是否正在下拉
pullDownHeight: 0, // 下拉高度
showEmpty: false, // 是否显示空数据提示
showPullUp: false, // 是否显示上拉加载
showPullDown: false // 是否显示下拉刷新
};
},
methods: {
// 组件初始化
handleInit() {
// 合并配置
this.defaultOption = Object.assign(this.defaultOption, this.option);
this.showEmpty = !this.defaultOption.auto;
this.currentPage = this.defaultOption.page;
this.currentSize = this.defaultOption.size;
this.emptyText = this.defaultOption.emptyText;
this.loadStateText = this.defaultOption.loadingText;
this.refreshStateText = this.defaultOption.pulldownText;
// 计算高度
this.queryRect('.' + this.elClass).then(rect => {
// 设置组件顶部位置
this.scrollViewTop = rect.top;
// 判断是否自动加载
if (this.defaultOption.auto) this.load();
});
},
/**
* 加载数据
*
*/
load() {
if (this.defaultOption.disabled || this.loading || this.loadDisabled) return;
// 开启正在加载
this.loading = true;
// 设置正在加载状态文字
this.loadStateText = this.defaultOption.loadingText;
// 显示上拉加载
this.showPullUp = true;
// 分页参数
let paging = { page: this.currentPage, size: this.currentSize };
// 触发load事件
this.$emit('load', paging);
},
// 加载成功
loadSuccess(data = {}) {
// 解构数据
const { list, total } = data;
// 判断列表是否是数组
if (Array.isArray(list)) {
// 判断列表长度
if (list.length) {
// 判断列表长度和列表总数是否相同
if (list.length >= total) {
// 设置禁用上拉加载
this.loadDisabled = true;
// 加载状态文字
this.loadStateText = this.defaultOption.noMoreText;
} else {
// 关闭禁用上拉加载
this.loadDisabled = false;
// 设置分页参数
this.currentPage++;
// 加载状态为加载中
this.loadStateText = this.defaultOption.loadingText;
// 加载计算
this.loadCompute();
}
// 显示上拉加载
this.showPullUp = true;
// 隐藏空数据提示
this.showEmpty = false;
} else {
// 设置禁用上拉加载
this.loadDisabled = true;
// 隐藏上拉加载
this.showPullUp = false;
// 隐藏上拉加载
this.showPullUp = false;
// 显示空数据提示
this.showEmpty = true;
}
// 关闭正在加载
this.loading = false;
// 触发加载成功事件
this.$emit('loadSuccess', list);
} else {
// 不是数组类型当作加载失败处理
this.loadFail();
console.error('the list must be a array');
}
},
// 加载失败
loadFail() {
// 关闭正在加载
this.loading = false;
// 关闭空数据提示
this.showEmpty = false;
// 显示上拉加载
this.showPullUp = true;
// 加载状态为加载失败
this.loadStateText = this.defaultOption.loadFailText;
// 触发加载失败事件
this.$emit('loadFail');
},
// 刷新数据
refresh() {
// 如果是下拉刷新
if (this.pullDownHeight == this.defaultOption.refresherThreshold) {
// 关闭正在加载
this.loading = false;
// 隐藏上拉加载
this.showPullUp = false;
} else {
// 开启正在加载
this.loading = true;
// 隐藏空数据提示
this.showEmpty = false;
// 显示上拉加载
this.showPullUp = true;
// 设置正在刷新状态文字
this.loadStateText = this.defaultOption.refreshingText;
}
// 设置刷新未完成
this.refreshFinish = false;
// 开启正在刷新
this.refreshing = true;
// 设置正在刷新状态文字
this.refreshStateText = this.defaultOption.refreshingText;
// 设置分页参数
this.currentPage = 1;
this.currentSize = this.defaultOption.size;
let paging = { page: this.currentPage, size: this.currentSize };
// 触发refresh事件
setTimeout(() => {
this.$emit('refresh', paging);
}, this.defaultOption.refreshDelayed);
},
// 刷新成功
refreshSuccess(data) {
// 解构数据
const { list, total } = data;
// 判断列表是否是数组
if (Array.isArray(list)) {
// 判断列表长度
if (list.length) {
// 判断列表长度和列表总数是否相同
if (list.length >= total) {
// 设置禁用上拉加载
this.loadDisabled = true;
// 设置没有更多状态文字
this.loadStateText = this.defaultOption.noMoreText;
} else {
// 设置分页参数
this.currentPage++;
// 关闭禁用上拉加载
this.loadDisabled = false;
// 设置加载中状态文字
this.loadStateText = this.defaultOption.loadingText;
// 开启自动加载
this.defaultOption.auto = true;
// 加载计算
this.loadCompute();
}
// 关闭空数据提示
this.showEmpty = false;
// 显示上拉加载
this.showPullUp = true;
} else {
// 设置禁用上拉加载
this.loadDisabled = true;
// 隐藏上拉加载
this.showPullUp = false;
// 显示空数据提示
this.showEmpty = true;
// 设置没有更多状态文字
this.loadStateText = this.defaultOption.noMoreText;
}
// 关闭正在加载
this.loading = false;
// 设置刷新成功状态文字
this.refreshStateText = this.defaultOption.refreshSuccessText;
// 关闭正在刷新
this.refreshing = false;
// 关闭正在下拉
this.pulldowning = false;
// 触发刷新成功事件
this.$emit('refreshSuccess', list);
setTimeout(() => {
// 设置刷新完成
this.refreshFinish = true;
// 重置下拉高度
this.pullDownHeight = 0;
// 隐藏下拉刷新
this.showPullDown = false;
this.$emit('refreshSuccess');
}, this.defaultOption.refreshFinishDelayed);
} else {
// 不是数组类型当作刷新失败处理
this.refreshFail();
console.error('the list must be a array');
}
},
// 刷新失败
refreshFail() {
// 设置加载失败状态文字
this.loadStateText = this.defaultOption.refreshFailText;
// 设置刷新失败状态文字
this.refreshStateText = this.defaultOption.refreshFailText;
// 关闭正在加载
this.loading = false;
// 显示下拉加载
this.showPullUp = true;
// 关闭正在刷新
this.refreshing = false;
// 关闭正在下拉
this.pulldowning = false;
// 延迟执行刷新完成后状态
setTimeout(() => {
// 设置刷新完成
this.refreshFinish = true;
// 重置下拉高度
this.pullDownHeight = 0;
// 隐藏下拉刷新
this.showPullDown = false;
// 触发刷新失败事件
this.$emit('refreshError');
}, this.defaultOption.refreshFinishDelayed);
},
// 加载计算
loadCompute() {
// 判断是否自动加载
if (this.defaultOption.auto) {
// 延迟执行下否者可能会高度计算错误
setTimeout(() => {
this.$nextTick(() => {
this.queryRect('.list-content').then(rect => {
if (rect.height <= this.scrollViewHeight) {
this.load();
}
});
});
}, 100);
}
},
/**
*
* 上拉触底事件 滚动触底
* @param {Object} e
*/
handleScrolltolower(e) {
if (this.loadDisabled) return;
this.$emit('scrolltolower', e);
//
this.load();
},
/**
* 滚动事件
* @param {Object} event
*
*/
handleScroll(event) {
this.currentScrollTop = event.detail.scrollTop;
this.$emit('scroll', event.detail);
},
/**
* 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
* 触摸按下处理
* @param {Object} event
*/
handleTouchStart(event) {
if (this.defaultOption.disabled) return;
this.currentTouchStartY = event.touches[0].clientY;
this.$emit('touchStart', event);
},
/**
* 当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
* 触摸按下滑动处理
* @param {Object} event
*/
handleTouchMove(event) {
if (this.defaultOption.disabled || this.currentScrollTop) return;
if (event.touches[0].clientY >= this.currentTouchStartY) {
this.pulldowning = true;
this.showPullDown = true;
let pullDownDistance = (event.touches[0].clientY - this.currentTouchStartY) * this.defaultOption.pullDownSpeed;
this.pullDownHeight = pullDownDistance > this.defaultOption.refresherThreshold ? this.defaultOption.refresherThreshold : pullDownDistance;
this.refreshStateText =
this.pullDownHeight >= this.defaultOption.refresherThreshold ? this.defaultOption.pulldownFinishText : this.defaultOption.pulldownText;
this.$emit('touchMove', event);
}
},
/**
* 移动端
* 当手指从屏幕上移开时触发
* 触摸松开处理
* @param {Object} event
*/
handleTouchEnd(event) {
if (this.defaultOption.disabled) return;
// 当下拉高度小于下拉阈值
if (this.pullDownHeight < this.defaultOption.refresherThreshold) {
// 关闭正在下拉
this.pulldowning = false;
// 重置下拉高度
this.pullDownHeight = 0;
// 隐藏下拉刷新
this.showPullDown = false;
// 触发下拉中断事件
this.$emit('refreshStop');
} else {
this.refresh();
}
// 触发下拉触摸松开事件
this.$emit('touchEnd', event);
},
// 更新组件
updateScrollView() {
if (this.defaultOption.height) {
this.scrollViewHeight = uni.upx2px(this.defaultOption.height);
} else {
this.scrollViewHeight = this.windowInfo.windowHeight - this.scrollViewTop;
}
this.scrollViewObserve();
},
// 监听列表高度变化
listContentObserve() {
this.disconnectObserve('_listContentObserve');
const listContentObserve = this.createIntersectionObserver({
thresholds: [0, 0.5, 1]
});
listContentObserve.relativeToViewport({
// #ifdef H5
top: -(this.windowInfo.windowTop + rect.top),
// #endif
// #ifndef H5
top: -rect.top
// #endif
});
},
// 监听组件位置变化
scrollViewObserve() {
this.disconnectObserve('_scrollViewObserve');
this.$nextTick(() => {
this.queryRect('.' + this.elClass).then(rect => {
const scrollViewObserve = this.createIntersectionObserver({
thresholds: [0, 0.5, 1]
});
scrollViewObserve.relativeToViewport({
// #ifdef H5
top: -(this.windowInfo.windowTop + rect.top),
// #endif
// #ifndef H5
top: -rect.top
// #endif
});
scrollViewObserve.observe('.' + this.elClass, position => {
// #ifdef H5
this.scrollViewTop = position.boundingClientRect.top - this.windowInfo.windowTop;
// #endif
// #ifndef H5
this.scrollViewTop = position.boundingClientRect.top;
// #endif
});
this._scrollViewObserve = scrollViewObserve;
});
});
},
// 断开监听组件
disconnectObserve(observerName) {
const observer = this[observerName];
observer && observer.disconnect();
},
// 查询dom节点信息
queryRect(selector, all) {
return new Promise(resolve => {
uni.createSelectorQuery()
.in(this)
[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect);
}
if (!all && rect) {
resolve(rect);
}
})
.exec();
});
},
// 16进制转RGB
hexToRgb(hex) {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
return r + r + g + g + b + b;
});
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null;
}
},
computed: {
scrollListWrapStyle(){
let style = {};
style.background = this.defaultOption.background;
return style;
},
// 组件容器样式
listWrapStyle() {
let style = {};
const { offsetBottom } = this.defaultOption;
style.height = this.scrollViewHeight - uni.upx2px(offsetBottom) + 'px';
if (this.defaultOption.safeArea) style.paddingBottom = 'env(safe-area-inset-bottom) !important';
return style;
},
// 滚动内容样式
scrollContentStyle() {
const style = {};
const { pullDownHeight, pulldowning, showPullDown } = this;
style.transform = showPullDown ? `translateY(${pullDownHeight}px)` : `translateY(0px)`;
style.transition = pulldowning ? `transform 100ms ease-out` : `transform 200ms cubic-bezier(0.19,1.64,0.42,0.72)`;
return style;
},
// 下拉刷新样式
refreshViewStyle() {
const style = {};
const { showPullDown } = this;
style.opacity = showPullDown ? 1 : 0;
return style;
},
// 下拉中动画样式
pullDownAnimationStyle() {
const style = {};
const { refresherIconColor, refresherThreshold } = this.defaultOption;
const { refreshing, pullDownHeight } = this;
const { r, g, b } = this.hexToRgb(refresherIconColor);
const rate = pullDownHeight / refresherThreshold;
style.borderColor = `rgba(${r},${g},${b},0.2)`;
style.borderTopColor = refresherIconColor;
if (!refreshing) {
style.transform = `rotate(${360 * rate}deg)`;
style.transition = 'transform 100ms linear';
}
return style;
},
pullDownTextStyle() {
const style = {};
const { refresherTextColor } = this.defaultOption;
style.color = refresherTextColor;
return style;
},
// 上拉中动画样式
pullUpAnimationStyle() {
const style = {};
const { loadIconColor } = this.defaultOption;
const { r, g, b } = this.hexToRgb(loadIconColor);
style.borderColor = `rgba(${r},${g},${b},0.2)`;
style.borderTopColor = loadIconColor;
return style;
},
// 上拉中文字样式
pullUpTextStyle() {
const style = {};
const { loadTextColor } = this.defaultOption;
style.color = loadTextColor;
return style;
},
// 空数据提示文字样式
emptyTextStyle() {
const style = {};
const { emptyTextColor } = this.defaultOption;
style.color = emptyTextColor;
return style;
}
},
watch: {
scrollViewTop(val) {
this.updateScrollView();
}
},
created() {
this.elClass = 'scroll-view-' + this._uid;
this.windowInfo = uni.getSystemInfoSync();
},
mounted() {
this.handleInit();
}
};
</script>
<style lang="scss" scoped>
.scroll-list-wrap {
box-sizing: border-box;
.scroll-view {
position: relative;
.scroll-content {
height: 100%;
display: flex;
will-change: transform;
flex-direction: column;
.pull-down-wrap {
left: 0;
width: 100%;
display: flex;
padding: 30rpx 0;
position: absolute;
align-items: flex-end;
justify-content: center;
transform: translateY(-100%);
.refresh-view {
display: flex;
justify-content: center;
.pull-down-animation {
width: 32rpx;
height: 32rpx;
border-width: 4rpx;
border-style: solid;
border-radius: 50%;
&.refreshing {
animation: spin 0.5s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
}
.pull-down-text {
margin-left: 10rpx;
}
}
}
.empty-wrap-me {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
flex-direction: column;
.empty-view-me {
margin: auto;
display: flex !important;
align-items: center;
flex-direction: column;
.empty-image {
width: 200rpx;
height: 200rpx;
}
.empty-text {
color: #606266;
margin-top: 20rpx;
}
}
}
.list-content {
}
.pull-up-wrap {
display: flex;
align-items: center;
justify-content: center;
.load-view {
padding: 20rpx 0;
display: flex;
align-items: center;
justify-content: center;
.pull-up-animation {
width: 32rpx;
height: 32rpx;
border-width: 4rpx;
border-style: solid;
border-radius: 50%;
animation: spin 0.5s linear infinite;
}
.pull-up-text {
margin-left: 10rpx;
}
}
}
}
}
}
</style>