微信小程序学习-轮播图组件swiper

轮播图组件swiper

微信小程序提供了滑块视图容器swiper,可以便捷实现轮播图效果。

这个名字和移动端常用的触摸滑动插件Swiper看起来很相似。小程序这个组件实现简单效果会便捷一些,但是要更复杂炫酷的效果还是Swiper插件多一些,可自定义的空间大。

微信小程序轮播图组件官方文档提供了组件使用的示例代码,显示效果:
轮播图显示效果
结构
<!--swiper.wxml-->
<!--swiper组件 begin-->
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
        <image src="{{item}}" class="slide-image" mode="scaleToFill"/>
    </swiper-item>
  </block>
</swiper>
<!--swiper组件 end-->
<!--测试swiper组件的属性配置-->
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
js
//swiper.js  
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 1500,
    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
    })
  }
})
  • 在js的data中设置需要轮播显示的图片数组。在结构中用wx:for循环输出image标签
  • 通过js的data可直接设置自动播放(autoplay)、指示小圆点(indicatorDots),自动切换时间间隔(interval)和滑动动画时长(duration)。还有其他属性如指点颜色和滑动方向等,在官网文档中都有详细说明。

注意小坑:官网示例代码没有提供样式设定,image图片默认大小是320*240,显示出来图片宽度没有占满,底部还被遮住了部分。

不设置图片宽高效果
  • 图片的宽高要在样式中控制,在图片标签中设置宽高无效。
  • 图片缩放裁剪可以在image标签的mode属性控制,缩放裁剪有多种不同效果,详见微信小程序image标签官方文档
样式

/*swiper.wxss*/
image{
    width:375px;
    height:150px;
}
参考资料:
微信小程序轮播图组件官方文档
微信小程序image标签官方文档
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,913评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,196评论 4 61
  • 3 情定生日宴(1) 06-12 16:38 发布1932字 欧家,在黑白两道上,都占有很重要的一席之地,他们的商...
    媛姐不是吃素的阅读 509评论 0 0
  • 要敢想 书读百遍其义自见,单纯的心理 每天都要看书,不可一日无书 从生活中的点点滴滴去学习,不能像个小傻子。
    AnthonykD阅读 147评论 0 0
  • 这本书看了好久…… 一是故事看似简单,但是对于我这个经济学白痴来说这些知识还是要思考琢磨一番才行,二是因为这个月频...
    只一点阅读 244评论 0 0