uinapp触底与下拉时间触发的使用

在UniApp中,onReachBottom 和 onPullDownRefresh 是两个重要的生命周期函数,分别用于处理页面滚动到底部时触发的事件和下拉刷新时触发的事件。

  1. 在页面的 .vue 文件中:
<template>  
  <view>  
    <scroll-view  
      scroll-y="true"  
      @scrolltolower="onReachBottom"  
      style="height: 100vh;"  
    >  
      <view v-for="(item, index) in list" :key="index">  
        {{ item }}  
      </view>  
      <!-- 用于加载更多的占位符,可根据需要自定义样式 -->  
      <view v-if="isLoading" class="loading-more">加载中...</view>  
    </scroll-view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      list: [], // 列表数据  
      page: 1, // 当前页码  
      pageSize: 10, // 每页数据条数  
      isLoading: false, // 是否正在加载数据  
    };  
  },  
  onLoad() {  
    this.fetchData(); // 页面加载时获取初始数据  
  },  
  methods: {  
    fetchData() {  
      // 假设 fetchDataFromServer 是你从服务器获取数据的函数  
      this.isLoading = true; // 开始加载数据时设置标志位  
      fetchDataFromServer(this.page, this.pageSize).then(data => {  
        this.list = this.list.concat(data); // 合并新数据到列表  
        this.page += 1; // 页码自增  
        this.isLoading = false; // 数据加载完成,设置标志位为 false  
      }).catch(error => {  
        console.error('加载数据失败', error);  
        this.isLoading = false; // 加载失败也设置标志位为 false  
      });  
    },  
    onReachBottom() {  
      // 滚动到底部时触发,如果不在加载中,则继续加载数据  
      if (!this.isLoading) {  
        this.fetchData();  
      }  
    },  
    onPullDownRefresh() {  
      // 下拉刷新时触发  
      this.page = 1; // 重置页码为第一页  
      this.list = []; // 清空列表数据  
      this.fetchData(); // 重新获取数据  
    },  
  },  
  onUnload() {  
    // 页面卸载时,确保停止任何可能还在进行的异步操作  
    this.isLoading = false;  
  },  
};  
</script>  
  
<style>  
.loading-more {  
  text-align: center;  
  padding: 20rpx;  
}  
</style>
  1. 在页面的 pages.json 配置文件中:
{  
  "navigationBarTitleText": "我的list列表",  
  "enablePullDownRefresh": true // 开启下拉刷新  
}

自学东西,才过的坑。
在这里插入图片描述
唯有美景,才能抚慰我的心灵!

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java000I

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值