uni-app 左右滑动+分页 功能实现

实现 uni-app 中的左右滑动和分页功能，你可以利用 swiper 组件和分页逻辑来完成。以下是一个简单的示例代码，展示如何实现这一功能。

1. 创建分页数据

首先，在你的 data 中定义分页数据和当前页码：

data() {
    return {
        currentPage: 1, // 当前页码
        pageSize: 10,   // 每页展示的项目数量
        totalItems: 50, // 总项目数量
        items: [],      // 当前页展示的项目
        pages: []       // 分页数据
    };
},
methods: {
    initPages() {
        let pages = [];
        for (let i = 0; i < Math.ceil(this.totalItems / this.pageSize); i++) {
            pages.push([]);
        }
        for (let i = 0; i < this.totalItems; i++) {
            pages[Math.floor(i / this.pageSize)].push(`Item ${i + 1}`);
        }
        this.pages = pages;
        this.updateItems();
    },
    updateItems() {
        this.items = this.pages[this.currentPage - 1] || [];
    },
    prevPage() {
        if (this.currentPage > 1) {
            this.currentPage--;
            this.updateItems();
        }
    },
    nextPage() {
        if (this.currentPage < this.pages.length) {
            this.currentPage++;
            this.updateItems();
        }
    }
}

2. 在 onLoad 生命周期中初始化分页数据

onLoad() {
    this.initPages();
}

3. 使用 swiper 组件实现左右滑动

在 template 中使用 swiper 组件，并绑定分页数据：

<template>
    <view>
        <swiper
            :autoplay="false"
            :interval="3000"
            :duration="500"
            current="currentPage - 1"
            @change="onSwiperChange"
        >
            <swiper-item v-for="(page, index) in pages" :key="index">
                <view>
                    <view v-for="item in page" :key="item">{{ item }}</view>
                </view>
            </swiper-item>
        </swiper>
        <view class="pagination">
            <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
            <button @click="nextPage" :disabled="currentPage === pages.length">Next</button>
        </view>
    </view>
</template>

4. 处理 swiper 滑动事件

methods: {
    ...
    onSwiperChange(event) {
        this.currentPage = event.detail.current + 1;
        this.updateItems();
    }
}

5. 样式（可选）

你可以根据需要添加一些样式来美化你的分页和滑动效果。

<style scoped>
.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
button {
    padding: 10px;
    font-size: 16px;
}
</style>

这个示例展示了如何在 uni-app 中实现左右滑动和分页功能。你可以根据自己的需求进行调整和扩展。