swiper与scroll-view对比（实现水平slider）

最新推荐文章于 2025-07-06 00:16:36 发布

原创

最新推荐文章于 2025-07-06 00:16:36 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #scroll-view #滑块滑动

本文对比分析了小程序中使用scroll-view和swiper组件实现滑块水平滑动的差异。通过示例代码展示，scroll-view滑动时无法精确对齐，而swiper则能以块为单位平滑滑动，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中实现滑块水平滑动最常用的手段是：通过scroll-view去实现；但是，通过scroll-view实现的滑动可能有时并不是我们想要达到的效果，那么，还可以通过swiper组件来实现，通过下面可进行同一个功能细节处不同的展示~

一、通过scroll-view实现滑块滑动

二、通过swiper是实现滑块滑动

wxml:

<!-- ******************* scroll-view  ************************* -->
<view class="descr">用scroll-view组件实现的水平slider(滑块)</view>
<scroll-view class="scrollView" scroll-x="true">
   <block wx:for="{
  
  {scrollList}}" wx:key="">
       <view class="scrollCont">{
  
  {item.scrollCont}}</view>
   </block>
</scroll-view>



<!-- ********************* swiper   ******************** -->
<view class="descr">用swiper组件实现的水平slider(滑块)</view>
<!--display-multiple-items同时显示的滑块数量  -->
<swiper class="swiperView" display-multiple-items='3'>
    <block wx:for="{
  
  {swiperList}}" wx:key="">
        <swiper-item>
           <view class="swiper-imgView">
               <im