hookehuyr

feat(ScrollableFamilyList): 改进列表项布局并添加底部提示

- 将随机偏移改为按行数规律排列(奇数行靠左,偶数行靠右)
- 增加extraPlaceholder属性控制占位数量
- 在FamilyRank页面添加底部提示文本
- 调整RankingCard组件高度和占位配置
<!--
* @Date: 2025-01-09 00:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-29 13:07:23
* @LastEditTime: 2025-10-29 13:24:24
* @FilePath: /lls_program/src/components/RankingCard.vue
* @Description: 排行榜卡片组件
-->
......@@ -142,7 +142,8 @@
<view v-if="activeTab === 'support'" class="scrollable-family-section mt-1" style="padding: 0 24rpx 34rpx;">
<ScrollableFamilyList
:family-data="familyDanmus"
height="560rpx"
:extra-placeholder="0"
height="600rpx"
/>
</view>
......
......@@ -72,6 +72,11 @@ const props = defineProps({
listenExternalScroll: {
type: Boolean,
default: false
},
// 添加额外占位,用于触发滚动事件
extraPlaceholder: {
type: Number,
default: 1
}
})
......@@ -93,29 +98,28 @@ const totalPages = computed(() => {
const currentPageData = computed(() => {
const start = currentPage.value * props.itemsPerPage
// 每页多显示一个item,有利于滚动触发
const end = start + props.itemsPerPage + 2
const end = start + props.itemsPerPage + props.extraPlaceholder
return props.familyData.slice(start, end)
})
// 随机水平位置数组
const randomOffsets = ref([])
// 生成随机水平偏移
// 生成按行数规律排列的偏移
const generateRandomOffsets = () => {
// 为实际显示的item数量生成偏移(包括多出的一个)
const actualItemCount = Math.min(props.itemsPerPage + 2, props.familyData.length - currentPage.value * props.itemsPerPage)
const actualItemCount = Math.min(props.itemsPerPage + props.extraPlaceholder, props.familyData.length - currentPage.value * props.itemsPerPage)
randomOffsets.value = Array.from({ length: actualItemCount }, (_, index) => {
// 确保一屏内有靠最左和最右的简介,但不能被裁切
if (index === 0) {
// 第一个简介靠左,但留出足够边距避免裁切
return 0 // 不偏移,保持在安全区域
} else if (index === actualItemCount - 1) {
// 最后一个简介靠最右,使用特殊标记
return 100 // 使用特殊值标记需要贴右边
// 按行数规律排列:奇数行(1,3,5...)靠左,偶数行(2,4,6...)靠右
const rowNumber = index + 1 // 行号从1开始
if (rowNumber % 2 === 1) {
// 奇数行靠左边容器
return 0 // 不偏移,靠左
} else {
// 其他简介在中间随机分布,避免负偏移
return Math.floor(Math.random() * 81) // 0rpx 到 80rpx
// 偶数行靠右边容器,使用特殊标记
return 100 // 使用特殊值标记需要贴右边
}
})
}
......@@ -123,10 +127,10 @@ const generateRandomOffsets = () => {
// 获取每个项目的样式
const getItemStyle = (index) => {
const offset = randomOffsets.value[index] || 0
const isLastItem = index === randomOffsets.value.length - 1
const rowNumber = index + 1 // 行号从1开始
// 最后一个item贴右边的特殊处理
if (isLastItem && offset === 100) {
// 偶数行贴右边的特殊处理
if (rowNumber % 2 === 0 && offset === 100) {
return {
marginBottom: '24rpx',
maxWidth: '100%',
......@@ -138,15 +142,13 @@ const getItemStyle = (index) => {
}
}
// 其他item的正常处理
// 奇数行靠左的处理
return {
transform: `translateX(${offset}rpx)`,
marginBottom: '24rpx',
// 确保内容不被裁切,所有偏移都是正值或0
paddingRight: offset > 50 ? '24rpx' : '0',
maxWidth: '100%',
// 确保左侧有足够的边距
paddingLeft: '0'
paddingLeft: '0',
paddingRight: '0'
}
}
......@@ -313,7 +315,7 @@ onMounted(() => {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
backdrop-filter: blur(12rpx);
border: 2rpx solid rgba(255, 255, 255, 0.5);
max-width: 500rpx;
max-width: 550rpx;
min-width: 350rpx;
transition: all 0.3s ease;
}
......
<!--
* @Date: 2025-09-01 13:07:52
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-29 12:49:27
* @LastEditTime: 2025-10-29 13:34:25
* @FilePath: /lls_program/src/pages/FamilyRank/index.vue
* @Description: 文件描述
-->
......@@ -177,6 +177,7 @@
height="1200rpx"
:listen-external-scroll="true"
/>
<view class="scrollable-family-list-footer">上滑有更多助力家庭自荐</view>
</view>
<!-- 我的排名悬浮卡片 -->
......@@ -1107,4 +1108,15 @@ onMounted(async () => {
}
}
}
.scrollable-family-list-footer {
text-align: center;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-top: 32rpx;
position: absolute;
bottom: 40rpx;
left: 0;
right: 0;
}
</style>
......