排行榜页面完成

This commit is contained in:
ycy 2024-04-18 11:49:24 +08:00
parent 615a67d306
commit 745d67166c
3 changed files with 272 additions and 22 deletions

View File

@ -14,14 +14,28 @@
<view class="u-page"> <view class="u-page">
<u-list @scrolltolower="scrolltolower" style="height: 560px;"> <u-list @scrolltolower="scrolltolower" style="height: 560px;">
<u-list-item v-for="(item, index) in indexList" :key="index"> <u-list-item v-for="(item, index) in indexList" :key="index">
<!-- <u-cell :title="`${index + 1}`">
<u-list-cell>1111</u-list-cell>
<u-list-cell>2222</u-list-cell>
</u-cell> -->
<u-cell> <u-cell>
<template #title> <template #icon>
<view class="table-left">
<span>{{`${index+1}`}}</span> <span>{{`${index+1}`}}</span>
<!-- <u-avatar shape="square" size="35" :src="item.url"></u-avatar> --> <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> </template>
</u-cell> </u-cell>
</u-list-item> </u-list-item>
@ -78,6 +92,11 @@
console.log(indexList.value); console.log(indexList.value);
}; };
const tabsChange = () => {
console.log('切换了');
}
onMounted(() => { onMounted(() => {
onLoad() onLoad()
}) })
@ -89,4 +108,68 @@
background-color: #fff; background-color: #fff;
border-radius: 10rpx 10rpx 0 0; 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> </style>

View File

@ -1,9 +1,161 @@
<template> <template>
22222222 <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 #title>
<view class="tableList">
<view class="table-left">
<span style="margin-right: 20%;">{{`${index+1}`}}</span>
<span style="font-size: 20px; font-weight: 600;">{{item.name}}</span>
</view>
<view class="table-right">
<view class="market" style="margin-right: 2%;">
<span class="market-text">{{'净胜120场'}}</span>
</view>
<view class="grade">
<span class="grade-text">{{'得分:150分'}}</span>
</view>
</view>
</view>
</template>
</u-cell>
</u-list-item>
</u-list>
</view>
</view>
</template> </template>
<script> <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> </script>
<style> <style lang="scss" scoped>
.football-box {
width: 100vw;
background-color: #fff;
border-radius: 10rpx 10rpx 0 0;
}
.tableList {
width: 83vw;
display: flex;
justify-content: space-between;
align-items: center;
.table-left {
width: 30vw;
}
.table-right {
width: 70vw;
display: flex;
justify-content: flex-end;
.market{
width: 20vw;
height: 2.2vh;
background-color: #e7b696;
position: relative;
transform: skewX(-25deg);
display: flex;
justify-content: center;
align-items: center;
.market-text {
position: absolute;
transform: skewX(25deg);
font-size: 10px;
font-weight: 600;
color: #fff;
}
}
.grade{
width: 20vw;
height: 2.2vh;
background-color: #e7b696;
position: relative;
transform: skewX(-25deg);
display: flex;
justify-content: center;
align-items: center;
.grade-text {
position: absolute;
transform: skewX(25deg);
font-size: 10px;
font-weight: 600;
color: #fff;
}
}
}
}
:deep(.u-cell__body) {
padding: 13px 0 13px 15px;
}
</style> </style>

View File

@ -4,9 +4,13 @@
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view> <view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
</view> </view>
<view class="box-y"> <view class="box-y">
<view class="Upicker"> <view class="Upicker" v-if='handColor'>
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker> <u-picker :show="showHand" :columns="handColumns" @confirm="confirmHand" @cancel="cancelHand"></u-picker>
<u-button @click="show = true">{{ textBtn }}</u-button> <u-button @click="showHand = true">{{ handText }}</u-button>
</view>
<view class="Upicker" v-else>
<u-picker :show="showSect" :columns="sectColumns" @confirm="confirmSect" @cancel="cancelSect"></u-picker>
<u-button @click="showSect = true">{{sectText }}</u-button>
</view> </view>
<view class="box-top"> <view class="box-top">
<view class="ball-box" @click="handBtn"> <view class="ball-box" @click="handBtn">
@ -37,9 +41,15 @@ const { safeAreaInsets } = uni.getSystemInfoSync();
const handColor = ref(true) const handColor = ref(true)
const sectColor = ref(false) const sectColor = ref(false)
const show = ref(false); const showHand = ref(false);
const columns = ref([ const showSect = ref(false);
['总分榜', '总分榜1', '总分榜2'] let handText = ref('状元榜')
let sectText = ref('门派得分排行榜')
const handColumns = ref([
['状元榜', '连中榜', '明灯黑仔榜']
]);
const sectColumns = ref([
['门派得分排行榜', '连中榜1', '明灯黑仔榜1']
]); ]);
const handBtn = ()=>{ const handBtn = ()=>{
handColor.value = true handColor.value = true
@ -51,18 +61,23 @@ const sectBtn = ()=>{
sectColor.value = true sectColor.value = true
} }
let textBtn = ref('总分榜')
const confirm = (e) => {
textBtn.value = e.value[0] const confirmHand = (e) => {
show.value = false; handText.value = e.value[0]
showHand.value = false;
};
const confirmSect = (e) => {
sectText.value = e.value[0]
showSect.value = false;
}; };
const cancel = ()=>{ const cancelHand = ()=>{
show.value = false; show.value = false;
} }
const tabsChange = (tabItem)=>{
// status.value = tabItem.name const cancelSect = ()=>{
show.value = false;
} }
</script> </script>