qzw_xcx/pages/myCenter/information.vue

<template>
	<view>
		 <scroll-view  style="height: 100vh;" class="floor-list"
		  :scroll-top="scrollTop" scroll-y="true"  v-if="list.length > 0"   @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		  refresher-enabled="true">
			  <view class="hotelcontent" v-for="(item,index) in getlist" :key="index">
				 <view class="contentleft">
					  <image style="width: 100%;height: 100%;"></image>
				  </view>
				  <view class="contentitle">
					  <view v-if="item.types == 0">催单信息</view>
					  <view v-if="item.types == 1">联系酒店</view>
					  <view v-if="item.types == 2">客户退货</view>
					  <view>{{item.content}}</view>
					  <view>订单号：{{item.order_sn}}</view>
					  <view style="text-align: right;">{{item.add_time}}</view>
				  </view>
			  </view>
		  </scroll-view>
		  <view v-if="list.length == 0" style="text-align: center;margin-top: 300upx;">
		  		暂无消息通知哦
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
		   return{
			   list:[],
			   page:　1,
			   scrollTop: 0,
			   old: {
			   	scrollTop: 0
			   }
		   }
		},
		onLoad() {
			this.getlist();
		},
		methods: {
			// 滚动到顶部
			upper(e) {
				console.log("顶部")
			},
			// 滚到底部
			lower(e) {
				this.page = this.page + 1;
				if(this.ispull) {
					this.getlist();
				}
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			getlist() {
				this.request({
					url: '/v2/shop/msg_list',
					method: 'POST',
					data: {
						page: this.page,
						page_size:　10
					},
					success: (res) => {
						this.list = this.list.concat(res.data.data.msg_list);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.hotelcontent {
		display: flex;
		flex-direction: row;
		padding: 18upx 32upx;
		border-bottom: 10upx solid #F5F5F5;
	
		.contentleft {
			width: 200upx;
			height: 180upx;
			background-color: red;
			
		}
		.contentitle {
			width: 100%;
			padding-left: 35upx;
			color: #909399;	
			view {
				padding-bottom: 12upx;
			}
			.contentip {
				float: left;
				color: #909399;
				padding-top: 15upx;
				font-size: 24upx;
			}
		}
	}
</style>