支付宝小程序封装分页

<view a:if="{{hotProList.length>0}}">
    <view class="loading box-left" a:if="搜索数据list">
        <view class="balls">
            <view></view>
            <view></view>
            <view></view>
        </view>
    </view>
    <view class="afterLi" a:else>  - 我也是有底线的 -
    </view>
</view>

.loading {
    font-size: 22rpx;
    color: #b5b5b5;
    text-align: center;
    padding: 20rpx 0 50rpx;
    background: #fff;
    position: relative
}

.loading .balls {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: 2.8em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.balls view {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: #b5b5b5;
    transform: translateY(-100%);
    animation: wave 0.8s ease-in-out alternate infinite;
}

.balls view:nth-of-type(1) {
    animation-delay: -0.4s;
}

.balls view:nth-of-type(2) {
    animation-delay: -0.2s;
}

@keyframes wave {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(100%);
    }
}

.afterLi {
    text-align: center;
    color: #7B7C7D;
    clear: both;
    float: none;
    padding: 20rpx 0 40rpx;
    font-size: 24rpx;
    position: relative;
    background: #fff;
}

data:{
 pagination: {
            currPage: 0, //当前页
            totalPage: 0, //总页数
            afterLiFlag: false,
  }
}

 getEvaluateList() {
        let that = this,
            params = {};

        if (that.data.pagination.currPage != 0 && that.data.pagination.currPage >= that.data.pagination.totalPage) {
            return false;
        };
        that.setData({
            'pagination.currPage': that.data.pagination.currPage + 1, //当前页
            'pagination.afterLiFlag': true,
        });

         if (that.data.pagination.currPage <= 1) {
            that.setData({
                'allEvaluteList': [],
            });
            my.showLoading({
                content: '加载中',
            });
        } else {
            my.showNavigationBarLoading()
        };
        params.openId = app.globalData.userInfo ? app.globalData.userInfo.id : ''
        params.pro_id = that.data.desId
        params.page = that.data.pagination.currPage;
        app.myRequest('GET', '/api', params, (res) => {
            if (res.data.code != 200) {
                my.showToast({
                    content: res.data.msg,
                    type: 'none',
                    duration: 3000
                });
                return false;
            };
            if (params.page <= 1) {
                that.setData({
                    'allEvaluteItem': res.data,
                })
            }
            that.setData({
                'pagination.totalPage': res.data.TotalPage, //保存总页数
                'allEvaluteList': that.data.allEvaluteList.concat(res.data.items),
            })
            if (that.data.pagination.currPage != 0 && that.data.pagination.currPage >= that.data.pagination.totalPage) {
                setTimeout(function() {
                    that.setData({
                        'pagination.afterLiFlag': false,
                    });
                }, 500)
            };
        })

    }

标签：支付宝,pagination,balls,封装,分页,50%,transform,currPage,data
来源： https://www.cnblogs.com/zhangYaRan/p/11075806.html