Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 bb422d69 编写于 作者: Y yangxiaolu3
浏览文件
操作

feat: pullrefresh

上级 e7125a07
隐藏空白更改
内联 并排
Showing with 227 addition and 91 deletion
src/packages/pullrefresh/demo.vue
浏览文件 @ bb422d69
<template>
<div class="demo">
<nut-pullrefresh @refresh="refresh" :useWindow="false" containerId="pull">
<div class="content" id="pull">
<div class="main">
<div class="text-data">我是测试数据1</div>
<div class="text-data">我是测试数据2</div>
<div class="text-data">我是测试数据3</div>
<div class="text-data">我是测试数据4</div>
<div class="text-data">我是测试数据5</div>
<div class="text-data">我是测试数据6</div>
<div class="text-data">我是测试数据7</div>
<div class="text-data">我是测试数据8</div>
<div class="text-data">我是测试数据9</div>
<div class="text-data">我是测试数据10</div>
<div class="text-data">我是测试数据11</div>
<div class="text-data">我是测试数据12</div>
<div class="text-data">我是测试数据13</div>
<div class="text-data">我是测试数据14</div>
<div class="text-data">我是测试数据15</div>
<div class="text-data">我是测试数据16</div>
<div class="text-data">我是测试数据17</div>
<div class="text-data">我是测试数据18</div>
<div class="text-data">我是测试数据19</div>
<div class="text-data">我是测试数据20</div>
<div class="text-data">我是测试数据21</div>
<div class="text-data">我是测试数据22</div>
<div class="text-data">我是测试数据23</div>
<div class="text-data">我是测试数据24</div>
</div>
<h2>纵向</h2>
<nut-cell>
<div class="vertical">
<nut-pullrefresh
@refresh="refresh"
:useWindow="false"
containerId="pull"
>
<div class="content" id="pull">
<div class="main">
<div class="text-data">我是测试数据1</div>
<div class="text-data">我是测试数据2</div>
<div class="text-data">我是测试数据3</div>
<div class="text-data">我是测试数据4</div>
<div class="text-data">我是测试数据5</div>
<div class="text-data">我是测试数据6</div>
<div class="text-data">我是测试数据7</div>
<div class="text-data">我是测试数据8</div>
<div class="text-data">我是测试数据9</div>
<div class="text-data">我是测试数据10</div>
<div class="text-data">我是测试数据11</div>
<div class="text-data">我是测试数据12</div>
<div class="text-data">我是测试数据13</div>
<div class="text-data">我是测试数据14</div>
<div class="text-data">我是测试数据15</div>
<div class="text-data">我是测试数据16</div>
<div class="text-data">我是测试数据17</div>
<div class="text-data">我是测试数据18</div>
<div class="text-data">我是测试数据19</div>
<div class="text-data">我是测试数据20</div>
<div class="text-data">我是测试数据21</div>
<div class="text-data">我是测试数据22</div>
<div class="text-data">我是测试数据23</div>
<div class="text-data">我是测试数据24</div>
</div>
</div>
</nut-pullrefresh>
</div>
</nut-pullrefresh>
</nut-cell>
<h2>横向</h2>
<nut-cell>
<div class="horizontal">
<nut-pullrefresh
@refresh="refresh"
:useWindow="false"
containerId="pullH"
direction="horizontal"
>
<div class="contentH" id="pullH">
<div class="mainH">
<div class="text-data">我是测试数据1</div>
<div class="text-data">我是测试数据2</div>
<div class="text-data">我是测试数据3</div>
<div class="text-data">我是测试数据4</div>
<div class="text-data">我是测试数据5</div>
<div class="text-data">我是测试数据6</div>
<div class="text-data">我是测试数据7</div>
<div class="text-data">我是测试数据8</div>
<div class="text-data">我是测试数据9</div>
</div>
</div>
</nut-pullrefresh>
</div>
</nut-cell>
</div>
</template>
......@@ -50,12 +85,35 @@ export default createDemo({
</script>
<style lang="scss" scoped>
.vertical {
height: 300px;
overflow: hidden;
}
.content {
height: 100%;
overflow: auto;
.main {
padding: 10px 0;
background: #f00;
}
}
.horizontal {
width: 100%;
}
.contentH {
height: 100px;
overflow: auto;
.mainH {
display: flex;
height: 100%;
.text-data {
height: 90% !important;
width: 120px !important;
flex-shrink: 0;
padding: 0 !important;
margin: 2px 10px 0 0 !important;
text-align: center;
}
}
}
</style>
src/packages/pullrefresh/index.css
浏览文件 @ bb422d69
......@@ -10,17 +10,27 @@ view {
.nut-pullrefresh .pullrefresh-top {
position: absolute;
left: 0;
width: 100%;
height: 50px;
overflow: hidden;
color: #969799;
font-size: 14px;
line-height: 50px;
text-align: center;
}
.nut-pullrefresh .pullrefresh-top.pullrefresh-top-v {
width: 100%;
height: 50px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.nut-pullrefresh .pullrefresh-top.pullrefresh-top-h {
width: 50px;
height: 100%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.nut-pullrefresh .pullrefresh-content {
height: 100%;
overflow: auto;
......@@ -29,15 +39,27 @@ view {
.nut-pullrefresh .pullrefresh-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
overflow: hidden;
color: #969799;
font-size: 14px;
line-height: 50px;
text-align: center;
}
.nut-pullrefresh .pullrefresh-bottom.pullrefresh-bottom-v {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.nut-pullrefresh .pullrefresh-bottom.pullrefresh-bottom-h {
top: 0;
right: 0;
width: 50px;
height: 100%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
src/packages/pullrefresh/index.min.css
浏览文件 @ bb422d69
view{display:block}.nut-pullrefresh{position:relative;height:100%}.nut-pullrefresh .pullrefresh-top{position:absolute;left:0;width:100%;height:50px;overflow:hidden;color:#969799;font-size:14px;line-height:50px;text-align:center;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.nut-pullrefresh .pullrefresh-content{height:100%;overflow:auto;background:#fff}.nut-pullrefresh .pullrefresh-bottom{position:absolute;left:0;bottom:0;width:100%;height:0px;overflow:hidden;color:#969799;font-size:14px;line-height:50px;text-align:center;-webkit-transform:translateY(100%);transform:translateY(100%)}
view{display:block}.nut-pullrefresh{position:relative;height:100%}.nut-pullrefresh .pullrefresh-top{position:absolute;left:0;overflow:hidden;color:#969799;font-size:14px;line-height:50px;text-align:center}.nut-pullrefresh .pullrefresh-top.pullrefresh-top-v{width:100%;height:50px;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.nut-pullrefresh .pullrefresh-top.pullrefresh-top-h{width:50px;height:100%;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nut-pullrefresh .pullrefresh-content{height:100%;overflow:auto;background:#fff}.nut-pullrefresh .pullrefresh-bottom{position:absolute;overflow:hidden;color:#969799;font-size:14px;line-height:50px;text-align:center}.nut-pullrefresh .pullrefresh-bottom.pullrefresh-bottom-v{left:0;bottom:0;width:100%;height:0px;-webkit-transform:translateY(100%);transform:translateY(100%)}.nut-pullrefresh .pullrefresh-bottom.pullrefresh-bottom-h{top:0;right:0;width:50px;height:100%;-webkit-transform:translateX(100%);transform:translateX(100%)}
src/packages/pullrefresh/index.scss
浏览文件 @ bb422d69
......@@ -9,15 +9,24 @@ view {
.pullrefresh-top {
position: absolute;
left: 0;
width: 100%;
height: 50px;
overflow: hidden;
color: #969799;
font-size: 14px;
line-height: 50px;
text-align: center;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
&.pullrefresh-top-v {
width: 100%;
height: 50px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
&.pullrefresh-top-h {
width: 50px;
height: 100%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.pullrefresh-content {
......@@ -28,16 +37,28 @@ view {
.pullrefresh-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
overflow: hidden;
color: #969799;
font-size: 14px;
line-height: 50px;
text-align: center;
-webkit-transform: translateY(100%);
transform: translateY(100%);
&.pullrefresh-bottom-v {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
&.pullrefresh-bottom-h {
top: 0;
right: 0;
width: 50px;
height: 100%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
}
src/packages/pullrefresh/index.vue
浏览文件 @ bb422d69
......@@ -7,7 +7,12 @@
@touchmove="touchMove"
@touchend="touchEnd"
>
<view class="pullrefresh-top">
<view
class="pullrefresh-top"
:class="
direction == 'horizontal' ? 'pullrefresh-top-h' : 'pullrefresh-top-v'
"
>
<template v-if="status == 'loading' && reachTop && distance > 0">
加载中...
</template>
......@@ -22,7 +27,15 @@
<slot></slot>
</view>
<view class="pullrefresh-bottom" :style="getBottomStyle">
<view
class="pullrefresh-bottom"
:class="
direction == 'horizontal'
? 'pullrefresh-bottom-h'
: 'pullrefresh-bottom-v'
"
:style="getBottomStyle"
>
<template v-if="status == 'loading' && reachBottom && distance < 0">
加载中...
</template>
......@@ -52,6 +65,15 @@ export default create({
containerId: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
/** 方向 Horizontal */
direction: {
type: String,
default: 'vertical'
}
},
components: {},
......@@ -60,7 +82,7 @@ export default create({
setup(props, { emit }) {
console.log('componentName', componentName);
const { containerId, useWindow } = toRefs(props);
const { containerId, useWindow, direction, disabled } = toRefs(props);
const reachTop = ref(false);
const reachBottom = ref(false);
......@@ -104,6 +126,8 @@ export default create({
return style;
});
const isTouchable = () => state.status !== 'loading' && !disabled.value;
const setStatus = (distance: number, isLoading?: boolean) => {
state.distance = distance;
......@@ -157,57 +181,68 @@ export default create({
};
const touchStart = event => {
/** 判断滚动条是否在顶部 */
const top = 'scrollTop' in scrollEl ? scrollEl.scrollTop : 0;
reachTop.value = Math.max(top, 0) == 0 ? true : false;
if (reachTop.value) {
state.duration = 0;
touch.start(event);
}
const { scrollHeight, clientHeight, scrollTop } = scrollEl;
/** 判断滚动条是否在底部*/
reachBottom.value =
clientHeight + scrollTop == scrollHeight ? true : false;
if (reachBottom.value) {
state.duration = 0;
touch.start(event);
if (isTouchable()) {
if (direction.value == 'vertical') {
/** 判断滚动条是否在顶部 */
const top = 'scrollTop' in scrollEl ? scrollEl.scrollTop : 0;
reachTop.value = Math.max(top, 0) == 0 ? true : false;
if (reachTop.value) {
state.duration = 0;
touch.start(event);
}
const { scrollHeight, clientHeight, scrollTop } = scrollEl;
/** 判断滚动条是否在底部*/
reachBottom.value =
clientHeight + scrollTop == scrollHeight ? true : false;
if (reachBottom.value) {
state.duration = 0;
touch.start(event);
}
} else {
const { scrollWidth, clientWidth, scrollLeft } = scrollEl;
/** 判断滚动条是否在左边 */
console.log(scrollWidth, clientWidth, scrollLeft);
}
}
};
const touchMove = event => {
const { deltaY } = touch;
touch.move(event);
if (reachTop.value && deltaY.value >= 0 && touch.isVertical()) {
preventDefault(event);
setStatus(ease(deltaY.value));
}
if (isTouchable()) {
const { deltaY } = touch;
touch.move(event);
if (reachTop.value && deltaY.value >= 0 && touch.isVertical()) {
preventDefault(event);
setStatus(ease(deltaY.value));
}
if (reachBottom.value && deltaY.value < 0 && touch.isVertical()) {
preventDefault(event);
setStatus(ease(deltaY.value));
if (reachBottom.value && deltaY.value < 0 && touch.isVertical()) {
preventDefault(event);
setStatus(ease(deltaY.value));
}
}
};
const touchEnd = () => {
if (reachTop.value && touch.deltaY.value > 0) {
if (state.status === 'loosing') {
setStatus(50, true);
emit('refresh', refreshDone);
} else {
setStatus(0);
if (isTouchable()) {
if (reachTop.value && touch.deltaY.value > 0) {
if (state.status === 'loosing') {
setStatus(50, true);
emit('refresh', refreshDone);
} else {
setStatus(0);
}
}
}
if (reachBottom.value && touch.deltaY.value < 0) {
if (state.status === 'loosing') {
setStatus(-50, true);
emit('refresh', refreshDone);
} else {
setStatus(0);
if (reachBottom.value && touch.deltaY.value < 0) {
if (state.status === 'loosing') {
setStatus(-50, true);
emit('refresh', refreshDone);
} else {
setStatus(0);
}
}
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或