小程序scroll，swiper使用详解

最新推荐文章于 2024-05-06 14:58:59 发布

閉丄眼聆厛倖輻

最新推荐文章于 2024-05-06 14:58:59 发布

阅读量372

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_52005030/article/details/119461717

版权

本文详细解析了如何在uni-app中结合scroll和swiper组件，实现水平滚动及内容切换的效果。在实践中，遇到的关键点包括为scroll-view设置white-space: nowrap以保证内容横向布局，以及为scroll内部子元素设定display: inline-block和指定高度，以确保滑动功能正常运行。

摘要由CSDN通过智能技术生成

下面代码是结合scroll和swiper组合使用，实现tab和内容的切换，

scroll是横向滚动，

<template>
  <view class="content">
    <view>
      <scroll-view
        class="scroll-view_H"
        scroll-x="true"
        @scroll="scroll"
        scroll-left="120"
      >
        <view
          id="demo1"
          class="scroll-view-item_H uni-bg-red"
          v-for="(item, index) in tab"
          :key="index"
          @click="scroll(index)"
          ><view :class="tabIndex == index ? 'active' : ''">
            {
  { item }}
          </view></view
        >
      </scroll-view>
      <swiper  @change="handle_swiperChange"   :current="tabIndex" next-margin="100rpx">
        <swiper-item