vue scrolle在tab 中使用

1. 使用npm 安装 

  npm i vue-scroller -S

 地址: https://github.com/wangdahoo/vue-scroller

2. 引入 main.js：
　　import Vue from 'vue'
　　import VueScroller from 'vue-scroller' 　　Vue.use(VueScroller)

3.页面使用

<template>
    <div class="container" style="height:100%;overflow: scroll;">
        <section class="bg-white" style="height:100%;overflow: scroll;">
            <!-- navbar -->
            <mt-navbar class="page-part" v-model="selected">
                <mt-tab-item :id="1">未完成</mt-tab-item>
                <mt-tab-item :id="0">已完成</mt-tab-item>
            </mt-navbar>
            <!-- tabcontainer -->
            <mt-tab-container v-model="selected">
                <scroller :on-infinite="infinite" ref="my_scroller">
                    <div style="height: 44px; margin-top: -44px;"></div>
                    <div class="itemContent clear" v-for="(item,index) in listData" :key="index" @click="toDetail(item.sign_url)">
                        <p class="itemTitle clear">
                            <span class="fl itemTitle-name">{{item.flow_id}}{{item.contract_name}}</span>
                            <span v-if="selected==0" :class="(item.sign_status_employee==1?'itemTitle-state-green':(item.sign_status_employee==3?'itemTitle-state-red':'itemTitle-state-gray'))" class="fr itemTitle-state">{{item.sign_status_employee | showState}}</span>
                            <span v-if="selected==1" class="fr itemTitle-state itemTitle-state-blue">待签署</span>
                        </p>
                        <div class="itemDetail m14">
                            <div class="fl itemTime">
                                <p>开始日期:{{item.start_time}}</p>
                                <p>失效日期:{{item.lose_efficacy_time}}</p>
                            </div>
                            <div  class="fr" v-if="selected==0">
                                <div v-if="item.sign_status_employee==1" @click.stop="openDownload(item.flow_id)">
                                    <i class="itemBtn icon iconfont icon-upload_icon"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroller>
            </mt-tab-container>
        </section>
    </div>
</template>

<script>
    import { Navbar, TabItem, Toast, Indicator } from 'mint-ui';
    import { getListData, getDownloadUrl } from '@/api/api';

    export default {
        name: 'page-navbar',
        data() {
            return {
                employeeId: '', //易路员工编号
                selected: 1, //completed （0：已完成，1：未完成）
                pageNo: 0,//当前页
                pageSize: 10,//页面条数
                maxpage: 0,//最大页码数
                counts: 0,//总条数
                listData: []//列表数据
            };
        },
        watch: {
            //监听tab切换
            selected: function(val, oldVal) {
                this.pageNo = 0;
                this.selected = val;
                this.listData = [];
                this.$refs.my_scroller.finishInfinite(false);  //详情见 备注
            }
        },
        mounted() {
            //截取易路员工编号
            this.employeeId = this.$utils.getUrlKey("accesskey");
//            this.employeeId='yl001';
        },
        methods: {
            infinite(done) {
                this.pageNo++; 
                var self1 = this;
                setTimeout(() => {
                    var params = {
                        accesskey: this.employeeId,
                        completed: this.selected,
                        page: this.pageNo,
                        pageSize: this.pageSize
                    };
                    //获取列表数据
                    getListData(params).then(res => {
                        if(res.data.code == 0) {
                            var re = res.data.model[0];
                            if(re.length > 0) {
                                this.counts = re[0].rows;
                                var n = re[0].rows;
                                var m = this.pageSize;
                                if(n % m > 0) {
                                    this.maxpage = parseInt(n / m) + 1;
                                } else {
                                    this.maxpage = parseInt(n / m);
                                }
                                if(this.pageNo > this.maxpage) {
                                    self1.noData = "没有更多数据"
                                    done(true);
                                    return;
                                } else {
                                    done();
                                    this.listData = this.listData.concat(res.data.model[0]);
                                }
                            } else {
                                self1.noData = "没有更多数据"
                                done(true);
                                return;
                            }
                        } else {
                            Toast({
                                message: res.data.msg
                            });
                            done(true);
                            return;
                        }
                    })
                }, 1500)
            },

            //row跳转详情页面
            toDetail(sign_url) {
                console.log("列表id==" + sign_url)
                window.location.href = sign_url;
            },
            //打开下载页面
            openDownload(flow_id) {
                console.log("下载id==" + flow_id);
                var params = {
                    flowId: 143
                };
                getDownloadUrl(params).then(res => {
                    console.log(res);
                    if(res.data.code == 0) {
                        window.location.href = res.data.model[0].downloadUrl;
                    }
                })
            }
        }
    }
</script>
<style rel="stylesheet/less" lang="less" scoped>
    .container {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        /*修改nav默认样式*/
        .mint-navbar .mint-tab-item.is-selected {
            color: #788897 !important;
        }
        .mint-tab-item {
            .mint-tab-item-label {
                font-size: 18px !important;
            }
        }
        .page-part {
            margin-bottom: 2px;
        }
        .scroller {
            overflow: scroll;
        }
        .itemContent {
            border-top: 1px solid #F2F2F2;
            padding: 20px 0;
            .itemTitle {
                color: #2b2b2b;
                margin: 0 14px;
                .itemTitle-name {
                    font-weight: bolder;
                    font-size: 16px;
                }
                .itemTitle-state {
                    padding: 0 6px;
                    height: 16px;
                    line-height: 16px;
                    border-radius: 2px;
                }
                .itemTitle-state-blue {
                    border: 1px solid #617fde;
                    color: #617fde
                }
                .itemTitle-state-red {
                    border: 1px solid #f05d6e;
                    color: #f05d6e;
                }
                .itemTitle-state-green {
                    border: 1px solid #24c875;
                    color: #24c875;
                }
                .itemTitle-state-gray {
                    border: 1px solid #d8d8d8;
                    color: #d8d8d8
                }
            }
            .itemDetail {
                .itemTime {
                    width: calc(100% - 85px);
                    color: #bebebe;
                }
                .itemBtn {
                    padding: 0 14px;
                    height: 18px;
                    line-height: 18px;
                    color: #A4ACB6;
                }
            }
        }
    }
</style>                                                

 备注: finishInfinite(isNoMoreData :Boolean)  当参数为false时，上拉获取数据可以重新调用。
 当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据


效果如下: