cube-ui IndexList 切换Tab Y坐标归零

<template>
    <div class="fx t12 column">
        <div class="order_search_div fl">
            <div class="fx bb">
                <ul class="ulOrderTab">
                    <li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='全部' }]" @click="changeTab">全部</li>
                    <li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='未服务' }]" @click="changeTab">未服务</li>
                    <li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='服务中' }]" @click="changeTab">服务中</li>
                    <li v-bind:class="['clsNotActiveTab',{'clsActiveTab':currentTab=='已服务' }]" @click="changeTab">已服务</li>
                    <li class="h2">
                        <div v-if="currentTab=='全部'" class="clsLineTab"></div>
                    </li>
                    <li class="h2">
                        <div v-if="currentTab=='未服务'" class="clsLineTab"></div>
                    </li>
                    <li class="h2">
                        <div v-if="currentTab=='服务中'" class="clsLineTab"></div>
                    </li>
                    <li class="h2">
                        <div v-if="currentTab=='已服务'" class="clsLineTab"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="h100">
            <cube-index-list ref="indexList" :data="listOrder" :navbar="false" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
                <div v-for="(item,index) in listOrder" :key="index">
                    <template-order ref="tItem" :tItem="item" :tTabType="currentTab"></template-order>
                </div>
            </cube-index-list>
        </div>
    </div>
</template>
<script>
    const initPageSize = 10;
    export default {
        name: 'iorder',
        data() {
            return {
                listOrder: [],
                pageSize: initPageSize,
                pageIndex: 0,
                totalOrder: 100,
                currentTab: '全部',
                options: {
                    observeDOM: true,
                    click: true,
                    probeType: 1,
                    scrollbar: false, ////导航条
                    pullDownRefresh: {
                        threshold: 60,
                        stop: 40,
                        stopTime: 400,
                        txt: '刷新成功'
                    },
                    pullUpLoad: {
                        threshold: 10,
                        txt: {
                            more: '加载更多',
                            noMore: '暂无更多'
                        },
                        visible: true,//坐标Y归零
                    },
                },
            };
        },
        methods: {
            ////下拉刷新
            onPullingDown() {
                setTimeout(() => {
                    this.$refs.indexList.forceUpdate(true)
                }, 1000)
            },
            ////加载更多
            onPullingUp() {
                setTimeout(() => {
                    if (this.listOrder.length < this.totalOrder) {
                        // 如果有新数据
                        this.pageIndex = this.listOrder.length;
                        var zlcount = this.totalOrder - this.listOrder.length > initPageSize ? initPageSize : this.totalOrder - this.listOrder.length;
                        this.pageSize = this.pageIndex + zlcount;
                        this.getListOrder();
                    } else {
                        // 如果没有新数据
                        this.$refs.indexList.forceUpdate();
                    }
                }, 500);
            },
            //关键字查询
            searchByKey() {
                this.listOrder = [];
                this.pageIndex = 0;
                this.pageSize = initPageSize;
                this.getListOrder();
            },
            //切换tab
            changeTab(cur) {
                this.currentTab = cur.target.innerText;
                this.searchByKey();
            },
            //获取数据
            getListOrder() {
                setTimeout(() => {
                    for (var a = this.pageIndex; a < this.pageSize; a++) {
                        let OrderState;
                        if (this.currentTab == "全部") {
                            OrderState = a > 2 ? 0 : a;
                        } else if (this.currentTab == "未服务") {
                            OrderState = 0;
                        } else if (this.currentTab == "服务中") {
                            OrderState = 1;
                        } else if (this.currentTab == "已服务") {
                            OrderState = 2;
                        }
                        this.listOrder.push({
                            Id: a,
                            UserName: "姓名" + a.toString(),
                        });
                    }
                }, 500);
            }
        },
        created() {
            this.getListOrder();
        },
        mounted() {},
    }
</script>

<style scoped>
    .order_search_div {
        width: 100%;
        height: auto;
        background-color: white;
    }
    .order_search {
        width: 271px;
        height: 30px;
        padding: 4px 7px;
        background: #F6F6F6;
        border-radius: 15px;
        margin: 10px auto;
    }
    .order_search input {
        height: 22px;
        width: 200px;
        background: #F6F6F6;
    }
    .tbxSearch {
        width: 271px;
        height: 30px;
        background: rgba(246, 246, 246, 1);
        border-radius: 15px;
    }
    .ulOrderTab {
        width: 100%;
    }
    .ulOrderTab li {
        width: 25%;
        float: left;
        list-style: none;
        line-height: 25px;
        text-align: center;
    }
    .clsNotActiveTab {
        color: #999999;
        font-size: 14px;
        font-weight: 400;
    }
    .clsActiveTab {
        color: #333333;
        font-size: 16px;
        font-weight: 800;
    }
    .h2 {
        margin-top: 6px;
        height: 2px;
        text-align: center;
    }
    .clsLineTab {
        margin: 0 auto;
        width: 20px;
        border: 2px solid #36CFC9;
    }
</style>