uniapp 横向swiper滚动

UniApp 的横向 Swiper 滑动组件是一种用于展示多个卡片或内容模块水平滑动效果的 UI 组件。它通常用于列表、轮播图等场景。在 UniApp 中，你可以通过以下步骤来创建一个横向滚动的 Swiper：

1. 引入组件：首先，在 Vue 文件中安装 UniApp 的 Swiper 组件，如果还没有安装，可以使用 `uni-app-vue` 包管理器 (如 Vite 或者 HBuilderX) 进行安装，例如：

   <template>
     <importer src="vant/swipe/swipe" />
   </template>

2. 添加滑块：在模板中添加 `<van-swipe>` 标签，并设置必要的属性，比如 `swipeable` 表示是否允许滑动，`autoplay` 设置自动切换时间等：

   <van-swipe :swipeable="true" :autoplay="3000">
     <van-swipe-item v-for="(item, index) in items" :key="index">
       <img :src="item.image" alt="" />
       <div>{{ item.title }}</div>
     </van-swipe-item>
   </van-swiper>

其中，`items` 是一个包含图片路径和标题的对象数组。

3. 定义数据：在你的 Vue 实例中，初始化 `items` 数组，并在需要的时候更新它来动态控制滑动内容：

   export default {
     data() {
       return {
         items: [
           { image: 'path/to/item1.jpg', title: 'Item 1' },
           { image: 'path/to/item2.jpg', title: 'Item 2' },
           // ... 更多项
         ]
       };
     }
   };

4. 可选功能：如果你还需要其他交互，如左右箭头、暂停/播放按钮等，可以在样式表中引入 Vant UI 或自定义样式，并在模板中添加相应的按钮。