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>