移动端分页（懒加载,三个菜单切换在Vue中应用）
<template>
<div id="historicalEvaluation">
<headMod :pageTitle="pageTitle"></headMod>
<div class="historicalEvaluationWarpHead">
<div class="historical-evaluation-title">
<span class="evaluation-score">评价得分</span>
<el-rate
v-model="value5"
disabled
show-score
text-color="#ff9900"
score-template="{value}分">
</el-rate>
</div>
<div class="historical-evaluation-center-head">
<ul class="nav">
<li v-for="(item,index) in listItem" :key="item.index" :class="{active:num == index}" @click="seletMe(index,item)">{{item.name}}</li>
</ul>
</div>
</div>
<div class="historicalEvaluationWarp" ref="viewBox">
<div class="historical-evaluation-center" >
<div class="historical-evaluation-center-bottom" >
<ul class="historical-evaluation-center-ul">
<li class="mui-table-view-cell historical-evaluation-center-li"
v-for="(item,index) in dataItem"
:key="item.index" >
<div class="historical-evaluation-center-li-div">
<span class="historical-evaluation-name">{{item.customername}}</span>
<span class="historical-evaluation-data">{{item.endtimes}}</span>
</div>
<div class="historical-evaluation-describe" v-if="item.context != ''">{{item.context}}</div>
<div class="historical-evaluation-describe" v-else>此用户未填写评价内容</div>
</li>
</ul>
<ul class="historical-evaluation-center-ul" v-show="!showNoneData">
<li class="">
<div class="alert-none-data">
暂无数据
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import headMod from './head_mod'//头部标题组件
export default {
name: 'testHistoricalEvaluation',
data () {
return {
pageTitle: '历史评价',
selected: '0',
value5: 0,
dataItem: [],//展示数据
endTime: '',//展示时间
allLoaded: false,
bottomText: '上拉加载更多...',
totalCount: 0,
scroll:0,
num:0,
off:true,
box: '',
issatisfy:'', // 1好评 0差评
employeeid:'',
pageNo: 1,
personVal:'0',
listItem:[
{name:'全部',id:'0'},
{name:'好评',id:'1'},
{name:'差评',id:'2'},
],
person:'0',
showNoneData: false,
}
},
components: {
headMod
},
computed: {
},
mounted() {
this.employeeid = sessionStorage.getItem('employeeId');
// this.employeeid = '104'
this.getMorAjax();
window.addEventListener('scroll',this.scrollPosition);
},
methods: {
scrollPosition(){
console.log(this.box)
this.box = this.$refs.viewBox;
this.scroll = document.documentElement.scrollTop + document.body.scrollTop; //滚动高度
// console.log(this.box.clientHeight); //内容高度
// console.log(this.scroll);
//console.log(this.scroll);
//console.log(document.documentElement.clientHeight); // 可视区高度
let boxVal = this.box.clientHeight; //内容高度
let viewVal = document.documentElement.clientHeight; //可视区高度
console.log(boxVal+'---'+viewVal+'---'+this.scroll);
if(this.scroll != 0){
if(boxVal - viewVal - this.scroll < 30){
if(this.pageNo <= this.totalCount && this.off == true){
console.log(this.pageNo+'==='+this.totalCount)
console.log(1)
this.loadBottom(this.pageNo);
}
}
}
},
seletMe(index,item){
if(this.num != index){
this.num = index;
if(index == 0){
this.issatisfy = '';
this.pageNo = 1;
this.dataItem = [];
this.getMorAjax();
}
if(index == 1){
this.issatisfy = '1';
this.pageNo = 1;
this.dataItem = [];
this.getMorAjax();
}
if(index == 2){
this.issatisfy = '0';
this.pageNo = 1;
this.dataItem = [];
this.getMorAjax();
}
}
},
//上啦加载
loadBottom(page) {
console.log('me');
let this_ = this;
this.off = false;
let sendDataPost = {
"employeeid": this.employeeid,
"issatisfy":this.issatisfy,
"currentPage": page
};
this.$ajax({
method: 'post',
url: this.$api.getHistoryComment,
data: sendDataPost,
})
.then((res) => {
if(res.data.code == '0') {
this_.pageNo += 1;
this_.off = true;
//console.log(this_.totalCount);
this_.dataItem = this_.dataItem.concat(res.data.data.pageInfo.list);
// if(this_.dataItem.length > 0) {
// this.showNoneData = true;
// } else {
// this.showNoneData = false;
// }
//处理评价时间
for(let i=0; i<=this_.dataItem.length; i++) {
if(this_.dataItem[i].endtime != '') {
let time = (this_.dataItem[i].endtime).substring(0,4)+'.'+(this_.dataItem[i].endtime).substring(5,7)+'.'+(this_.dataItem[i].endtime).substring(8,10)
this_.dataItem[i].endtimes = time;
} else {
this_.dataItem[i].endtimes = ''
}
}
}
})
.catch((err) => {})
},
getMorAjax() {
let this_ = this;
let sendDataPost = {
"employeeid": this.employeeid,
"issatisfy":this.issatisfy,
"currentPage": this.pageNo,
};
this.$ajax({
method: 'post',
url: this.$api.getHistoryComment,
data: sendDataPost,
})
.then((res) => {
if(res.data.code == '0') {
this_.pageNo += 1;
console.log(this_.pageNo)
this_.dataItem = res.data.data.pageInfo.list;
this.value5 = +(res.data.data.score.score).toFixed(1);//评价得分
this_.totalCount = res.data.data.pageInfo.pages;
if(this_.dataItem.length>0) {
this.showNoneData = true;
} else {
this.showNoneData = false;
}
//处理评价时间
for(let i=0; i<=this_.dataItem.length; i++) {
if(this_.dataItem[i].endtime != '') {
let time = (this_.dataItem[i].endtime).substring(0,4)+'.'+(this_.dataItem[i].endtime).substring(5,7)+'.'+(this_.dataItem[i].endtime).substring(8,10)
this_.dataItem[i].endtimes = time;
} else {
this_.dataItem[i].endtimes = ''
}
}
}
})
.catch((err) => {})
},
},
destroyed(){
window.removeEventListener('scroll',this.scrollPosition);
},
};
</script>
<style>
/*#historicalEvaluation .mint-tab-container{
height: 2rem;
overflow-y: auto;
}*/
#historicalEvaluation {
width: 7.5rem;
height: 100%;
/* overflow: hidden;*/
background-color: #F3F6FB;
}
.historicalEvaluationWarpHead {
height: 3.6rem;
position: fixed;
background-color: #F3F6FB;
/* background: #fff; */
top: 0.9;
z-index: 95;
}
#historicalEvaluation .historicalEvaluationWarp {
/*padding-top: .9rem;
height: 100%;-----------*/
padding-top: 3.6rem;
/*
max-height: calc(100% - 3.6rem);
overflow-y: auto; */
}
#historicalEvaluation .historical-evaluation-title {
width: 7.5rem;
height: 1.3rem;
line-height: 1.3rem;
margin-bottom: .3rem;
margin-top: .9rem;
background-color: #fff;
padding: 0 .4rem;
display: flex;
}
/*分数计算*/
#historicalEvaluation .el-rate {
height: 1.3rem;
line-height: 1.3rem;
padding-left: .2rem;
/*vertical-align: middle;*/
}
#historicalEvaluation [class*=" el-icon-"], [class^=el-icon-] {
/*line-height: 1.3rem!important;*/
line-height: 1.22rem!important;
}
#historicalEvaluation .el-rate__text {
padding-left: .2rem;
font-size: .28rem;
}
#historicalEvaluation .el-rate__icon {
font-size: .4rem;
}
#historicalEvaluation .five-pointed-star {
padding-left: .2rem;
padding-right: .2rem;
}
#historicalEvaluation .total-score {
font-size: .28rem;
color: rgb(255,169,96);
}
#historicalEvaluation .evaluation-score {
font-size: .28rem;
color: rgb(68,77,102);
}
#historicalEvaluation .historical-evaluation-center {
/*background: #fff;*/
/*---------------height: 100%;*/
/*---------------max-height: calc(100% - 1.6rem);*/
/*overflow: hidden;*/
}
#historicalEvaluation .historical-evaluation-center-head {
background: #fff;
border-bottom: 1px solid rgb(233,237,250);
}
#historicalEvaluation .historical-evaluation-center-bottom {
/*padding: 0 .24rem 0 .4rem;*/
background: #fff;
/*-------max-height: calc(100% - .9rem);*/
/*---------overflow-y: auto;*/
background-color: #fff;
/*margin-top: 1.1rem;*/
}
#historicalEvaluation .historical-evaluation-center-li {
padding: .2rem .24rem .2rem .4rem;
border-bottom: 1px solid #f3f6fb;
}
.historical-evaluation-center-li-div {
height: .5rem;
line-height: .5rem;
display: flex;
}
.historical-evaluation-center-li-div span {
flex: 1;
}
.historical-evaluation-name {
font-size: .28rem;
color: rgb(117,129,152);
}
.historical-evaluation-data {
font-size: .26rem;
color: rgb(180,192,213);
text-align: right;
}
.historical-evaluation-describe {
font-size: .28rem;
line-height: .38rem;
color: rgb(68,77,102);
}
a {
color: rgb(117,129,152);
}
#historicalEvaluation .mint-navbar {
height: 1.1rem;
line-height: 1.1rem;
justify-content: space-around;
/*position: fixed;*/
width: 100%;
/*z-index: 10;*/
/*border-bottom: 1px solid rgb(233,237,250);*/
}
#historicalEvaluation .mint-navbar .mint-tab-item {
/*color: rgb(117,129,152);*/
padding: 0;
}
#historicalEvaluation .mint-tab-item {
padding: 0;
}
#historicalEvaluation .mint-tab-item-label {
font-size: 0.3rem;
text-align: center;
line-height: 1.1rem;
}
#historicalEvaluation .mint-navbar .mint-tab-item.is-selected {
border-bottom: 3px solid rgb(95,133,252);
color: rgb(95,113,252);
margin-bottom: 0;
}
#historicalEvaluation .mint-navbar .mint-tab-item{
flex: none;
width: 1.4rem;
}
#historicalEvaluation .more_loading {
text-align: center;
height: .9rem;
line-height: .9rem;
}
#historicalEvaluation .mui-table-view-cell:after {
display: none;
}
#historicalEvaluation .none-data {
text-align: center;
}
#historicalEvaluation .active{
border-bottom: 3px solid rgb(95,133,252);
color: rgb(95,113,252);
}
#historicalEvaluation .nav{
width: 100%;
height:1.1rem;
display: flex;
justify-content: space-around;
align-items: center;
}
#historicalEvaluation .nav li{
width: 1.4rem;
height: 100%;
line-height: 1.1rem;
text-align: center;
}
#historicalEvaluation .el-rate__item {
height: 1.3rem;
line-height: 1.3rem;
position: relative;
display: inline-block;
}
#historicalEvaluation .alert-none-data {
text-align: center;
height: 1.3rem;
line-height: 1.3rem;
}
</style>