微信小程序从零开始开发步骤(五)轮播图

上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。

Swiper是滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。 实例:

图片.png

更多样式,可以查看官方的API 参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

第一步:WXML文件:

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block>
</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: 3000,
    duration: 500,
 
  },
})

介绍一下参数的意思:

   indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,

indicator-dots Boolean false 是否显示面板指示点 autoplay Boolean false 是否自动切换 interval Number 5000 自动切换时间间隔 duration Number 500 滑动动画时长

下一章:微信小程序从零开始开发步骤(六)4种页面跳转的方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JackeyGao的博客

在网页中显示ansi终端颜色

终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示, 能够让我们处理问题更加高效,但是在运维开发中, 难免要在 web 网页中操作服务器...

2752
来自专栏程序小工

【VSCode插件】background添加编辑器背景

VScode 编辑器对中文支持很好,插件丰富,主题也好看,所以目前已经由 sublime 转投 Vscode 了。在插件搜集中找到了可以自定义编辑器背景的插件b...

4153
来自专栏守望轩

Visual Studio 2008 每日提示(三)

#021、 调整字符、词或行的顺序 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/23/did-yo...

2743
来自专栏IMWeb前端团队

图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 ? Image pre processing for up...

6956
来自专栏埋名

svgtofont.js 自动生成图标字体和彩色图标文件

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体,导入到项目中使用。

7354
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

1282
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3555
来自专栏Golang语言社区

go channel 通信通道

go中最重要的一种通信通道就是channel 1.给一个 nil channel 发送数据,造成永远阻塞 2.从一个 nil channel 接收数据,造成...

3113
来自专栏hbbliyong

WPF备忘录(5)怎样修改模板中的控件

     首先,想问大家一个问题,你们如果要给一个Button添加背景图片会怎么做?(呵呵,这个问题又点小白哈) 是这样吗? <Button ...

3106
来自专栏Golang语言社区

golang实现简单的udp协议服务端与客户端示例

其实udp没有什么服务端和客户端的概念了,只是一个发一个收而已,只是这样较方便能识别和理解. 服务端: package main import ( "...

3518

扫码关注云+社区

领取腾讯云代金券