微信小程序，加载更多

html

<!-- 头部 -->
<view class='tab'>
    <view class="tab-new {{selected_new?'active':'default'}}" bindtap="selectedNew">最新理财</view>
    <view class="tab-old {{selected_old?'active':'default'}}" bindtap="selectedOld">往期理财</view>
</view>

<!-- 列表 -->
<view class='list'>
    <block wx:if="{{render_list.length == 0}}">
        <view class="list-empty">
            暂无理财产品数据
        </view>
    </block>
    <block wx:else>
        <block wx:for="{{render_list}}">
            <view class='list-item' bindtap='gotoDetail' data-id="{{item.id}}">
                <view class='list-item-left'>
                    <view class="left-yield">{{item.yield}}</view>
                    <view class="left-yield-name">预计年化收益率</view>
                    <view class="left-property">产品性质:{{item.property}}</view>
                </view>
                <view class='list-item-right'>
                    <view class='right-name'>{{item.name}}</view>
                    <view>起购金额:
                        <span class='right-font-black'>{{item.purchase_money}}</span>
                    </view>
                    <view>理财期限:
                        <span class='right-font-black'>{{item.time_limit}}</span>
                    </view>
                    <view>开始时间:{{item.start_time}}</view>
                    <view>结束时间:{{item.end_time}}</view>
                </view>

                <view class="list-item-top {{item.is_rec==1?'top-rec':''}}">
                    荐
                </view>

                <view class="list-item-top {{item.is_new==1?'top-new':''}} {{item.is_new==1 && item.is_rec==1?'top-margin-right':''}}">
                    新
                </view>
                <image class="list-item-arrow" src="/img/common/right.png"></image>
            </view>
        </block>
    </block>
</view>

css

/* 先外后里,由上而下，由左而右 大小要计算 */
.tab {
    display: flex;
    height: 70rpx;
    line-height: 70rpx;
    margin-top: 45rpx;
}

.tab .tab-new {
    width: 50%;
    text-align: center;
}

.tab .tab-old {
    width: 50%;
    text-align: center;
}

.tab .active {
    font-size: 34rpx;
    font-weight: bold;
    color: #222;
    position: relative;
}

.tab .active::after {
    content: "";
    width: 150rpx;
    height: 6rpx;
    background: rgba(2, 101, 255, 1);
    position: absolute;
    bottom: 0rpx;
    left: 50%;
    transform: translateX(-50%);
}

.tab .default {
    font-size: 28rpx;
    font-weight: 500;
    color: #666;
}

.list {
    padding: 40rpx 20rpx;
    width: 100%;
    height: 100%;
}

.list-empty {
    width: 100%;
    height: auto;
    text-align: center;
    color:rgba(102, 102, 102, 1);
    font-size: 30rpx;
    position: fixed;
    top: 40%;
    left:50%;
    transform: translate(-50%, -60%);
}

.list .list-item {
    margin-bottom: 30rpx;
    padding-top: 15rpx;
    width: 100%;
    height: 244rpx;
    display: flex;
    position: relative;
}

.list .list-item .list-item-left {
    width: 320rpx;
    padding-left: 23rpx;
}

.list-item-left .left-yield {
    line-height: 70rpx;
    font-size: 50rpx;
    color: rgba(255, 0, 0, 1);
    padding-top:25rpx;
}

.list-item-left .left-yield-name {
    font-size:26rpx;
    color:rgba(102,102,102,1);
    line-height:30rpx;
}

.list-item-left .left-property {
    width: auto;
    font-size:26rpx;
    color:rgba(255,98,4,1);
    line-height:30rpx;
    border:1rpx solid rgba(255,98,4,1);
    border-radius:4rpx;
    margin-top:10rpx;
    float:left;
}

.list .list-item .list-item-right {
    width: 390rpx;
    font-size: 24rpx;
    color: rgba(102, 102, 102, 1);
    line-height: 38rpx;
}

.list-item-right .right-name {
    font-size: 30rpx;
    color: rgba(34, 34, 34, 1);
    line-height: 48rpx;
}

.list-item-right .right-font-black {
    font-size:26rpx;
    color:#333333;
}

.list .list-item .list-item-top {
    position: absolute;
    top: 0rpx;
    right: 23rpx;
    display: none;
    font-weight: 400;
    font-size: 30rpx;
    color: #fff;
    padding: 8rpx;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
}

.list .list-item .top-margin-right {
    right: 75rpx;
}

.list .list-item  .top-rec {
    display: block;
    background-color: #ff404a;
}

.list .list-item  .top-new {
    display: block;
    background-color: #0265ff;
}

.list .list-item .list-item-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16rpx;
    height: 28rpx;
    right: 38rpx;
}

js

const util = require('../../../utils/getData.js');

Page({

    /**
     * 页面的初始数据
     */
    data: {
        'selected_new': true,
        'selected_old': false,
        'type': 1,
        'page': 1,
        'page_size':4,
        'render_list': []
    },
    initData: function() {
        let that = this;
        let page = that.data.page;
        wx.showNavigationBarLoading(); //在标题栏中显示加载
        util.getData('getFinanceList', {
            page: page,
            page_size:that.data.page_size,
            type: that.data.type,
            method: 'POST'
        }, function(data) {
            wx.hideNavigationBarLoading();
            let data_list = data.data.data_list;
            if (page != 1 && data_list.length == 0) {
                wx.showToast({
                    title: "已经到底啦",
                    icon: "none",
                    duration: 1000,
                    mask: false,
                });
                return;
            }
            let render_list = [];
            if (page != 1) {
                render_list = that.data.render_list;
            }
            let new_render_list = render_list.concat(data_list);
            page++;
            that.data.page = page;
            that.setData({
                render_list: new_render_list
            });
        })
    },
    selectedNew: function() {
        let that = this;
        if (!that.data.selected_new) {
            that.setData({
                selected_new: true,
                selected_old: false,
                page:1,
                type:1,
                render_list:[]
            });
            that.initData();
        }
    },
    selectedOld: function() {
        let that = this;
        if (!that.data.selected_old) {
            that.setData({
                selected_new: false,
                selected_old: true,
                page:1,
                type: 2,
                render_list: []
            });
        }
    },
    gotoDetail:function(e) {
        let finance_id = e.currentTarget.dataset.id;
        wx.navigateTo({
            url: '/pages/finance/detail/index?id=' + finance_id
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        let that = this;
        that.initData();
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        let that = this;
        that.initData();
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {

    }
})