xinwang/pages/store/storeList.vue

<template>
	<view class="store-list">
		<scroll-view scroll-y="true" class="list" @scrolltolower="loadData()">
			<empty v-if="loaded && list.length == 0"></empty>
			<view class="store flex" v-for="item in list" @click="navTo('/pages/store/storeDetail')">
				<image src="" mode="" class="store-img"></image>
				<view class="store-info">
					<view class="store-name clamp">鑫旺零售台州店鑫旺零售台州店鑫旺零售台州店</view>
					<view class="store-detail">台州市椒江区市府大道120号</view>
					<view class="store-tip">门店</view>
					<view class="store-des">
						<image src="" mode=""></image>
						距离 15KM
					</view>
				</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: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				list: [1,2,3],
				storeList: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				height: '',//滚动区域高度
				loaded: false,
			}
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.list').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: {
			//获取门店list
			loadData() {
				let obj = this
				if(obj.loadingType == 'loading') {
					return
				}
				if(obj.loadingType == 'noMore') {
					return 
				}
				
				
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-list {
		padding-top: 20rpx;
	}
	.store {
		margin: 0 auto 20rpx;
		width: 710rpx;
		height: 210rpx;
		background: #ffffff;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 19rpx 25rpx 11rpx 20rpx;
		justify-content: flex-start;
		.store-img {
			flex-shrink: 0;
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			background-color: red;
		}
		.store-info {
			width: 100%;
			height: 100%;
			padding-left: 19rpx;
			position: relative;
			.store-name {
				max-width: 400rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.store-detail {
				padding-top: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.store-tip {
				width: 66rpx;
				height: 40rpx;
				background: linear-gradient(120deg, #ffc063, #ffa163);
				border-radius: 8rpx;
				position: absolute;
				right: 0;
				top: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 40rpx;
				text-align: center;
			}
			.store-des {
				// width: 400rpx;
				position: absolute;
				bottom: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				height: 35rpx;
				image {
					margin-right: 8rpx;
					width: 17rpx;
					height: 24rpx;
					background-color: red;
				}
			}
		}
	}
</style>