后浪云百度小程序教程：swiper 滑块视图容器

2022-6-25
  • swiper 滑块视图容器
    • 属性说明
      • change 事件 source 返回值
    • 示例
      • 代码示例 1：
      • 代码示例 2：自定义底部切换圆点
      • 代码示例 3：模拟 tabs 组件功能
    • Bug & Tip
    • 常见问题
      • Q：swiper 的面板指示点能自定义样式吗？

    swiper 滑块视图容器

    解释：滑块视图容器。内部只允许使用 swiper-item 组件描述滑块内容，否则会导致未定义的行为。

    属性说明

    属性名 类型 默认值 必填 说明 最低版本

    indicator-dots

    Boolean

    false

    否

    是否显示面板指示点

    		 -

    indicator-color

    Color

    rgba(0, 0, 0, .3)

    否

    指示点颜色

    		 -

    indicator-active-color

    Color

    #333

    否

    当前选中的指示点颜色

    		 -

    autoplay

    Boolean

    false

    否

    是否自动切换

    		 -

    current

    Number

    0

    否

    当前所在页面的 index

    		 -

    current-item-id

    String

    否

    当前所在滑块的 item-id ，不能与 current 被同时指定

    1.11
    低版本请做兼容性处理

    interval

    Number

    5000

    否

    自动切换时间间隔（单位：ms）

    		 -

    duration

    Number

    500

    否

    滑动动画时长（单位：ms）

    		 -

    circular

    Boolean

    false

    否

    是否采用衔接滑动

    		 -

    vertical

    Boolean

    false

    否

    滑动方向是否为纵向

    		 -

    previous-margin

    String

    “0px”

    否

    前边距，可用于露出前一项的一小部分，支持 px 和 rpx

    1.11
    低版本请做兼容性处理

    next-margin

    String

    “0px”

    否

    后边距，可用于露出后一项的一小部分，支持 px 和 rpx

    1.11
    低版本请做兼容性处理

    display-multiple-items

    Number

    1

    否

    同时显示的滑块数量

    1.11
    低版本请做兼容性处理

    bindchange

    EventHandle

    否

    current 改变时会触发 change 事件，event.detail = {current: current, source: source}

    		 -

    bindanimationfinish

    EventHandle

    否

    动画结束时会触发 animationfinish 事件，event.detail 同上

    1.11
    低版本请做兼容性处理

    change 事件 source 返回值

    change 事件中的 source 字段，表示触发 change 事件的原因，可能值如下：

    值 说明

    autoplay

    自动播放导致的 swiper 切换

    touch

    用户滑动导致的 swiper 切换

    “”

    其他原因将返回空字符串

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    后浪云百度小程序教程：swiper 滑块视图容器插图

    请使用百度APP扫码

    代码示例 1：

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <swiper 
      4. 
  
  
  
    4.  class="swiper"
      5. 
  
  
  
    5.  indicator-dots="{{switchIndicateStatus}}" 
      6. 
  
  
  
    6.  indicator-color="rgba(0,0,0,0.30)"
      7. 
  
  
  
    7.  indicator-active-color="#fff"
      8. 
  
  
  
    8.  autoplay="{{switchAutoPlayStatus}}"
      9. 
  
  
  
    9.  current="0"
      10. 
  
  
  
    10.  current-item-id="0" 
      11. 
  
  
  
    11.  interval="{{autoPlayInterval}}"
      12. 
  
  
  
    12.  duration="{{switchDuration}}"
      13. 
  
  
  
    13.  circular="true"
      14. 
  
  
  
    14.  vertical="{{switchVerticalStatus}}"
      15. 
  
  
  
    15.  previous-margin="0px"
      16. 
  
  
  
    16.  next-margin="0px"
      17. 
  
  
  
    17.  display-multiple-items="1"
      18. 
  
  
  
    18.  bind:change="swiperChange"
      19. 
  
  
  
    19.  bind:animationfinish="animationfinish">
      20. 
  
  
  
    20.  <swiper-item 
      21. 
  
  
  
    21.  s-for="item in swiperList"
      22. 
  
  
  
    22.  item-id="{{itemId}}"
      23. 
  
  
  
    23.  class="{{item.className}}">
      24. 
  
  
  
    24.  <view class="swiper-item">{{item.value}}</view>
      25. 
  
  
  
    25.  </swiper-item>
      26. 
  
  
  
    26.  </swiper>
      27. 
  
  
  
      28. 
  
  
  
    28.  <view class="item-scroll border-bottom">
      29. 
  
  
  
    29.  <text class="switch-text-before">指示点</text>
      30. 
  
  
  
    30.  <switch 
      31. 
  
  
  
    31.  class="init-switch" 
      32. 
  
  
  
    32.  checked="{{switchIndicateStatus}}"
      33. 
  
  
  
    33.  bind:change="switchIndicate">
      34. 
  
  
  
    34.  </switch>
      35. 
  
  
  
    35.  </view>
      36. 
  
  
  
      37. 
  
  
  
    37.  <view class="item-scroll border-bottom">
      38. 
  
  
  
    38.  <text class="switch-text-before">自动切换</text>
      39. 
  
  
  
    39.  <switch 
      40. 
  
  
  
    40.  checked="{{switchAutoPlayStatus}}" 
      41. 
  
  
  
    41.  bind:change="switchAutoPlay" 
      42. 
  
  
  
    42.  class="init-switch">
      43. 
  
  
  
    43.  </switch>
      44. 
  
  
  
    44.  </view>
      45. 
  
  
  
      46. 
  
  
  
    46.  <view class="item-scroll">
      47. 
  
  
  
    47.  <text class="switch-text-before">纵向滑动</text>
      48. 
  
  
  
    48.  <switch 
      49. 
  
  
  
    49.  checked="{{switchVerticalStatus}}" 
      50. 
  
  
  
    50.  bind:change="switchVertical" 
      51. 
  
  
  
    51.  class="init-switch">
      52. 
  
  
  
    52.  </switch>
      53. 
  
  
  
    53.  </view>
      54. 
  
  
  
    54.  </view>
      55. 
  
  
  
    55.  <view class="card-area">
      56. 
  
  
  
    56.  <view class="top-description border-bottom">
      57. 
  
  
  
    57.  <view>滑块切换时长</view>
      58. 
  
  
  
    58.  <view>{{switchDuration}}ms</view>
      59. 
  
  
  
    59.  </view>
      60. 
  
  
  
    60.  <slider 
      61. 
  
  
  
    61.  class="slider" 
      62. 
  
  
  
    62.  min="300" 
      63. 
  
  
  
    63.  max="1500" 
      64. 
  
  
  
    64.  value="{{switchDuration}}"
      65. 
  
  
  
    65.  bind:change="changeSwitchDuration">
      66. 
  
  
  
    66.  </slider>
      67. 
  
  
  
    67.  </view>
      68. 
  
  
  
    68.  <view class="card-area">
      69. 
  
  
  
    69.  <view class="top-description border-bottom">
      70. 
  
  
  
    70.  <view>自动切换时间间隔</view>
      71. 
  
  
  
    71.  <view>{{autoPlayInterval}}ms</view>
      72. 
  
  
  
    72.  </view>
      73. 
  
  
  
    73.  <slider 
      74. 
  
  
  
    74.  class="slider" 
      75. 
  
  
  
    75.  min="1000" 
      76. 
  
  
  
    76.  max="5000" 
      77. 
  
  
  
    77.  value="{{autoPlayInterval}}"
      78. 
  
  
  
    78.  bind:change="changeAutoPlayInterval">
      79. 
  
  
  
    79.  </slider>
      80. 
  
  
  
    80.  </view>
      81. 
  
  
  
    81. </view>
      82.

    设计指南

    建议滑块视图数量控制在 2-5 个。
    建议滑块切换时长不低于 500ms ，自动切换时间间隔不高于 5000ms 。

    代码示例 2：自定义底部切换圆点

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description">自定义底部切换圆点</view>
      4. 
  
  
  
    4.  <view class="swiper-wrap">
      5. 
  
  
  
    5.  <swiper 
      6. 
  
  
  
    6.  class="swiper-custom"
      7. 
  
  
  
    7.  autoplay="auto"
      8. 
  
  
  
    8.  interval="3000"
      9. 
  
  
  
    9.  duration="500"
      10. 
  
  
  
    10.  current="{{swiperCurrent}}"
      11. 
  
  
  
    11.  bindchange="swiperChangeCustom">
      12. 
  
  
  
    12.  <swiper-item s-for="{{slider}}">
      13. 
  
  
  
    13.  <image class="swiper-img" src="{{item.imageUrl}}"></image>
      14. 
  
  
  
    14.  </swiper-item>
      15. 
  
  
  
    15.  </swiper>
      16. 
  
  
  
    16.  <view class="dots">
      17. 
  
  
  
    17.  <view s-for="{{slider}}" class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
      18. 
  
  
  
    18.  </view>
      19. 
  
  
  
    19.  </view>
      20. 
  
  
  
    20.  </view>
      21. 
  
  
  
    21. </view>
      22.

    代码示例 3：模拟 tabs 组件功能

    • SWAN
    • JS
    • CSS
     
 
 
      
  
  
  
    1. <view class="wrap">
      2. 
  
  
  
    2.  <view class="card-area">
      3. 
  
  
  
    3.  <view class="top-description">模拟 tabs 组件功能</view>
      4. 
  
  
  
    4.  <!-- 顶部导航 -->
      5. 
  
  
  
    5.  <view class="swiper-tab">
      6. 
  
  
  
    6.  <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swiperNav">全部</view>
      7. 
  
  
  
    7.  <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swiperNav">服务通知</view>
      8. 
  
  
  
    8.  <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swiperNav">系统通知</view>
      9. 
  
  
  
    9.  <view class="tab-item {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swiperNav">评论</view>
      10. 
  
  
  
    10.  <view class="tab-item {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swiperNav">其他</view>
      11. 
  
  
  
    11.  </view>
      12. 
  
  
  
    12.  <!-- 顶部导航对应的内容 -->
      13. 
  
  
  
    13.  <swiper class="swiper-content" current="{{currentTab}}" duration="200">
      14. 
  
  
  
    14.  <swiper-item>
      15. 
  
  
  
    15.  <view>我是全部</view>
      16. 
  
  
  
    16.  </swiper-item>
      17. 
  
  
  
    17.  <swiper-item>
      18. 
  
  
  
    18.  <view>我是服务通知</view>
      19. 
  
  
  
    19.  </swiper-item>
      20. 
  
  
  
    20.  <swiper-item>
      21. 
  
  
  
    21.  <view>我是系统通知</view>
      22. 
  
  
  
    22.  </swiper-item>
      23. 
  
  
  
    23.  <swiper-item>
      24. 
  
  
  
    24.  <view>我是评论</view>
      25. 
  
  
  
    25.  </swiper-item>
      26. 
  
  
  
    26.  <swiper-item>
      27. 
  
  
  
    27.  <view>我是其他</view>
      28. 
  
  
  
    28.  </swiper-item>
      29. 
  
  
  
    29.  </swiper>
      30. 
  
  
  
    30.  </view>
      31. 
  
  
  
    31. </view>
      32.

    Bug & Tip

    • Tip：如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则会导致 setData 被重复调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起的。
    • Tip：组件内部只可放置 swiper-item 组件，否则会导致未定义的行为。

    常见问题

    Q：swiper 的面板指示点能自定义样式吗？

    A：参见属性说明，可以去掉 dot 显示之后，自己定义 dot 样式。具体代码可参见上方代码示例 2 。

    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186155/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图