小程序开发之组件swiper（滑块视图容器--轮播图）

swiper

swiper滑块视图容器（轮播图）

Github：https://github.com/tomsiebel/MGSwiper--MiniProgram

Gitee：https://gitee.com/siebel/MGSwiper--MiniProgram

swiper属性

从 1.4.0 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

• autoplay 自动播放导致swiper变化；
• touch 用户划动引起swiper变化；
• 其他原因将用空字符串表示。

注意：其中只可放置组件，否则会导致未定义的行为。

swiper-item

仅可放置在组件中，宽高自动设置为100%。

注：
（1） 和区别
是一个组件，会在页面上做渲染；
不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。
（2） 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

例如：

index.wxml

index.wxss

.slideshowView{
  height: 400rpx;
  width: 100%;
  background-color: lightgrey
}
.slideshowView{
  height: 400rpx;
  width: 100%;
}
.swiper-item{
  display: block;
  height: 400rpx;
  width: 100%;
}

index.wxjs

Page({
  data: {
    bg_images: ['images/swiper_1.jpg', 'images/swiper_2.jpg', 'images/swiper_3.jpg'],
  },
})

demo链接

Github：https://github.com/tomsiebel/MGSwiper--MiniProgram

Gitee：https://gitee.com/siebel/MGSwiper--MiniProgram

页面展示：