<template>
    <view>
        <view class="tab">
            <view class="btns">
                <view wx:for="{{btns}}" class="{{index == active ? 'cur' : ''}}" data-index="{{index}}" bindtap="toggle">{{item}}</view>
            </view>
            <view class="cons">
                <view wx:for="{{cons}}" class="{{index == active ? 'cur' : ''}}">{{item}}<view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    config: {},
    data: {
        btns: ["HTML", "CSS", "JS"],
        cons: ["HTML", "CSS", "JS"],
        active: 0,
        curPage: [0, 0, 0],
        pageData: [
            ["HTML1", "HTML2", "HTML3"],
            ["CSS1", "CSS2", "CSS3"],
            ["JS1", "JS2", "JS3"]
        ]
    },
    toggle: function (e) {
        this.setData({
            active: e.currentTarget.dataset.index
        })
    },
    onPullDownRefresh: function () {
        console.log("pull down refresh")
    },
    onReachBottom: function () {
        console.log("reach bottom");
        let idx = this.active;
        let pageIdx = this.curPage[idx];
        if (pageIdx < this.pageData[idx].length - 1) {
            cons[idx] = pageData[idx][pageIdx + 1];
        }
        wx.pageScrollTo({
            scrollTop: 0
        })
    }
}
</script>

<style lang="less">
.tab{width: 100%; height:600rpx; border:2rpxsolid #cccccc; /*margin:60rpx auto;*/}

.tab .btns{ height: 120rpx; background: #eeeeee;display: flex;}

.tab .btns view{flex: 1; text-align: center; line-height:120rpx;}

.tab .btns .cur{background: #ffffff;}

.tab .cons view{height: 480rpx;display: none; text-align: center; line-height:480rpx; font-size:60rpx;}

.tab .cons .cur{display: block;}

template {height: 100%;}

template > view {height: 100%;}
</style>