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，会显示‘’暂无更多数据

效果如下: