给我写个小程序上拉加载,下拉刷新的代码
时间: 2023-06-23 16:52:14 浏览: 50
好的,以下是一个简单的上拉加载、下拉刷新的小程序代码:
```html
<!-- HTML结构 -->
<template>
<div class="wrapper">
<div class="pull-down-wrapper">
<div class="pull-down-content">{{pullDownText}}</div>
</div>
<div class="list-wrapper">
<ul>
<li v-for="(item, index) in list" :key="index">{{item}}</li>
</ul>
<!-- 上拉加载 -->
<div class="pull-up-wrapper">
<div class="loading" v-if="isLoading">加载中...</div>
<div class="no-more" v-else-if="isNoMore">没有更多了</div>
<div class="pull-up-content" v-else>{{pullUpText}}</div>
</div>
</div>
</div>
</template>
<!-- JS代码 -->
<script>
export default {
data() {
return {
pullDownText: '下拉刷新',
pullUpText: '上拉加载更多',
list: [],
isLoading: false,
isNoMore: false,
pullDown: {
startY: 0,
endY: 0,
distance: 0,
threshold: 50
},
pullUp: {
startY: 0,
endY: 0,
distance: 0,
threshold: 50
}
}
},
mounted() {
// 初始化数据
this.getList()
// 监听下拉刷新
this.$refs.listWrapper.addEventListener('touchstart', this.handlePullDownStart)
this.$refs.listWrapper.addEventListener('touchmove', this.handlePullDownMove)
this.$refs.listWrapper.addEventListener('touchend', this.handlePullDownEnd)
// 监听上拉加载
window.addEventListener('scroll', this.handlePullUp)
},
beforeDestroy() {
// 移除监听
this.$refs.listWrapper.removeEventListener('touchstart', this.handlePullDownStart)
this.$refs.listWrapper.removeEventListener('touchmove', this.handlePullDownMove)
this.$refs.listWrapper.removeEventListener('touchend', this.handlePullDownEnd)
window.removeEventListener('scroll', this.handlePullUp)
},
methods: {
async getList() {
// 发送请求获取数据
this.isLoading = true
const res = await axios.get('/api/list')
this.isLoading = false
// 更新数据
this.list.push(...res.data)
// 判断是否还有更多数据
if (res.data.length < 10) {
this.isNoMore = true
}
},
async handlePullDownStart(e) {
// 记录开始位置
this.pullDown.startY = e.touches[0].clientY
},
async handlePullDownMove(e) {
// 计算移动距离
this.pullDown.distance = e.touches[0].clientY - this.pullDown.startY
// 如果是向下滑动并且在页面最顶部
if (this.pullDown.distance > 0 && window.pageYOffset === 0) {
// 阻止默认事件
e.preventDefault()
// 更新下拉刷新状态
this.pullDownContent = this.pullDown.distance >= this.pullDown.threshold ? '松开刷新' : '下拉刷新'
}
},
async handlePullDownEnd() {
// 如果下拉距离超过了阈值
if (this.pullDown.distance >= this.pullDown.threshold) {
// 更新下拉刷新状态
this.pullDownContent = '加载中...'
// 发送请求获取数据
const res = await axios.get('/api/list')
// 更新数据
this.list = res.data
}
// 重置下拉刷新状态
this.pullDown.distance = 0
this.pullDownContent = '下拉刷新'
},
async handlePullUp() {
// 如果滚动到了底部
if (window.innerHeight + window.pageYOffset >= document.body.scrollHeight - 50) {
// 如果正在加载或者没有更多数据,直接返回
if (this.isLoading || this.isNoMore) {
return
}
// 更新上拉加载状态
this.pullUpText = '加载中...'
// 发送请求获取数据
const res = await axios.get('/api/list')
// 更新数据
this.list.push(...res.data)
// 判断是否还有更多数据
if (res.data.length < 10) {
this.isNoMore = true
}
// 重置上拉加载状态
this.pullUpText = '上拉加载更多'
}
}
}
}
</script>
<!-- 样式 -->
<style scoped>
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.pull-down-wrapper {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #999;
transform: translate3d(0, -50px, 0);
transition: transform 0.3s ease-out;
}
.pull-down-wrapper.active {
transform: translate3d(0, 0, 0);
}
.list-wrapper {
flex: 1;
}
.pull-up-wrapper {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #999;
margin-top: 20px;
}
</style>
```
需要注意的是,该代码是基于Vue框架实现的,如果您使用的是其他框架或不使用框架,需要做相应的调整。