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