时间紧急，直接上代码
<template><div class="page NewsContentList"><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 {
getnews} from "../../service/getData";export default {
name: "NewsContentList",data() {
return {
title: '',newsContent:[],wrapperHeight: 0,showSpinner: true,page: 1,offset: 10,topStatus: 'loading',allLoaded: false, //数据是否全部加载完毕，全部加载完毕则不会出现上拉加载底部的样式wrapperHeight: 0,bottomStatus: '',isDropDown: false, //是否是上拉加载isDropUp: false, //是否是下拉加载SingleDataLoaded : false, //判断当前请求数据是否请求结束，数据加载开关}},mounted(){
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.offsetTop;$('.newsList').css('min-height', this.wrapperHeight);this.getNewMessage();},methods: {
initPage(){
this.title = this.$route.query.text;},dataInit() {
this.page = 1;this.allLoaded = false;this.bottomStatus = '';},endData(){
//上拉或下拉加载结束语句，并数据置为初始值this.isDropDown? this.$refs.loadmore.onBottomLoaded() : '';this.isDropUp? this.$refs.loadmore.onTopLoaded() : '';this.loadBottomFlag = false;this.loadTopFlag = false;this.showSpinner = false;this.SingleDataLoaded = true;},getNewMessage(){
const _this = this;this.SingleDataLoaded = false;getnews(this.page,this.offset).then(resolve => {
this.page == 1? this.newsContent = resolve : this.newsContent.push(...resolve);if(resolve.lenth<_this.offset){
//如果数据加载完了，提示Toast('已经加载全部数据');_this.allLoaded = true;}_this.endData();},reject=>{
Toast(reject);_this.endData();})},loadTop() {
this.isDropUp= true;this.dataInit();this.getNewMessage();},// 上拉请求数据loadBottom() {
if(!this.isLoaded){
return; }this.isDropDown= true;// 当前展示数据等于请求数据时再请求数据this.getNewMessage();},// 改变上拉加在页面状态handleBottomChange(status) {
this.bottomStatus = status;},},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>需要注意的点
- 上拉加载的时候，经常出现数据还没显示完就提示“已加载全部”
* 原因是没有数据加载的开关，这边数据还没加载完，又开始了下次的加载
* 所以每次加载前加一个加载开关flag，加载完成后再设置为true，false的时候，不触发新的加载。 - 下拉加载的时候，重新加载数据，需要将一些数据重置，比如this.allLoaded=false;将页数page置为1。
- 每次上拉完成后，必须加
this.$refs.loadmore.onTopLoaded();，否则会有样式问题，也不能随便加，否则也会有样式问题 - 每次下拉完成后，必须加
this.$refs.loadmore.onBottomLoaded();，否则会有样式问题，也不能随便加，否则也会有样式问题 - 需要给容器设置高度，以及底下元素的最小高度，否则会有样式问题
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.offsetTop;
$('.newsList').css('min-height', this.wrapperHeight)