uniapp之上拉、下拉临界点的监听(当前界面,或部分视图)-------生命周期函数的运用,或scroll-view 的运用

本文详细介绍了在uni-app中实现上拉加载更多和下拉刷新功能的两种方法:一是通过scroll-view组件的事件监听,二是利用页面的生命周期函数。讲解了如何配置pages.json以启用下拉刷新,并展示了具体的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 组件嵌套方式的上拉,下拉触碰(当前界面只对部分视图进行滚动)
<scroll-view 
    style="height: 450upx;" 
    class="scroll-v list" 
    @scrolltoupper="pullDown" 
    enableBackToTop="true" 
    scroll-y  
    @scrolltolower="loadMore">
        放入视图组件
</scroll-view>
pullDown(e){
    console.log(e,'下拉')
    uni.showToast({
        title: '下拉刷新',
        duration: 2000
    });
},
loadMore(e){
    console.log(e,'上拉')
    uni.showToast({
        title: '上拉加载更多',
        duration: 2000
    });
},

// 当前界面(不存在引用的外部组件)进行上拉、下拉
1、在pages.json文件中配置,开启下拉刷新
{
 "pages": [
  {
   "path": "pages/index/index",
   "style": {
    "enablePullDownRefresh": true
   }
  }, 
2、在界面中调用生命周期函数
onPullDownRefresh(){
    uni.showToast({
        title: '下拉刷新',
        duration: 2000
    });
},
onReachBottom(){
    uni.showToast({
        title: '上拉加载更多',
        duration: 2000
    });
},

 

两种方式类似,区别就是一个利用了生命周期进行监听,一个利用了scroll-view标签。

后续更新上拉加载更多,下拉刷新的功能代码讲解。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值