> For the complete documentation index, see [llms.txt](https://sugar-at.gitbook.io/blog-article/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sugar-at.gitbook.io/blog-article/uni-app/p1.md).

# 1. uni-app中不使用scroll-view组件,监听页面滑直底部事件

## 最终达到的目标效果

![text-chart-201912517381](http://img.cdn.sugarat.top/text-chart-201912517381.gif)

## 将要用到

> 监听页面滚动事件:[onPageScroll](https://uniapp.dcloud.io/api/lifecycle)
>
> 获取节点信息[uni.createSelectorQuery()](https://uniapp.dcloud.io/api/ui/nodes-info)

### 标签布局

```markup
<template>
    <view class="content">
        <!--目标节点-->
        <view class="text-area" id="listArea">
            <view class="square" v-for="(v,i) in info" :key='i'>{{v}}</view>
        </view>
    </view>
</template>
```

### js部分

```javascript
export default {
        data() {
            return {
                screenHeight: 0, //屏幕高度
                info: [],//展示的列表数据
                isLoading: false, //防止频繁触发
                bottomDistinct:200//距离底部多少像素时触发
            }
        },
        onLoad() {
            //页面加载时取得屏幕高度
            this.screenHeight = uni.getSystemInfoSync().screenHeight;

            //测试数据(初始化)
            this.info=new Array(5).fill(0).map((v,i)=>i+1);
        },
        methods: {
            /**
             *  页面滑动事件
             */
            onPageScroll: function(e) {
                const {
                    scrollTop//滚动条距离页面顶部的像素
                } = e;

                //防止重复触发
                if(this.isLoading){
                    return;
                }
                //获取SelectorQuery 对象实例
                const query = uni.createSelectorQuery().in(this);

                //为listArea节点绑定查询请求
                query.select('#listArea').boundingClientRect(data => {
                    let {
                        height//listArea节点的高度
                    } = data; 
                    //如果设置的事件触发距离 大于等于 (节点的高度-屏幕高度-滚动条到顶部的距离)
                    if(this.bottomDistinct>=height-this.screenHeight-scrollTop){
                        //阻止事件重复触发
                        this.isLoading=true;
                        //模拟异步加载数据
                        uni.showToast({
                            title:"获取新数据"
                        })
                        setTimeout(()=>{
                            //测试数据
                            let arr=new Array(5).fill(0);
                            arr=arr.map((v,i)=>this.info.length+i+1);

                            //数据填充
                            this.info=this.info.concat(arr);
                            this.isLoading=false;
                        }, 1500);
                    }
                }).exec();
            }
        }
    }
```

### 完整demo代码

```markup
<template>
    <view class="content">
        <view class="text-area" id="listArea">
            <view class="square" v-for="(v,i) in info" :key='i'>{{v}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                screenHeight: 0, //屏幕高度
                info: [],//展示的列表数据
                isLoading: false, //防止频繁触发
                bottomDistinct:200//距离底部多少像素时触发
            }
        },
        onLoad() {
            //页面加载时取得屏幕高度
            this.screenHeight = uni.getSystemInfoSync().screenHeight;
            //数据初始化
            this.info=new Array(5).fill(0).map((v,i)=>i+1);
        },
        methods: {
            /**
             *  页面滑动事件
             */
            onPageScroll: function(e) {
                const {
                    scrollTop//滚动条距离页面顶部的像素
                } = e;

                //防止重复触发
                if(this.isLoading){
                    return;
                }

                const query = uni.createSelectorQuery().in(this);
                query.select('#listArea').boundingClientRect(data => {
                    let {
                        height//listArea节点的高度
                    } = data; 
                    //如果设置的事件触发距离 大于等于 (节点的高度-屏幕高度-滚动条到顶部的距离)
                    if(this.bottomDistinct>=height-this.screenHeight-scrollTop){
                        //阻止时间重复触发
                        this.isLoading=true;
                        //模拟异步加载数据
                        uni.showToast({
                            title:"获取新数据"
                        })
                        setTimeout(()=>{
                            //测试数据
                            let arr=new Array(5).fill(0);
                            arr=arr.map((v,i)=>this.info.length+i+1);

                            //数据填充
                            this.info=this.info.concat(arr);
                            this.isLoading=false;
                        }, 1500);
                    }
                }).exec();
            }
        }
    }
</script>

<style>

    .text-area {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background-color: #007AFF;
    }
    .square{
        margin: 1em;
        background-color: #4CD964;
        color: #fff;
        width:8em;
        text-align: center;
        line-height: 5em;
        height: 5em;
    }

</style>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sugar-at.gitbook.io/blog-article/uni-app/p1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.