版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34664239/article/details/88954247
时间紧急，直接上代码
<template>
<div class="page NewsContentList">
<my-head title="系统提醒" iconL="back" hslotr="" @on-click-hleft="triggerHLeft" @on-click-hright="triggerHRight"></my-head>
<div class="page-loadmore">
<div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-loadmore
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
:auto-fill="false"
ref="loadmore">
<ul class="newsList page-loadmore-list">
<mt-spinner :type="1" color="#26a2ff" v-if="showSpinner"></mt-spinner>
<li v-for="(Mvalue, index) in newsContent" class="NewsCardContent listTouch" ref="newsCard">
<div class="newsDetail">
<div class="title">
<div class="left" :class="Mvalue.is_read=='N'?'unread':''">
{{Mvalue.car_plate}}
</div>
<div class="right">
{{ Mvalue.createtime }}
<!-- <img src="/images/arrowrightbb.png"> -->
</div>
</div>
<div class="newsContent">
<span>{{Mvalue.content}}</span>
</div>
</div>
</li>
<no-data v-if="newsContent.length === 0"></no-data>
</ul>
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== 'loading'"
:class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
<span v-show="bottomStatus === 'loading'">
<mt-spinner type="snake"></mt-spinner>
</span>
</div>
</mt-loadmore>
</div>
</div>
</div>
</template>
<script>
import {getNewsHaveNew,getnews,putNewsIsOld} from "../../service/getData";
// import NewsCardContent from './component/NewsCardContent'
export default {
name: "NewsContentList",
data() {
return {
isNew: 0,
title: '',
isEdit: false,
newsContent:[],
wrapperHeight: 0,
showSpinner: true,
page: 1,
offset: 10,
topStatus: 'loading',
allLoaded: false,
wrapperHeight: 0,
bottomStatus: '',
isDropDown: false,
isDropUp: false,
isLoaded: false,
isNewparam: 0
}
},
// components: {NewsCardContent},
mounted(){
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.offsetTop;
$('.newsList').css('min-height', this.wrapperHeight)
this.isHasNew();
this.getNewMessage();
},
methods: {
triggerHLeft() {
if(this.isNew > 0){
putNewsIsOld(this.newsContent[0].createtime).then(resolve=>{
this.$router.push('/main');
},reject=>{
Toast(reject);
})
}else{
this.$router.go(-1);
}
},
triggerHRight() {
this.isEdit = !this.isEdit;
},
chooseNewsCard(checked, newsID){
},
initPage(){
this.title = this.$route.query.text;
},
getNewMessage(){
let _this = this;
setTimeout(function(){
console.log('新消息个数',_this.isNew)
/* 加载第一条消息，并且未读消息条数比较大，上拉的时候无论消息是几条都不会再加载未读消息 */
if(_this.isNew > _this.offset && !_this.isDropUp && _this.page==1){
_this.isNewparam = 1;
_this.getDate(_this.isNewparam,_this.page,_this.isNew);
/* 新消息多于一页显示个数，上拉加载的时候分页加载已读消息 */
}else if(_this.isNew > _this.offset && _this.isDropUp){
_this.isNewparam = 2;
_this.getDate(_this.isNewparam,_this.page,_this.offset);
/* 新消息少于一页显示个数，分页加载所有消息 */
}else{
_this.isNewparam = 0;
_this.getDate(_this.isNewparam,_this.page,_this.offset);
}
_this.$refs.loadmore.onTopLoaded();
},500)
},
getDate(isNewparam,page,offset){
console.log('传的参数',isNewparam,page,offset)
getnews(isNewparam,page,offset).then(resolve => {
resolve = JSON.parse(resolve);
console.log(resolve);
let newsData = this.newsContent.slice();
this.page == 1 && this.isNewparam!=2 ? this.newsContent = resolve : this.newsContent = newsData.concat(resolve);
this.showSpinner = false;
this.isLoaded = true;
},reject=>{
Toast(reject);
this.showSpinner = true;
})
},
isHasNew(){
getNewsHaveNew().then(resolve => {
this.isNew = JSON.parse(resolve);
console.log(this.isNew)
},reject=>{
Toast(reject);
})
},
loadTop() {
this.dataInit();
if(this.isNew>0){
putNewsIsOld(this.newsContent[0].createtime).then(resolve => {
getNewsHaveNew().then(resolve => {
this.isNew = JSON.parse(resolve);
this.getNewMessage();
},reject=>{
Toast(reject);
})
},reject=>{
Toast(reject);
})
}else{
getNewsHaveNew().then(resolve => {
this.isNew = JSON.parse(resolve);
this.getNewMessage();
},reject=>{
Toast(reject);
})
}
},
// 改变上拉加在页面状态
handleBottomChange(status) {
this.bottomStatus = status;
},
// 上拉请求数据
loadBottom() {
if(!this.isLoaded){ return; }
this.isDropUp = true;
// 当前展示数据等于请求数据时再请求数据
if (this.newsContent.length >= this.page * this.offset) {
this.isNewparam === 1 ? '' : this.page++;
this.allLoaded = false;
this.isLoaded = false;
this.getNewMessage();
this.$refs.loadmore.onBottomLoaded();
} else {
setTimeout(() => {
this.$refs.loadmore.onBottomLoaded();
Toast('已加载全部数据');
this.allLoaded = true;
}, 300)
}
},
dataInit() {
this.page = 1;
this.allLoaded = false;
this.bottomStatus = '';
this.isDropUp = false;
},
},
created(){
this.initPage();
}
}
</script>
<style scoped lang="scss">
.NewsContentList {
.newsList{
overflow: auto;
}
}
.NewsCardContent {
transition: all 0.3s;
margin: 10px;
background: #fff;
padding: 10px;
border-radius: 4px;
display: flex;
align-items: center;
.checkBox{
transition: all 0.3s;
/*width: 0;*/
width: 4rem;
height: 100%;
text-align: center;
overflow: hidden;
}
.newsDetail{
transition: all 0.3s;
flex: 1;
&>div {
color: #666666;
span {
font-size: 1rem;
line-height: 2rem;
margin-right: 0.6rem;
}
&.title {
padding-left: 0;
display: flex;
justify-content: space-between;
font-size: 1.3rem;
color: #333333;
margin-bottom: 0.4rem;
.right {
font-size: 1.1rem;
color: #999999;
padding-top: 4px;
img {
width: 7px;
height: 11px;
margin-left: 0.433rem;
}
}
.taskCardBadge {
line-height: 1rem;
height: 1.5rem;
margin-top: 2px;
margin-left: 10px;
border-radius: 4px;
}
}
}
}
.unread{
&:after{
display: inline-block;
/*float: right;*/
position: relative;
content: '';
width: 7px;
height: 7px;
top: -9px;
left: -2px;
background: rgb(245, 89, 70);
border-radius: 50%;
}
}
}
</style>