关于uniapp中onReachBottomDistance属性的使用

 更新时间:2022年09月02日 09:28:10   作者:官方哈哈  
这篇文章主要介绍了关于uniapp中onReachBottomDistance属性的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

uniapp中onReachBottomDistance属性的使用

关于uniapp中onReachBottomDistance在pages.json中的有什么作用一直搞不清楚,通过一个案例让我们来了解它的用处。

代码:

    "style": {
            "onReachBottomDistance":100,
            "navigationBarTitleText": "购物车",
            "enablePullDownRefresh": true,
            "app-plus":{
                "pullToRefresh": {
                    "support": true,
                    "color": "#fa436a",
                    "style": "default"
                }
            }
<template>
    
    <view class="cartWrap">购物车页面呀!!!!!</view>
</template>
<script>
    export default{
        data(){
            return{
                
            }
        },
        onReachBottom(){//页面上拉触底事件的处理函数
            console.log("用户把这个页面上拉100时触发我的")
        }
    }
</script>
<style >
    .cartWrap{
        height:900px;
    }
</style>

**注意:**在这里页面的高度一定大于可视高度,可以理解为要出现滚动条。这样页面的onReachBottom事件才会触发。

希望通过这个案例大家对uniapp中配置onReachBottomDistance的用处有了一定的了解

uniapp onReachBottom 触底事件

onReachBottom

属于uniapp 钩子函数 可以直接使用

onReachBottom 是触底函数 是相对于整个页面,局部页面滚动不支持,请不要使用。

如果 onReachBottom 函数不生效 说明没有触底。触底了就一定执行。

为了我实现效果onReachBottomDistance 配置的大一点

执行了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Bootstrap实现提示框和弹出框效果

    Bootstrap实现提示框和弹出框效果

    这篇文章主要为大家详细介绍了Bootstrap实现弹出框和提示框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS实现拖动滑块验证

    JS实现拖动滑块验证

    这篇文章主要为大家详细介绍了JS实现拖动滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • request请求获取参数的实现方法(post和get两种方式)

    request请求获取参数的实现方法(post和get两种方式)

    下面小编就为大家带来一篇request请求获取参数的实现方法(post和get两种方式)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 微信小程序淘宝首页双排图片布局排版代码(推荐)

    微信小程序淘宝首页双排图片布局排版代码(推荐)

    这篇文章主要介绍了微信小程序淘宝首页双排图片布局排版代码,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • 原生js页面滚动延迟加载图片

    原生js页面滚动延迟加载图片

    这篇文章主要介绍了原生js页面滚动延迟加载图片的相关资料,现在瀑布流效果大行其道,各种网站都有应用,尤其是专业的图片类型的网站,感兴趣的朋友可以参考下
    2015-12-12
  • JS数组实现分类统计实例代码

    JS数组实现分类统计实例代码

    本文通过实例代码给大家介绍了js数组实现分类统计的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • JavaScript实现动态表格的方法详解

    JavaScript实现动态表格的方法详解

    这篇文章主要为大家介绍了JavaScript实现动态表格的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • JavaScript 下载svg图片为png格式

    JavaScript 下载svg图片为png格式

    这篇文章主要介绍了JavaScript 下载svg图片为png格式,本文通过代码给大家讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • js每隔两秒输出数组中的一项(实例)

    js每隔两秒输出数组中的一项(实例)

    下面小编就为大家带来一篇js每隔两秒输出数组中的一项(实例)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • JavaScript中诡异的delete操作符

    JavaScript中诡异的delete操作符

    这篇文章主要介绍了JavaScript中诡异的delete操作符,本文讲解了删除对象的属性、对数组的操作、对于变量的操作等内容,需要的朋友可以参考下
    2015-03-03

最新评论