Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 280debcb 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

删除 前端实现的自定义下拉刷新示例

上级 bba65984
隐藏空白更改
内联 并排
Showing with 1 addition and 319 deletion
pages.json
浏览文件 @ 280debcb
......@@ -648,12 +648,6 @@
"navigationBarTitleText": ""
}
},
{
"path": "pages/template/custom-pull-page/custom-pull-page",
"style": {
"navigationBarTitleText": "自定义下拉上拉效果"
}
},
{
"path": "pages/template/scroll-fold-nav/scroll-fold-nav",
"style": {
......
pages/tabBar/template.uvue
浏览文件 @ 280debcb
......@@ -73,15 +73,9 @@
pages: [] as Page[]
}, {
id: "custom-refresher",
url: "custom-pull-page",
name: "自定义上拉下拉效果(前端实现)",
open: false,
pages: [] as Page[]
},{
id: "custom-refresher",
url: "custom-refresher",
name: "自定义下拉刷新（原生实现）",
name: "自定义下拉刷新",
open: false,
pages: [] as Page[]
},
......
pages/template/custom-pull-page/custom-pull-page.uvue 已删除 100644 → 0
浏览文件 @ bba65984
<template>
<view class="root">
<view class="top-box">
<text class="top-box-text">可通过slot自定义，上拉加载下来刷新效果示例</text>
</view>
<custom-pull :height="300" width="750rpx" :refreshBoxHeight="60" :refreshThreshold="60" :refreshHoldHeight="60"
:loadingBoxHeight="30" :loadingThreshold="20" :loadingHoldHeight="30" @loading="loading" @refresh="refresh"
ref="custom-pull" class="custom-pull">
<template v-slot:refresh-box="scope">
<view class="refresh-box">
<image class="logo" src="/static/uni.png" mode="widthFix"></image>
<text class="tip-text" v-if="scope.get('refreshState')== 0">继续下拉执行刷新（slot）</text>
<text class="tip-text" v-if="scope.get('refreshState')== 1">释放立即刷新</text>
<text class="tip-text" v-if="scope.get('refreshState')== 2">刷新中</text>
<text class="tip-text" v-if="scope.get('refreshState')== 3">刷新完成</text>
<!-- 可基于拖动距离实现互动性更加强的效果 -->
<!-- <text class="tip-text">拖动的距离：{{scope.get('pullingDistance')}}</text> -->
</view>
</template>
<view v-for="i in 8" class="item">
item-{{i}}
</view>
<template v-slot:loading-box="scope">
<view class="loading-box">
<text class="tip-text" v-if="scope.get('loadingState')== 0">继续上拉加载更多（slot）</text>
<text class="tip-text" v-if="scope.get('loadingState')== 1">释放立即加载更多</text>
<text class="tip-text" v-if="scope.get('loadingState')== 2">加载中...</text>
<text class="tip-text" v-if="scope.get('loadingState')== 3">加载完成</text>
<!-- 可基于拖动距离实现互动性更加强的效果 -->
<!-- <text>拖动的距离：{{scope.get('pullingDistance')}}</text> -->
</view>
</template>
</custom-pull>
</view>
</template>
<script>
import customPull from './custom-pull/custom-pull.uvue';
export default {
components: {
customPull
},
data() {
return {
}
},
onReady() {
// console.log('this.$refs["custom-pull"]', this.$refs["custom-pull"] as ComponentPublicInstance);
},
methods: {
loading() {
setTimeout(() => {
(this.$refs["custom-pull"] as ComponentPublicInstance).$callMethod('endLoading')
}, 1000);
},
refresh() {
setTimeout(() => {
(this.$refs["custom-pull"] as ComponentPublicInstance).$callMethod('endRefresh')
}, 1000);
}
}
}
</script>
<style scoped>
.root {
flex: 1;
background-color: #FFF;
}
.top-box{
padding: 15px 5px;
}
.top-box-text{
font-size: 14px;
color: #888;
}
.custom-pull {
border: 1px solid #efefef;
}
.refresh-box,
.loading-box {
background-color: #efefef;
justify-content: center;
align-items: center;
}
.logo {
width: 30px;
height: 30px;
margin-top: 3px;
}
.item {
height: 80px;
border-top: 1px solid #efefef;
justify-content: center;
}
.tip-text {
color: #888;
font-size: 12px;
padding: 2px 0;
}
</style>
\ No newline at end of file
pages/template/custom-pull-page/custom-pull/custom-pull.uvue 已删除 100644 → 0
浏览文件 @ bba65984
<template>
<view class="pull-box-root" :style="{'height':height+'px'}">
<view class="pull-box" @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
:style="{'height':height+loadingBoxHeight+refreshBoxHeight+'px',width,'transform':'translateY('+(y-refreshBoxHeight-3)+'px)'}">
<view class="refresh-box" :style="{height:refreshBoxHeight+'px'}">
<slot name="refresh-box" :refreshState="refreshState" :pullingDistance="y"></slot>
</view>
<!-- <view v-if="refreshState == 0">继续下拉执行刷新</view>
<view v-if="refreshState == 1">释放立即刷新</view>
<view v-if="refreshState == 2">刷新中...</view>
<view v-if="refreshState == 3">刷新完成</view>
<view style="position: absolute;top: 60px;">拖动的距离：{{y}}</view> -->
<scroll-view :scroll-y="true && !lockScrollY" :style="{'height':height+'px',width}" @scroll="onScroll">
<slot></slot>
</scroll-view>
<!-- <view v-if="loadingState == 0">继续上拉加载更多</view>
<view v-if="loadingState == 1">释放立即加载更多</view>
<view v-if="loadingState == 2">加载中...</view>
<view v-if="loadingState == 3">加载完成</view>
<view style="position: absolute;top: 60px;">拖动的距离：{{y}}</view>-->
<view class="loading-box" :style="{height:loadingBoxHeight+'px'}">
<slot name="loading-box" :loadingState="loadingState" :pullingDistance="y"></slot>
</view>
</view>
<!-- <view style="position: fixed;bottom: 100px;left: 100px;background-color: red;">
<text>scrollInBottom: {{scrollInBottom}}</text>
<text>height：{{height}}</text>
<text>loadingBoxHeight：{{loadingBoxHeight}}</text>
<text>{{height+refreshBoxHeight}}</text>
</view> -->
</view>
</template>
<script>
import ScrollEvent from 'io.dcloud.uniapp.runtime.ScrollEvent';
let sY : number = 0;
let scrollTop : number = 0;
export default {
data() {
return {
x: 0 as number,
y: 0 as number,
lockScrollY: false as boolean,
scrollInBottom: false as boolean,
refreshState: 0 as number,
loadingState: 0 as number
}
},
computed: {
},
props: {
height: {
type: Number,
default: 300
},
width: {
type: String,
default: '750rpx'
},
refreshBoxHeight: {
type: Number,
default: 50
},
refreshThreshold: {
type: Number,
default: 30
},
loadingBoxHeight: {
type: Number,
default: 50
},
loadingThreshold: {
type: Number,
default: 20
},
refreshHoldHeight: {
type: Number,
default: 20
},
loadingHoldHeight: {
type: Number,
default: 20
},
},
methods: {
touchstart(e : TouchEvent) {
sY = e.touches[0].screenY
},
touchmove(e : TouchEvent) {
if (
!(
(scrollTop == 0 && this.refreshState == 0) ||
(this.scrollInBottom == true && this.loadingState == 0)
)
) {
// console.log('this.scrollInBottom == true && this.loadingState == 0')
// console.log(this.scrollInBottom,this.loadingState)
return
}
let touchmoveY : number = e.touches[0].screenY
// console.log('touchmoveY', touchmoveY);
this.lockScrollY = true
let mY = touchmoveY - sY
if (
this.y < this.refreshBoxHeight && mY > 0
) {
this.y = mY > this.refreshBoxHeight ? this.refreshBoxHeight : mY
console.log('下拉',this.y,this.refreshThreshold,this.refreshBoxHeight);
if (this.y >= this.refreshThreshold) {
this.refreshState = 1
}
} else if(scrollTop != 0 && this.y > this.loadingBoxHeight * -1){
this.y = mY <= this.loadingBoxHeight * -1 ? this.loadingBoxHeight * -1 : mY
console.log("上拉");
if (this.y < this.loadingThreshold * -1) {
this.loadingState = 1
}
}
else {
return
}
},
touchend() {
this.lockScrollY = false
if (this.refreshState == 1) {
this.y = this.refreshHoldHeight //下拉刷新时保持的高度
this.refreshState = 2
this.$emit('refresh')
// 因为不支持调用组件内的事件先在内部模拟
setTimeout(this.endRefresh, 1000);
} else if (this.loadingState == 1) {
this.y = -1 * this.loadingHoldHeight //上拉加载时时保持的高度
this.loadingState = 2
this.$emit('loading')
// 因为不支持调用组件内的事件先在内部模拟
setTimeout(this.endLoading, 1000);
} else {
this.y = 0
}
},
onScroll(e : ScrollEvent) {
// console.log('ScrollEvent-currentTarget', e.currentTarget);
// console.log('e.detail.scrollTop',Math.floor(e.detail.scrollTop));
scrollTop = Math.floor(e.detail.scrollTop)
// console.log('(scrollTop + this.height) == e.detail.scrollHeight',(scrollTop + this.height) == e.detail.scrollHeight)
// console.log('(scrollTop + this.height) == e.detail.scrollHeight',scrollTop,this.height,e.detail.scrollHeight)
this.scrollInBottom = (scrollTop + this.height) == Math.floor(e.detail.scrollHeight)
},
endRefresh() {
this.refreshState = 3
setTimeout(() => {
this.refreshState = 0
this.y = 0
}, 1000);
},
endLoading() {
this.loadingState = 3
setTimeout(() => {
this.loadingState = 0
this.y = 0
}, 1000);
}
}
}
</script>
<style scoped>
.pull-box-root {}
.pull-box {}
/* .loading-box {
justify-content: flex-start;
align-items: center;
}
.refresh-box {
justify-content: flex-end;
align-items: center;
} */
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或