mint 下拉加载更多

@mint 下拉加载更多

export default {
name: ‘Loadmore’,
data() {
return {
examplename: ‘Loadmore’,
pageNum: 1,//页码
InitialLoading: true,//初始加载
allLoaded: false,//数据是否加载完毕
bottomStatus: ‘’,//底部上拉加载状态
wrapperHeight: 0,//容器高度
topStatus: ‘’,//顶部下拉加载状态
topText: ‘’,
cars:[],
bottomText: ‘’,
bottomPullText: ‘上拉刷新’,
bottomDropText: ‘释放更新’,
bottomLoadingText: ‘加载中…’,

        }
    },
    mounted() {
        let windowWidth = document.documentElement.clientWidth;//获取屏幕宽度
        if (windowWidth >= 768) {//这里根据自己的实际情况设置容器的高度
            this.wrapperHeight = document.documentElement.clientHeight - 105;
        } else {
            this.wrapperHeight = document.documentElement.clientHeight - 80;
        }
		this.getstorge()
		

    methods: {
        handleBottomChange(status) {
            this.bottomStatus = status;
        },
		getstorge(){
			let _this = this
			this.$axios.get('http://shengqng.natapp1.cc/apic/v1/sjlist?id=2',{
                params:{
                    page:this.pageNum,
					}
                }).then((response)=>{
			this.$nextTick(() => {
				 _this.cars=_this.cars.concat(response.data.data);//多个数组返回新数组

			})
			 
			   console.log(response.data.data);
			}).catch((response)=>{
			  // console.log(response);
		})
		},

        loadBottom() {
			
			let _this = this
			// this.$refs.loadmore.onBottomLoaded(id);
            this.handleBottomChange("loading");//上拉时 改变状态码
			// this.getstorge()
            this.pageNum += 1;
            // setTimeout(() => {//上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
                if (this.pageNum <= 3) {//最多下拉三次
				// _this.cars.length +=10
				this.getstorge()
				console.log(_this.cars)
                    
                } else {
                    this.allLoaded = true;//模拟数据加载完毕 禁用上拉加载
                }
                this.handleBottomChange("loadingEnd");//数据加载完毕 修改状态码
                
            // }, 1500);
			this.$refs.loadmore.onBottomLoaded();
        },
        handleTopChange(status) {
			// console.log(status)
            this.topStatus = status;
        },

    },
	watch: {

 bottomStatus(val) {
     switch (val) {
          case 'pull':
              this.bottomText = this.bottomPullText;
              break;
          case 'drop':
              this.bottomText = this.bottomDropText;
              break;
          case 'loading':
              this.bottomText = this.bottomLoadingText;
              break;
      }
 }

},

}

.page-loadmore-wrapper {
overflow: scroll;
z-index: 100;
}

.hot-list {
    padding: 0 8px;
}

.hot-item {
    padding: 10px 0;
}

.hot-one {
    overflow: hidden;
    border-bottom: 1px dashed #ccc;
}

.hot-one a img {
    padding-right: 10px;
}

.hot-item a img {
    width: 135px;
    height: 90px;
}

.fl {
    float: left;
}

.hot-one a h5 {
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 6px;
    font-size: 16px;
    color: #000;
}

.hot-one a p {
    font-size: 12px;
    color: #828282;
    margin: 0 0 3px;
}

.color_e85647 {
    color: #e85647;
}

div.hot-list > div:first-child .img-box {
    overflow: hidden;
}

div.hot-list > div:first-child img {
    width: 100%;
    height: auto;
    padding-right: 0;
}