微信小程使用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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
豆瓣网的jquery代码实例
Jun 15 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php生成短域名函数
2015/03/23 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
公司合作意向书
2014/04/01 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
党课培训心得体会
2014/09/02 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
南京南京观后感
2015/06/02 职场文书
创业计划书之寿司
2019/07/19 职场文书
导游词之凤凰古城
2019/10/22 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python