init
This commit is contained in:
52
uni_modules/nutui-uni/components/infiniteloading/index.scss
Normal file
52
uni_modules/nutui-uni/components/infiniteloading/index.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
.nut-infiniteloading {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
.nut-infinite-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.top-img {
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.top-text {
|
||||
font-size: 10px;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nut-infinite-bottom {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-top: 16px;
|
||||
font-size: $font-size-small;
|
||||
color: $infiniteloading-bottom-color;
|
||||
text-align: center;
|
||||
|
||||
.bottom-box {
|
||||
.bottom-img {
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.bottom-text {
|
||||
font-size: 10px;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export type * from './infiniteloading'
|
||||
@@ -0,0 +1,63 @@
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { isFunction, isNumber } from '../_utils'
|
||||
|
||||
export const infiniteloadingProps = {
|
||||
hasMore: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: 200,
|
||||
},
|
||||
upperThreshold: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
pullIcon: {
|
||||
type: String,
|
||||
default: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
|
||||
},
|
||||
pullTxt: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loadIcon: {
|
||||
type: String,
|
||||
default: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
|
||||
},
|
||||
loadTxt: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
loadMoreTxt: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
useWindow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
containerId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
useCapture: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isOpenRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
}
|
||||
|
||||
export type InfiniteLoadingProps = ExtractPropTypes<typeof infiniteloadingProps>
|
||||
|
||||
export const infiniteloadingEmits = {
|
||||
scrollChange: (val: number) => isNumber(val),
|
||||
loadMore: (fun: () => void) => isFunction(fun),
|
||||
refresh: (fun: () => void) => isFunction(fun),
|
||||
}
|
||||
|
||||
export type InfiniteLoadingEmits = typeof infiniteloadingEmits
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup lang="ts">
|
||||
import type { ComponentInternalInstance } from 'vue'
|
||||
import { computed, defineComponent, getCurrentInstance, onMounted, reactive } from 'vue'
|
||||
import { PREFIX } from '../_constants'
|
||||
import { useSelectorQuery } from '../_hooks'
|
||||
import { useTranslate } from '../../locale'
|
||||
import NutIcon from '../icon/icon.vue'
|
||||
import { infiniteloadingEmits, infiniteloadingProps } from './infiniteloading'
|
||||
|
||||
const props = defineProps(infiniteloadingProps)
|
||||
|
||||
const emit = defineEmits(infiniteloadingEmits)
|
||||
|
||||
const instance = getCurrentInstance() as ComponentInternalInstance
|
||||
const { query } = useSelectorQuery(instance)
|
||||
|
||||
const state = reactive({
|
||||
scrollHeight: 0,
|
||||
scrollTop: 0,
|
||||
isInfiniting: false,
|
||||
direction: 'down',
|
||||
isTouching: false,
|
||||
refreshMaxH: 0,
|
||||
y: 0,
|
||||
x: 0,
|
||||
distance: 0,
|
||||
})
|
||||
|
||||
const classes = computed(() => {
|
||||
const prefixCls = componentName
|
||||
return {
|
||||
[prefixCls]: true,
|
||||
}
|
||||
})
|
||||
|
||||
const getStyle = computed(() => {
|
||||
return {
|
||||
height: state.distance < 0 ? '0px' : `${state.distance}px`,
|
||||
transition: state.isTouching
|
||||
? 'height 0s cubic-bezier(0.25,0.1,0.25,1)'
|
||||
: 'height 0.2s cubic-bezier(0.25,0.1,0.25,1)',
|
||||
}
|
||||
})
|
||||
function getParentElement(el: string) {
|
||||
return query.select(props.containerId ? `#${props.containerId} #${el}` : `#${el}`)
|
||||
}
|
||||
/** 获取需要滚动的距离 */
|
||||
function getScrollHeight() {
|
||||
const parentElement = getParentElement('scroller')
|
||||
|
||||
parentElement
|
||||
.boundingClientRect((rect: Record<string, any>) => {
|
||||
state.scrollHeight = rect?.height || 0
|
||||
})
|
||||
.exec()
|
||||
}
|
||||
|
||||
/** 滚动到底部 */
|
||||
function lower() {
|
||||
if (state.direction === 'up' || !props.hasMore || state.isInfiniting) {
|
||||
return false
|
||||
}
|
||||
else {
|
||||
state.isInfiniting = true
|
||||
emit('loadMore', infiniteDone)
|
||||
}
|
||||
}
|
||||
|
||||
function scroll(e: { detail: { scrollTop: number } }) {
|
||||
// 滚动方向
|
||||
if (e.detail.scrollTop <= 0) {
|
||||
// 滚动到最顶部
|
||||
e.detail.scrollTop = 0
|
||||
}
|
||||
else if (e.detail.scrollTop >= state.scrollHeight) {
|
||||
// 滚动到最底部
|
||||
e.detail.scrollTop = state.scrollHeight
|
||||
}
|
||||
if (e.detail.scrollTop > state.scrollTop || e.detail.scrollTop >= state.scrollHeight)
|
||||
state.direction = 'down'
|
||||
else
|
||||
state.direction = 'up'
|
||||
|
||||
state.scrollTop = e.detail.scrollTop
|
||||
|
||||
emit('scrollChange', e.detail.scrollTop)
|
||||
}
|
||||
|
||||
function infiniteDone() {
|
||||
state.isInfiniting = false
|
||||
}
|
||||
|
||||
function touchStart(event: TouchEvent) {
|
||||
if (state.scrollTop === 0 && !state.isTouching && props.isOpenRefresh) {
|
||||
state.y = event.touches[0].pageY
|
||||
state.isTouching = true
|
||||
}
|
||||
}
|
||||
|
||||
function touchMove(event: TouchEvent) {
|
||||
state.distance = event.touches[0].pageY - state.y
|
||||
|
||||
if (state.distance > 0 && state.isTouching) {
|
||||
event.preventDefault()
|
||||
if (state.distance >= state.refreshMaxH)
|
||||
state.distance = state.refreshMaxH
|
||||
}
|
||||
else {
|
||||
state.distance = 0
|
||||
state.isTouching = false
|
||||
}
|
||||
}
|
||||
|
||||
function touchEnd() {
|
||||
if (state.distance < state.refreshMaxH)
|
||||
state.distance = 0
|
||||
else
|
||||
emit('refresh', refreshDone)
|
||||
}
|
||||
|
||||
function refreshDone() {
|
||||
state.distance = 0
|
||||
state.isTouching = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
state.refreshMaxH = props.upperThreshold
|
||||
setTimeout(() => {
|
||||
getScrollHeight()
|
||||
}, 200)
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
const componentName = `${PREFIX}-infiniteloading`
|
||||
export default defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
const { translate } = useTranslate(componentName)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<scroll-view
|
||||
id="scroller"
|
||||
:class="classes"
|
||||
:scroll-y="true"
|
||||
style="height: 100%"
|
||||
@scrolltolower="lower"
|
||||
@scroll="scroll"
|
||||
@touchstart="(touchStart as any)"
|
||||
@touchmove="(touchMove as any)"
|
||||
@touchend="touchEnd"
|
||||
>
|
||||
<view class="nut-infinite-top" :style="getStyle">
|
||||
<view id="refreshTop" class="top-box">
|
||||
<NutIcon custom-class="top-img" :name="pullIcon" />
|
||||
<view class="top-text">
|
||||
{{ pullTxt || translate('pullTxt') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="nut-infinite-container">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
<view class="nut-infinite-bottom">
|
||||
<template v-if="state.isInfiniting">
|
||||
<view class="bottom-box">
|
||||
<NutIcon custom-class="bottom-img" :name="loadIcon" />
|
||||
<view class="bottom-text">
|
||||
{{ loadTxt || translate('loading') }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="!hasMore">
|
||||
<view class="tips">
|
||||
{{ loadMoreTxt || translate('loadMoreTxt') }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
Reference in New Issue
Block a user