要在 UniApp 中实现 <scroll-view> 的横向滚动并点击显示下一项，您可以使用以下方法：

1. 模板:

<template>
    <view class="container">
        <scroll-view scroll-x style="width: 100px; white-space: nowrap;" :scroll-into-view="scrollIntoView">
            <view v-for="(item, index) in items" 
                  :key="index" 
                  :id="'item-' + index" 
                  class="item">
                {{ item }}
            </view>
        </scroll-view>
        <button @click="scrollToNext">滚动到下一个</button>
    </view>
</template>

2. 脚本:

export default {
    data() {
        return {
            items: ['项目 1', '项目 2', '项目 3', '项目 4', '项目 5'],
            currentIndex: 0,
            scrollIntoView: ''
        }
    },
    methods: {
        scrollToNext() {
            if (this.currentIndex < this.items.length - 1) {
                this.currentIndex++;
                this.scrollIntoView = 'item-' + this.currentIndex;
            }
        }
    }
}

3. 样式:

.item {
    width: 100px;
    border-right: 1px solid #ccc;
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
}

在这个例子中：

• 每个项目都有基于其索引的唯一 id（例如 item-0、item-1 等）。
• scrollIntoView 属性决定了哪个项目应该滚动到视图中。
• 当点击按钮时，scrollToNext 方法将更改 scrollIntoView 属性为下一个项目的 id，从而使滚动视图滚动并将该项目带入视图。

注意：这只是一个基本的例子，根据您的具体需求，可能需要进行一些调整。