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

最终达到的目标效果

text-chart-201912517381

将要用到

监听页面滚动事件:onPageScroll

获取节点信息uni.createSelectorQuery()

标签布局

<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部分

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代码

<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>