欢迎访问成都祈钰瑶科技有限公司！

全国免费服务热线：

18982081108
✕

成都网站设计公司,成都响应式网站设计,成都移动端网站设计,成都网站UI设计

成都祈钰瑶 >> 网站建设知识

创新互联百度小程序教程：swiper 滑块视图容器

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

    swiper 滑块视图容器

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

    创新互联公司从2013年开始，先为上蔡等服务建站，上蔡等地企业，进行企业商务咨询服务。为上蔡企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

    属性说明

    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 中打开

    扫码体验

    代码示例

    请使用百度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 。

    上一篇：SQL Server中各类型的锁（LOCK）
    下一篇：实战指南：如何在Linux虚拟机中成功连接外网？（linux虚拟机连接外网）
    友情链接 : 成都响应式网站设计　成都网站UI设计　聊聊微前端那些事儿　为什么k4打不开了呢　php如何设置字符集　网站做好后，网站优化应该如何进行？　刚刚注册的域名未通过注册局审核