百度小程序实现上拉分页加载

百度小程序实现上拉分页加载

1.swan代码

 swan代码注释：
            1.在需要滚动的盒子外面加上scroll-view标签，标签上绑定scroll-y lower-threshold="10" bind:scrolltolower="lower"三个属性和方法；
            2.<view class="btm-nomore" s-if="{{nomore!=2}}">{{nomore==1?'':nomore==3?'没有更多数据了~':' '}}</view>
              是最后接口数据数据为空时的友情提示

//标签上绑定scroll-y lower-threshold="10" bind:scrolltolower="lower"三个属性和方法；
<scroll-view class="thematic-box" scroll-y lower-threshold="10" bind:scrolltolower="lower">
    <view class="themctic_great">
        <view class="thematic">
            <view class="viewli" s-for="list" data-id="{{item.id}}" bindtap="toZtPage">{{ item.name }}</view>
        </view>
    </view>
    //是最后接口数据数据为空时的友情提示
    <view class="btm-nomore" s-if="{{nomore!=2}}">{{nomore==1?'':nomore==3?'没有更多数据了~':' '}}</view>
</scroll-view>

2.css代码

.themctic_great{
    width: 750rpx;
    background-color: #F7F7F7;
}
.thematic{
    width: 750rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30rpx 30rpx 0rpx 30rpx;
    box-sizing: border-box;
}
.viewli{
    width: 330rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;
    color: #333333;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500rpx;
}
.thematic-box{
    background-color: #F7F7F7;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 100rpx;
}
.btm-nomore{
    display: block;
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
}

3.js代码

import { thematicList } from '../../../utils/api.js'
var canUseReachBottom = true;    //这句状态
Page({
    data: {
       //定义这些变量，数组
       list:[],
        page: 1,
        pageCurrent: '',
        page_total_number: '',
        nomore: 2,
    },
    onLoad: function () {
        // 监听页面加载的生命周期函数
        this.thematicList()    //这句调用请求接口的函数方法
    },
    //请求接口的函数
    thematicList: function() {
        thematicList(
            '/bd/v1/thematic/tulist',
            {
                page: this.data.page      //传的参数，默认一页
            }
        ).then(data => {
        //请求成功时
            if(data.error_code === 0){
               //将接口数据这样concat给数组
                let list = this.data.list.concat(data.data.list)
               // 更新接口返回的数量字段
                this.setData({
                    list: list,
                    pageCurrent: data.data.page.page_current,
                    page_total_number: data.data.page.page_total_number
                })
                //tdk接口返回的，没有就不写
                swan.setPageInfo({
                    title: data.data.tdk.title,
                    keywords: data.data.tdk.keywords,
                    description: data.data.tdk.description,
                    image: []
                })
                //判断有没有数据了，然后决定显不显示没有更多的友情提示
                if(data.data.page.page_total_number>0){
                    if (data.data.list.length < 50) {
                        this.setData({
                            nomore: 3
                        })
                    } else {
                        this.setData({
                            nomore: 2
                        })
                    }
                } else {
                    this.setData({
                        nomore: 2
                    })
                }
                canUseReachBottom = true;    //这句
            } else {
                swan.showToast({
                    title: data.error_msg,
                    icon: 'none'
                })
            }
        //请求数据失败
        }).catch(error => {
            swan.showToast({
                title: '网络异常',
                icon: 'none'
            })
        })
    },
    //上拉时为数组增加数据，实现上拉分页加载效果
    lower() {
        if (!canUseReachBottom) return; 
        let that = this
        let pageCurrent = that.data.pageCurrent
        let page_total_number = that.data.page_total_number
        if (pageCurrent <= page_total_number) {
            that.setData({
                page: pageCurrent + 1
            }, function () {
                that.thematicList()
            })
        }
    },
    onReady: function() {
        // 监听页面初次渲染完成的生命周期函数
    },
    onShow: function() {
        // 监听页面显示的生命周期函数
    },
    onHide: function() {
        // 监听页面隐藏的生命周期函数
    },
    onUnload: function() {
        // 监听页面卸载的生命周期函数
    },
    onPullDownRefresh: function() {
        // 监听用户下拉动作
    },
    onReachBottom: function() {
        // 页面上拉触底事件的处理函数
    },
    onShareAppMessage: function () {
        // 用户点击右上角转发
    }
});