微信小程序——【一】视图容器（view,scroll-view,swiper）之swiper组件（滑块视图容器）

最新推荐文章于 2025-06-14 15:47:21 发布

pinazhang

最新推荐文章于 2025-06-14 15:47:21 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_41550144/article/details/89527044

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解了Swiper组件的使用方法，包括其属性配置如indicator-dots、autoplay、interval和duration，以及如何通过JS动态调整这些属性。同时，提供了完整的WXML和JS代码示例，帮助读者快速上手。

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

swiper

滑块视图容器。其中只可放置< swiper-item >组件，否则会导致未定义的行为。

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
autoplay	boolean	false	是否自动切换
indicator-dots	boolean	false	是否显示面板指示点
interval	number	5000	自动切换时间间隔
duration	number	500	滑动动画时长

swiper.wxml文件

<view class="container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="{{slide-image}}"/>
      </swiper-item>
    </block>
  </swiper>

  <view>
    <button type="primary" bindtap="changeIndicatorDots">indicator-dots</button>
    <button type="primary" bindtap="changeAutoplay">autoplay</button>
  </view>

  <view>
    <slider bindchange="intervalChange" show-value min="500" max="2000"/>interval
    <slider bindchange="durationChange" show-value min="1000" max="10000"/>duration
  </view>

</view>

swiper.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgurls:[
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots:false,
    autoplay:false,
    interval:5000,
    duration:1000
  },
  changeIndicatorDots:function(e){
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay:function(e){ 
    this.setData({
      autoplay:!this.data.autoplay
    })
  },
  intervalChange:function(e){
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange:function(e){
    this.setData({
      duration: e.detail.value
    })
  }
})

效果图
在这里插入图片描述