xinwang/pages/user/applyList.vue

<template>
	<view class="content">
		<view style="height: 20rpx;"></view>
		<scroll-view scroll-y="true" class="list-wrapper" :style="{'height':height}" @scrolltolower="loadData()">
			<empty v-if="loaded && list.length == 0"></empty>
			<view class="apply-item flex" v-for="item in list">
				<view class="item-left flex">
					<image src="" mode="" class="item-img"></image>
					<view class="item-info flex">
						<view class="name">
							假猪套
						</view>
						<view class="phone">
							13245678911
						</view>
					</view>
				</view>
				<view class="item-btn flex">
					<view class="err-btn">
						拒绝
					</view>
					<view class="pas-btn">
						通过
					</view>
				</view>
				<!-- <view class="item-right">
					已拒绝
				</view> -->
			</view>
			<uni-load-more :status="loadingType" v-if="list !=0"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data(){
			return {
				list: [1,2,3],
				loaded: false,
				loadingType: 'more',
				page: 1,
				limit: 15,
				height: '',//滚动区域高度
			}
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.list-wrapper').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		onLoad () {
			this.loadData()
		},
		methods: {
			loadData() {
				let obj = this
				if(obj.loadingType == 'loading') {
					return
				}
				if(obj.loadingType == 'noMore') {
					return 
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrapper {
		// padding: 20rpx 20rpx 0;
		background-color: #f8f6f6;
	}
	.apply-item {
		
		background-color: #fff;
		height: 130rpx;
		border-bottom: 1px solid #F0F0F0;
		padding: 0 35rpx 0 20rpx;
		&:last-child {
			border: none;
		}
		.item-left {
			.item-img {
				height: 80rpx;
				width: 80rpx;
				border-radius: 80rpx;
				background-color: red;
			}
			.item-info {
				height: 80rpx;
				flex-direction: column;
				padding-left: 20rpx;
				justify-content: space-around;
				align-items: flex-start;
				line-height: 1;
				.name {
					font-size: 30rpx;
					font-family: PingFangSC;
					font-weight: 500;
					color: #3F454B;
				}
				.phone {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.item-btn {
			.err-btn {
				width: 98rpx;
				height: 47rpx;
				border: 1px solid #000000;
				border-radius: 5rpx;
				line-height: 47rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.pas-btn {
				width: 98rpx;
				height: 47rpx;
				background: linear-gradient(-35deg, #F8DD4F, #FBEB77);
				border-radius: 5rpx;
				line-height: 47rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-left: 10rpx;
			}
		}
		.item-right {
			line-height: 129rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		
	}
	
</style>