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.頁面使用

 1 <template>
 2     <div class="container" style="height:100%;overflow: scroll;">
 3         <section class="bg-white" style="height:100%;overflow: scroll;">
 4             <!-- navbar -->
 5             <mt-navbar class="page-part" v-model="selected">
 6                 <mt-tab-item :id="1">未完成</mt-tab-item>
 7                 <mt-tab-item :id="0">已完成</mt-tab-item>
 8             </mt-navbar>
 9             <!-- tabcontainer -->
 10             <mt-tab-container v-model="selected">
 11                 <scroller :on-infinite="infinite" ref="my_scroller">
 12                     <div style="height: 44px; margin-top: -44px;"></div>
 13                     <div class="itemContent clear" v-for="(item,index) in listData" :key="index" @click="toDetail(item.sign_url)">
 14                         <p class="itemTitle clear">
 15                             <span class="fl itemTitle-name">{{item.flow_id}}{{item.contract_name}}</span>
 16                             <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>
 17                             <span v-if="selected==1" class="fr itemTitle-state itemTitle-state-blue">待簽署</span>
 18                         </p>
 19                         <div class="itemDetail m14">
 20                             <div class="fl itemTime">
 21                                 <p>開始日期:{{item.start_time}}</p>
 22                                 <p>失效日期:{{item.lose_efficacy_time}}</p>
 23                             </div>
 24                             <div  class="fr" v-if="selected==0">
 25                                 <div v-if="item.sign_status_employee==1" @click.stop="openDownload(item.flow_id)">
 26                                     <i class="itemBtn icon iconfont icon-upload_icon"></i>
 27                                 </div>
 28                             </div>
 29                         </div>
 30                     </div>
 31                 </scroller>
 32             </mt-tab-container>
 33         </section>
 34     </div>
 35 </template>
 36 
 37 <script>
 38     import { Navbar, TabItem, Toast, Indicator } from 'mint-ui';  39     import { getListData, getDownloadUrl } from '@/api/api';  40 
 41     export default {  42         name: 'page-navbar',  43  data() {  44             return {  45                 employeeId: '', //易路員工編號
 46                 selected: 1, //completed （0：已完成，1：未完成）
 47                 pageNo: 0,//當前頁
 48                 pageSize: 10,//頁面條數
 49                 maxpage: 0,//最大頁碼數
 50                 counts: 0,//總條數
 51                 listData: []//列表數據
 52  };  53  },  54  watch: {  55             //監聽tab切換
 56             selected: function(val, oldVal) {  57                 this.pageNo = 0;  58                 this.selected = val;  59                 this.listData = [];  60                 this.$refs.my_scroller.finishInfinite(false); //詳情見 備註  61  }  62  },  63  mounted() {  64             //截取易路員工編號
 65             this.employeeId = this.$utils.getUrlKey("accesskey");  66 // this.employeeId='yl001';
 67  },  68  methods: {  69  infinite(done) {  70                 this.pageNo++;  71                 var self1 = this;  72                 setTimeout(() => {  73                     var params = {  74                         accesskey: this.employeeId,  75                         completed: this.selected,  76                         page: this.pageNo,  77                         pageSize: this.pageSize  78  };  79                     //獲取列表數據
 80                     getListData(params).then(res => {  81                         if(res.data.code == 0) {  82                             var re = res.data.model[0];  83                             if(re.length > 0) {  84                                 this.counts = re[0].rows;  85                                 var n = re[0].rows;  86                                 var m = this.pageSize;  87                                 if(n % m > 0) {  88                                     this.maxpage = parseInt(n / m) + 1;  89                                 } else {  90                                     this.maxpage = parseInt(n / m);  91  }  92                                 if(this.pageNo > this.maxpage) {  93                                     self1.noData = "沒有更多數據"
 94                                     done(true);  95                                     return;  96                                 } else {  97  done();  98                                     this.listData = this.listData.concat(res.data.model[0]);  99  } 100                             } else { 101                                 self1.noData = "沒有更多數據"
102                                 done(true); 103                                 return; 104  } 105                         } else { 106  Toast({ 107  message: res.data.msg 108  }); 109                             done(true); 110                             return; 111  } 112  }) 113                 }, 1500) 114  }, 115 
116             //row跳轉詳情頁面
117  toDetail(sign_url) { 118                 console.log("列表id==" + sign_url) 119                 window.location.href = sign_url; 120  }, 121             //打開下載頁面
122  openDownload(flow_id) { 123                 console.log("下載id==" + flow_id); 124                 var params = { 125                     flowId: 143
126  }; 127                 getDownloadUrl(params).then(res => { 128  console.log(res); 129                     if(res.data.code == 0) { 130                         window.location.href = res.data.model[0].downloadUrl; 131  } 132  }) 133  } 134  } 135  } 136 </script>
137 <style rel="stylesheet/less" lang="less" scoped>
138  .container { 139  overflow: auto; 140         -webkit-overflow-scrolling: touch; 141         /*修改nav默認樣式*/
142         .mint-navbar .mint-tab-item.is-selected { 143             color: #788897 !important; 144  } 145         .mint-tab-item { 146             .mint-tab-item-label { 147                 font-size: 18px !important; 148  } 149  } 150         .page-part { 151             margin-bottom: 2px; 152  } 153  .scroller { 154  overflow: scroll; 155  } 156  .itemContent { 157             border-top: 1px solid #F2F2F2; 158             padding: 20px 0; 159  .itemTitle { 160  color: #2b2b2b; 161                 margin: 0 14px; 162                 .itemTitle-name { 163                     font-weight: bolder; 164                     font-size: 16px; 165  } 166                 .itemTitle-state { 167                     padding: 0 6px; 168  height: 16px; 169                     line-height: 16px; 170                     border-radius: 2px; 171  } 172                 .itemTitle-state-blue { 173  border: 1px solid #617fde; 174  color: #617fde 175  } 176                 .itemTitle-state-red { 177  border: 1px solid #f05d6e; 178  color: #f05d6e; 179  } 180                 .itemTitle-state-green { 181  border: 1px solid #24c875; 182  color: #24c875; 183  } 184                 .itemTitle-state-gray { 185  border: 1px solid #d8d8d8; 186  color: #d8d8d8 187  } 188  } 189  .itemDetail { 190  .itemTime { 191                     width: calc(100% - 85px); 192  color: #bebebe; 193  } 194  .itemBtn { 195                     padding: 0 14px; 196  height: 18px; 197                     line-height: 18px; 198  color: #A4ACB6; 199  } 200  } 201  } 202  } 203 </style>

 備註: finishInfinite(isNoMoreData :Boolean)  當參數爲false時，上拉獲取數據能夠從新調用。
 當參數爲true，上拉獲取數據回調函數中止使用,下拉下部再也不顯示loading，會顯示‘’暫無更多數據


效果以下:
finishInfinite(isNoMoreData :Boolean)