uni-app 照片列表循环无限滚动

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 照片列表循环无限滚动

在基于Vue2的uni-app项目中,我需要实现一个图片列表滚动组件,具有以下功能:

  1. 自动滚动播放图片列表
  2. 支持手动左右滑动切换图片
  3. 单击单个图片可以打开/查看该图片
  4. 在左右滑动时,数据需要无限循环,即滑动到最后一张图片时,继续滑动可以切换到第一张图片,形成闭环
  5. 尽管需要实现无限循环滑动效果,但实际上只有一个固定数量的图片数据

请为我提供一个完整的示例代码,尽可能考虑各种边界情况和用户交互体验,确保组件的健壮性和可用性。

ps: 有偿！！！效果参考莱卡世界小程序

Harmonyos Next教程
6 回复

问题解决了吗，没解决我给你写个


没有 我们微信聊一下？ shining-little-star

回复 s***@163.com: 加你了，我写了个

看了一下效果基于swiper组件，改一下不就可以了吧

感谢 swiper的逻辑滚动一般都是一张图片一张图片的滚动 好像不太合适

在 uni-app 中实现照片列表的循环无限滚动，可以通过监听滚动事件并结合列表数据的动态更新来实现。以下是一个基本的代码示例，展示了如何实现这一功能。

1. 数据准备

首先，我们需要一个照片列表数据，这里假设照片列表是一个数组，每个元素包含照片的 URL。

data() {
    return {
        photos: [], // 照片列表
        loading: false, // 加载状态
        page: 1, // 当前页码
    };
},
methods: {
    // 初始化照片列表
    initPhotos() {
        this.fetchPhotos();
    },
    // 获取照片列表
    fetchPhotos() {
        if (this.loading) return;
        this.loading = true;
        // 模拟异步请求
        setTimeout(() => {
            const newPhotos = Array.from({ length: 20 }, (_, i) => `https://example.com/photo${(this.page - 1) * 20 + i + 1}.jpg`);
            this.photos = this.page === 1 ? newPhotos : [...this.photos.slice(-10), ...newPhotos]; // 循环滚动时保留部分旧数据
            this.page += 1;
            this.loading = false;
        }, 1000);
    },
}

2. 模板渲染

在模板中使用 v-for 指令渲染照片列表，并监听滚动事件。

<template>
    <view class="container" @scrolltolower="handleScrollToLower">
        <scroll-view scroll-y="true" class="scroll-view">
            <view v-for="(photo, index) in photos" :key="index" class="photo-item">
                <image :src="photo" class="photo"></image>
            </view>
        </scroll-view>
    </view>
</template>

3. 滚动事件处理

在 handleScrollToLower 方法中，当用户滚动到底部时加载更多照片。

methods: {
    // ... 其他方法
    handleScrollToLower() {
        this.fetchPhotos();
    },
}

4. 样式设置

为容器和照片项设置样式。

<style>
.container {
    height: 100vh;
    overflow: hidden;
}
.scroll-view {
    height: 100%;
}
.photo-item {
    height: 200rpx; /* 根据实际需求调整 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
}
.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>

总结

以上代码展示了如何在 uni-app 中实现照片列表的循环无限滚动。通过监听滚动事件并在用户滚动到底部时动态加载更多数据，同时保留部分旧数据以实现循环效果。需要注意的是，这里的示例代码为了简化而使用了模拟的异步请求，实际项目中应替换为真实的 API 请求。

回到顶部