vue scrolle在tab 中使用

复制代码1. 使用npm 安装

1
1. 使用npm 安装 

复制代码 npm i vue-scroller -S

1
  npm i vue-scroller -S

复制代码 地址: https://github.com/wangdahoo/vue-scroller2. 引入 main.js：　　import Vue from 'vue'　　import VueScroller from 'vue-scroller' 　　Vue.use(VueScroller)3.页面使用

1
 地址: 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<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，会显示‘’暂无更多数据效果如下:

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


效果如下: