微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017-12-12 10:01
1116 查看
本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
index.wxml:
<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;"> <swiper-item> <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/> </swiper-item> <swiper-item> <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/> </swiper-item> <swiper-item> <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/> </swiper-item> </swiper>
swiper组件属性说明如下:
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
indicator-dots | Boolean | false | 是否显示面板指示点 | |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 | 1.1.0 |
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | Boolean | false | 是否自动切换 | |
current | Number | 0 | 当前所在页面的 index | |
interval | Number | 5000 | 自动切换时间间隔 | |
duration | Number | 500 | 滑动动画时长 | |
circular | Boolean | false | 是否采用衔接滑动 | |
vertical | Boolean | false | 滑动方向是否为纵向 | |
bindchange | EventHandle | current 改变时会触发 change 事件,event.detail = {current: current, source: source} |
3、源代码点击此处本站下载。
关于swiper详细说明还可参考官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
希望本文所述对大家微信小程序开发有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序使用progress组件实现显示进度功能【附源码下载】
- 微信小程序使用input组件实现密码框功能【附源码下载】
- 微信小程序使用image组件显示图片的方法【附源码下载】
- 微信小程序例子——使用swiper组件实现图片切换
- 使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
- 微信小程序使用audio组件播放音乐功能示例【附源码下载】
- 微信小程序使用checkbox显示多项选择框功能【附源码下载】
- Android开发实现高仿优酷的客户端图片左右滑动切换功能实例【附源码下载】
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 微信小程序使用swiper组件实现类3D轮播图
- 微信小程序使用video组件播放视频功能示例【附源码下载】
- 微信小程序使用radio显示单选项功能【附源码下载】
- 微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
- Android 下载显示网络图片 实现直接使用类似setimage的方法来完成
- 使用.net FtpWebRequest 实现FTP常用功能 上传 下载 获取文件列表 移动 切换目录 改名 .
- 用javascript实现的图片马赛克后显示并切换加文字功能
- Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能
- Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能
- javascript 实现图片轮播和点击切换功能