微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】


Posted in Javascript onDecember 12, 2017

本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能。分享给大家供大家参考,具体如下:

1、效果展示

微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】

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

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
简单的Jquery遮罩层代码实例
Nov 14 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 #Javascript
C#实现将一个字符转换为整数
Dec 12 #Javascript
vue2.0 和 animate.css的结合使用
Dec 12 #Javascript
实例分析JS与Node.js中的事件循环
Dec 12 #Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 #Javascript
JS中精巧的自动柯里化实现方法
Dec 12 #Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 #Javascript
You might like
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python列表计数及插入实例
2014/12/17 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
英文求职信写作小建议
2014/02/16 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015年党员承诺书
2015/01/21 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python