uniapp-列表样式

<template>
	<view>
		<!-- 背景渐变 -->
		<view class="background"></view>

		<!-- 列表 -->
		<scroll-view class="list" scroll-y @scrolltolower="loadMore">
			<view class="list-item" v-for="(item, index) in 10" :key="index">
				{{ index }}
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import i from '@/libs/common/index.js'
	import api from '@/request/api.js'
	import {
		userStore
	} from '@/store/userStore.js'
	import {
		commonStore
	} from '@/store/commonStore.js'
	import stationItem from '@/components/stationItem/stationItem.vue'
	import {
		usePaginatedList
	} from '@/hooks/usePaginatedList'
	import {
		locationStore
	} from '@/store/locationStore.js'
	const user = userStore()
	const common = commonStore()
	const location = locationStore()

	onLoad(() => {})
	function loadMore(){
		console.log("触底");
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 40vh;
		background: linear-gradient(to bottom, #ff7e5f, #feb47b);
		z-index: 1;
	}

	.list {
		position: relative;
		z-index: 2;
		height: 100vh;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.list-item {
		border: 1px solid blue;
		height: 200rpx;
		padding: 20px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		margin: 0 30rpx;
	}

	.loading {
		text-align: center;
		padding: 20px;
		color: #999;
	}
</style>