下拉加载更多简单版本

<view class="content">
    <scroll-view scroll-y='true' style="height:calc(100vh  - 1rpx);" scroll-with-animation="true" scroll-y
        lower-threshold="100" bindscrolltolower="scrollToLower">
        <view class="subcontent">
            <view class="exams">
                <view class="exam" wx:for="{{exams}}" wx:key="index" wx:for-item="item" data-item="{{item}}">
                    <image src="../../../imgs/home/exam.png"></image>
                    <view class="exam_top">{{item.paperName}}</view>
                    <view class="exam_bottom">
                        <view class="exam_left">
                            <text>共{{item.qstCount}}道题</text>
                            <text>时间：{{item.replyTime}}分钟</text>
                        </view>
                        <view wx:if="{{item.sellingPrice}}" class="exam_right">
                            <text>￥{{item.originalPrice}}</text>
                            <text>￥{{item.sellingPrice}}</text>
                        </view>
                        <view wx:else class="exam_right2">免费</view>
                    </view>
                </view>
            </view>
        </view>
        <view class='data-loading' hidden='{{hasNextPage}}' style="background:#F4F7FB;">
            -- 没有更多了 --
        </view>
    </scroll-view>
</view>


const Util = require("../../../utils/util")
Page({
    data: {
        exams: [],
        current: 1,
        size: 10,
        // 加载更多
        hasNextPage: true, // 判断是否有下一页
        loadingData: false, // 防抖。true表示正在调用接口，阻止重复调用。
    },
    onLoad: function (options) {
        this.getPapperBarGraph()
    },
    // 获取考试
    async getPapperBarGraph() {
        let url = 'front/exam-exam-paper/getPapperBarGraph'
        let obj = {
            current: this.data.current,
            size: this.data.size,
            papperName: '5',
            ifChapter: false,
            fieldSort: '',
            isAsc: '',
            subjectId: '',
            ruleId: '',
        }
        Util.showLoading()
        var data = await Util.post(url, obj, 2)
        if (data.status == '200') {
            var allDatas
            // 判断是否是第一页
            if (this.data.current == 1) {
                allDatas = data.data.list
            } else {
                allDatas = [...this.data.exams, ...data.data.list]
            }
            this.setData({
                loadingData: false,
                exams: allDatas
            })
            // 判断还有没有更多数据
            if (!data.data.hasNextPage) {
                this.setData({
                    hasNextPage: false
                })
            }
        }
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    scrollToLower: function () {
        if (this.data.hasNextPage) {
            var loadingData = this.data.loadingData
            if (loadingData) {
                return;
            }
            var current = this.data.current + 1
            this.setData({
                loadingData: true,
                current
            })
            this.getPapperBarGraph()
        }
    },
})


.content {
    overflow: hidden
}

.search_div {
    overflow: hidden;
    height: 88rpx;
    background-color: #fff;
}

.cancel {
    position: absolute;
    top: 14rpx;
    right: 16rpx;
    font-size: 32rpx;
    color: #3B3849;
    padding: 7rpx;
}

.placeholder_input {
    color: #333;
}

.search_input {
    margin-top: 11rpx;
    margin-left: 29rpx;
    width: 623rpx;
    height: 66rpx;
    position: relative;
    background: #FBFBFB;
    border-radius: 8rpx;
    overflow: hidden;
}

.search_input input {
    list-style: none;
    outline: none;
    border: none;
    padding-left: 40rpx;
    height: 66rpx;
    line-height: 66rpx;
    color: #333;
    font-size: 30rpx;
    width: 500rpx;
}

.search_input image {
    width: 33rpx;
    height: 33rpx;
    position: absolute;
    top: 17rpx;
    right: 20rpx;
}

/* tab */

.tabs {
    margin-bottom: 16rpx;
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80rpx;
    background: #fff;
    font-size: 28rpx;
    white-space: nowrap;
    top: 0;
    left: 0;
    z-index: 99;
}

.tab-item {
    width: 150rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;
    text-align: center;
    display: inline-block;
}

.tab-item.active {
    font-size: 32rpx;
    color: #3D7EFE;
    position: relative;
}

.tab-item.active:after {
    content: "";
    display: block;
    height: 5rpx;
    width: 50rpx;
    background: #3D7EFE;
    position: absolute;
    bottom: 0;
    left: 49rpx;
    border-radius: 16rpx;
}

.subcontent {
    background: #fff;
    overflow: hidden;
    border-radius: 20rpx;
}

.subtitle {
    padding-left: 30rpx;
    padding-top: 20rpx;
    font-size: 36rpx;
    color: #3B3849;
    font-weight: bold;
}

.more {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3D7EFE;
    font-size: 26rpx;
}

.more image {
    width: 32rpx;
    height: 32rpx;
    margin-left: 5rpx;
}

/* 课程 套餐 */

.taocans {
    padding: 0 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.taocan {
    margin-top: 21rpx;
    position: relative;
    width: 100%;
    padding-bottom: 40rpx;
    border-bottom: 1px solid #EFEFEF;
}

.taocan image {
    width: 260rpx;
    height: 143rpx;
    position: absolute;
    top: 0;
    left: 0;
}

.taocan view:nth-child(2) {
    font-size: 34rpx;
    color: #3B3849;
    margin-left: 280rpx;
    height: 100rpx;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.taocan_tip {
    color: #FF4747;
    font-size: 20rpx;
    position: absolute;
    right: 0;
    bottom: 55rpx;
}

.taocan_price {
    color: #FF4747;
    font-size: 34rpx;
    position: absolute;
    right: 0;
    bottom: 45rpx;
}

.taocan_price text {
    font-size: 20rpx;
}

.taocan_price2 {
    color: #FF4747;
    font-size: 36rpx;
    position: absolute;
    right: 0;
    bottom: 45rpx;
}

.taocan_detail {
    color: #8B93A0;
    font-size: 24rpx;
    margin-top: 12rpx;
    margin-left: 280rpx;
}

.taocan_detail text:nth-child(1) {
    padding-right: 15rpx;
}

.taocan_detail view:nth-child(2) {
    width: 2px;
    height: 20rpx;
    background: #8B93A0;
    display: inline-block;
    margin-left: 0;
}

.taocan_detail text:nth-child(3) {
    padding-left: 15rpx;
}

/* 题库 */

.exams {
    background: #fff;
}

.exam {
    height: 156rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    border-bottom: 1px solid #ECECEC;
    padding-top: 20rpx;
    position: relative;
}

.exam image {
    position: absolute;
    top: 22rpx;
    left: 0;
    width: 76rpx;
    height: 95rpx;
}

.exam_top {
    padding-left: 109rpx;
    padding-right: 30rpx;
    font-size: 34rpx;
    color: #3B3849;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.exam_bottom {
    align-items: baseline;
    padding-top: 20rpx;
    font-size: 24rpx;
    color: #8B93A0;
    display: flex;
    justify-content: space-between;
}

.exam_left {
    padding-left: 109rpx;
}

.exam_left text:nth-child(1) {
    padding-right: 20rpx;
}

.exam_right text:nth-child(1) {
    text-decoration: line-through
}

.exam_right text:nth-child(2) {
    font-size: 30rpx;
    color: #FF4747;
    padding-left: 20rpx;
}

.exam_right2 {
    font-size: 36rpx;
    color: #FF4747;
}

/* 文章article */

.articles {
    overflow: hidden;
}

.article {
    width: 690rpx;
    height: 210rpx;
    background: #fff;
    margin-left: 30rpx;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #ECECEC;
}

.article_img {
    width: 240rpx;
    height: 134rpx;
    position: absolute;
    right: 20rpx;
    top: 34rpx;
}

.article_title {
    height: 95rpx;
    font-size: 34rpx;
    color: #3B3849;
    margin: 30rpx 280rpx 16rpx 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article_detail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-right: 280rpx;
    font-size: 24rpx;
    color: #8B93A0;
}

.article_detail image {
    width: 24rpx;
    height: 15rpx;
}

.article_left {
    display: inline-block;
    font-size: 24rpx;
    color: #3D7EFE;
    padding: 3rpx 9rpx;
    border: 1px solid #3D7EFE;
}

.article_right text {
    padding-left: 15rpx;
}

/*上拉加载更多*/
.data-loading {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 24rpx;
    color:#333;
    background: #eee;
}