微信小程序官方组件展示之视图容器swiper源码

以下将展示微信小程序之视图容器swiper源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

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

属性说明：

WebView

Skyline

change事件 source 返回值

从 1.4.0 开始，change事件增加source字段，表示导致变更的原因，可能值如下：

1.autoplay自动播放导致swiper 变化；

2.touch用户划动引起swiper 变化；

3.其它原因将用空字符串表示。

Bug& Tip

1.tip:如果在bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

2.tip:在 mac 小程序上，若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考enablePassiveEvent 文档）

示例代码：

JAVASCRIPT

Page({

  onShareAppMessage() {

    return {

      title: 'swiper',

      path: 'page/component/pages/swiper/swiper'

    }

  },

  data: {

    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],

    indicatorDots: true,

    vertical: false,

    autoplay: false,

    interval: 2000,

    duration: 500

  },

  changeIndicatorDots() {

    this.setData({

      indicatorDots: !this.data.indicatorDots

    })

  },

  changeAutoplay() {

    this.setData({

      autoplay: !this.data.autoplay

    })

  },

  intervalChange(e) {

    this.setData({

      interval: e.detail.value

    })

  },

  durationChange(e) {

    this.setData({

      duration: e.detail.value

    })

  }

})

WXML:

 

 

   

     

        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

       

         

           

         

       

     

   

   

     

       

          指示点

         

           

         

       

       

          自动播放

         

           

         

       

     

   

   

     

        幻灯片切换时长(ms)

        {{duration}}

     

     

     

        自动播放间隔时长(ms)

        {{interval}}

     

     

   

 

 

版权声明：本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。

原文链接地址：

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html