小程序实现tab标签页，并且每个标签页独立实现加载更多（上拉触底）

原理：如果是普通页面的上拉触底事件可用小程序提供的：onReachBottom函数；

但现在是tab页，每个页面要独立进行滚动加载，这里用到了scroll-view的bindscrolltolower函数；

 

注意：有些童鞋自己写完之后bindscrolltolower不起作用，要注意几个点：scroll-view的高度设置没有设置，或者直接设置成100%，没有设置scroll-y="true"。

我这里也设置了100%就有效呢？因为我在它的父元素已经给了一定的高度，它在父元素里面100%才有效，而且滚动的时候也不会覆盖tab标签页头。也可以把高度设置成固定值：600px这种的，看个人需要。

 

效果图：

上代码：

<!-- 标签页 -->
<view class="tabs">  
    <view class="tabs-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">收入+9300</view>
    <view class="tabs-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">支出-0</view>
</view>

<view  class="tab-content">
    <!-- 收入 -->
    <scroll-view scroll-y="true" bindscrolltolower="loadIncome" class="tab-list-content {{currentTab==0?'active':''}}">
        <view class="tab-list-item" wx:for="{{inList}}">
            <view class="tab-list-item-detail">
                <text>{{item.style}}</text>
                <text class="tab-list-item-after">{{item.coin}}</text>
            </view>
            <view class="tab-list-item-time">{{item.time}}</view>
        </view>
        <view hidden="{{isHidenLoadMore}}">
            <loading type="circle"></loading>
        </view>
    </scroll-view>
    <!-- 支出 -->
    <scroll-view scroll-y="true" bindscrolltolower="loadOutlay" class="tab-list-content {{currentTab==1?'active':''}}">
        <view class="tab-list-item" wx:for="{{outList}}">
            <view class="tab-list-item-detail">
                <text>{{item.style}}</text>
                <text class="tab-list-item-after">{{item.coin}}</text>
            </view>
            <view class="tab-list-item-time">{{item.time}}</view>
        </view>
        <view hidden="{{isHidenLoadMore}}">
            <loading type="circle"></loading>
        </view>
    </scroll-view>

</view>

.tabs{
    display: flex;
    margin: 0 24rpx;
    background-color: #fff;
    position: fixed;
    top: 300rpx;
    left: 0;
    right: 0;
}
.tabs-item{
    width: 50%;
    text-align: center;
    height: 66rpx;
    line-height: 66rpx;
    font-weight: bold;
}
.tabs-item.active{
    border-bottom: 2px solid rgb(58, 186, 248);
    color: rgb(58, 186, 248);
}
.tab-content{
    background-color: #fff;
    margin: 0 24rpx;
    /* margin-top:368rpx; */
    position: fixed;
    top: 368rpx;
    left: 0;
    right: 0;
    bottom: 0;
}
.tab-list-content{
    display: none;
    height: 100%;
}
.tab-list-content.active{
    display: block;
}
.tab-list-item{
    padding: 16rpx 24rpx;
    border-bottom: 1px solid rgb(229, 246, 253);
}
.tab-list-item-detail{
    display: flex;
    justify-content: space-between;
}
.tab-list-item-after{
    font-weight: bold;
}
.tab-list-item-time{
    color: rgb(136, 136, 136);
    font-size: 12px;
}

// pages/me-customer/me-customer.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isHidenLoadMore:true,
        currentTab:0,

        inList: [{ style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }],

        outList: [{ style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }]
    },

    clickTab:function(e){
        var current = e.currentTarget.dataset.current;
        this.setData({
            currentTab: current
        })
    },

    loadIncome:function(e){
        console.log("收入");
        console.log(e);

        var that = this;
        var maxNum = 30; //最多可加载条目

        var newList = [{ style: '签到', coin: '+50', time: '01:49:46' }, { style: '分享美文', coin: '+300', time: '05:49:46' }];

        var inList = that.data.inList;
        if (inList.length < maxNum) {
            that.setData({
                isHidenLoadMore: false//显示“加载符”
            });
            for (let val of newList) {
                inList.push(val);
            };

            setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
                that.setData({
                    isHidenLoadMore: true,
                    inList: inList
                })
            }, 2000);
        }
    },

    loadOutlay: function (e) {
        console.log("支出");
        console.log(e);

        var that = this;
        var maxNum = 30; //最多可加载条目

        var newList = [{ style: '签到', coin: '-150', time: '01:49:46' }, { style: '分享美文', coin: '-600', time: '05:49:46' }];

        var outList = that.data.outList;
        if (outList.length < maxNum) {
            that.setData({
                isHidenLoadMore: false//显示“加载符”
            });
            for (let val of newList) {
                outList.push(val);
            };

            setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
                that.setData({
                    isHidenLoadMore: true,
                    outList: outList
                })
            }, 2000);
        }
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // var that = this;
        // var maxNum = 30; //最多可加载条目

        // var newList = [{ style: '签到', coin: '+50', time: '01:49:46' }, { style: '分享美文', coin: '+300', time: '05:49:46' }];

        // var inList = that.data.inList;
        // if (inList.length < maxNum) {
        //     that.setData({
        //         isHidenLoadMore: false//显示“加载符”
        //     });
        //     for (let val of newList) {
        //         inList.push(val);
        //     };

        //     setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
        //         that.setData({
        //             isHidenLoadMore: true,
        //             inList: inList
        //         })
        //     }, 2000);
        // }
    },


})