微信小程使用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 last-child 列表最后一项的样式
Jan 22 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
淘宝店策划方案
2014/06/07 职场文书
群众路线个人整改措施
2014/10/24 职场文书
护理工作个人总结
2015/03/03 职场文书
建国大业观后感800字
2015/06/01 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Python数组变形的几种实现方法
2022/05/30 Python