dykj-football/pages/rankList/compontents/masterHand.vue

<template>
	<view class="football-box" style="margin-top: 5%;">
		<u-sticky>
			<u-tabs :list="list" lineColor="#e1b89c" :activeStyle="{
            color: '#e1b89c',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }" itemStyle="padding-left:20%; padding-right: 20%; height: 34px;" @change="tabsChange">
			</u-tabs>
		</u-sticky>
		<u-line></u-line>
		<view class="u-page">
			<u-list @scrolltolower="scrolltolower" style="height: 560px;">
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<u-cell>
						<template #icon>
							<view class="table-left">
								<span>{{`${index+1}`}}</span>
								<u-avatar shape="circle" size="35" :src="item.url" customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</view>
						</template>
						<template #title>
							<view class="table-right">
								<view class="right-name">
									<span>{{item.name}}</span>
								</view>
								<view class="right-content">
									<span style="font-size: 10px; color: #c6c6c6;">{{'排位分: 30'}}</span>
									<view class="content-left">
										<span class="content-text">{{'二连胜'}}</span>
									</view>
									<view class="content-right">
										<span class="content-text">{{'100%'}}</span>
									</view>
								</view>
							</view>
						</template>
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'


	const list = ref([{
			name: '周榜'
		},
		{
			name: '月榜'
		}
	])
	const indexList = ref([]);
	const urls = [
		'https://cdn.uviewui.com/uview/album/1.jpg',
		'https://cdn.uviewui.com/uview/album/2.jpg',
		'https://cdn.uviewui.com/uview/album/3.jpg',
		'https://cdn.uviewui.com/uview/album/4.jpg',
		'https://cdn.uviewui.com/uview/album/5.jpg',
		'https://cdn.uviewui.com/uview/album/6.jpg',
		'https://cdn.uviewui.com/uview/album/7.jpg',
		'https://cdn.uviewui.com/uview/album/8.jpg',
		'https://cdn.uviewui.com/uview/album/9.jpg',
		'https://cdn.uviewui.com/uview/album/10.jpg',
	];

	const onLoad = () => {
		loadmore();
	};

	const scrolltolower = () => {
		loadmore();
	};

	const name = ref('大侠')

	const loadmore = () => {
		for (let i = 0; i < 30; i++) {
			indexList.value.push({
				url: urls[uni.$u.random(0, urls.length - 1)],
				name: `${name.value}${i}`
			});
		}
		console.log(indexList.value);
	};

	const tabsChange = () => {
		console.log('切换了');
	}


	onMounted(() => {
		onLoad()
	})
</script>

<style lang="scss" scoped>
	.football-box {
		width: 100vw;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
	}

	.table-left {
		width: 17vw;
		display: flex;
		justify-content: space-between;
	}

	.table-right {
		width: 66vw;
		display: flex;
		justify-content: space-between;

		.right-name {
			width: 20vw;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.right-content {
			width: 50vw;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.content-left {
			width: 14vw;
			height: 2.2vh;
			background-color: #e7b696;
			position: relative;
			transform: skewX(-25deg);
				display: flex;
				justify-content: center;
				align-items: center;
			.content-text {
				position: absolute;
				transform: skewX(25deg);
				font-size: 10px;
				font-weight: 600;
				color: red;
			}
		}
		.content-right{
		width: 10vw;
		height: 2.2vh;
		background-color: #e7b696;
		position: relative;
		transform: skewX(-25deg);
			display: flex;
			justify-content: center;
			align-items: center;
			.content-text {
				position: absolute;
				transform: skewX(25deg);
				font-size: 10px;
				font-weight: 600;
				color: #fff;
			}
		}
	}
	:deep(.u-cell__body){
		padding: 13px 0 13px 15px;
	}
</style>