uniapp 子组件监听页面触底进行页面数据加载

uniapp yekong 433℃

主页面

        onReachBottom() {
            uni.$emit('onReachBottom', 1);
        },

子组件组件

<template>
    <view class="list">
        <view @click="godetail(item.id)" class="list-item flex-col" :key="i" v-for="(item, i) in list">
            <view class="section_6 flex-row">
                <view class="left-group flex-col">
                    <text class="text_6">{{item.title}}</text>
                    <text class="text_8">{{item.createDate|gettime}}</text>
                </view>
                <image v-if="item.imageUrl" :src="attach+item.imageUrl" mode="scaleToFill" class="image_2" />
            </view>
        </view>
    </view>
</template>


<script>
    import configs from '../../config/config.js'
    import moment from 'moment'
    import {
        newsList
    } from '../../config/api.js'
    export default {
        components: {
        },
        data() {
            return {
                list: [],
                num: 10,
                size: 1,
                attach: configs.attach,
                status: ''
            };
        },
        mounted() {
            var that=this;
            that.getdata()
            uni.$on('onReachBottom', function(data) {
                console.log(data);
                that.getmore();
            });
        },
        filters: {
            gettime: function(next) {
                return moment(next).format("YYYY年MM月DD日 HH:mm")
            }
        },

        methods: {
            godetail(id) {
                uni.navigateTo({
                    url: '/pages/news/detail?id=' + id
                })
            },
            getdata() {
                var that = this;
                that.size = 1
                var data = {
                    limit: that.num.toString(),
                    page: that.size.toString(),
                    type: ""
                }
                newsList(data).then(res => {
                    if (res.code == 0) {
                        that.list = res.page.list
                    }
                }).catch(err => {

                })
            },
            getmore() {
                var that = this;
                that.size = that.size + 1;
                that.status = 'loading';
                let data = {
                    limit: that.num.toString(),
                    page: that.size.toString(),
                    type: ""
                };
                newsList(data).then(res => {
                    console.log(res.data)
                    var data = res.page.list;
                    if (!data || data.length == 0) {
                        that.status = 'nomore';
                    }
                    for (var i = 0; i < data.length; i++) {
                        that.list.push(data[i]);
                    }
                }).catch(err => {

                })
            },
        }
    };
</script>

<style lang="scss" scoped>
    .list {
        width: 690rpx;
        margin: 10rpx auto;

        .list-item {
            filter: drop-shadow(0px 5rpx 16rpx rgba(160, 167, 211, 0.5));
            border-radius: 10rpx;
            width: 690rpx;
            background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/61a6dda6dc329c0011115438/16383261414782472794.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: relative;
            margin-bottom: 20rpx;
            left: 0;
            right: 0;
            top: 0;

            .section_6 {
                padding: 23rpx 19rpx 19rpx 39rpx;
                border-radius: 10rpx;
                border: solid 2rpx rgb(255, 255, 255);

                .left-group {
                    flex: 1 1 auto;

                    .text_6 {
                        color: rgb(0, 0, 0);
                        font-size: 28rpx;
                        font-weight: 700;
                        line-height: 40rpx;
                        text-transform: uppercase;
                    }

                    .text_8 {
                        margin-top: 32rpx;
                        color: rgb(153, 153, 153);
                        font-size: 24rpx;
                        font-weight: 700;
                        line-height: 23rpx;
                        white-space: nowrap;
                        text-transform: uppercase;
                    }
                }

                .image_2 {
                    border-radius: 10rpx;
                    width: 175rpx;
                    height: 147rpx;
                }
            }
        }
    }
</style>
喜欢 (2)