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