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

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

1、效果展示

2、关键代码

index.wxml：

rush:xml;"> utoplay="true" interval="3000" duration="600" style="height:300px;"> display: block;height: 300px;"/> display: block;height: 300px;"/> display: block;height: 300px;"/>

swiper组件属性说明如下：

Box-sizing: border-Box; border-bottom: rgb(231,231,235) 1px solid; widows: 2; text-transform: none; background-color: rgb(255,255,255); margin-top: 1em; text-indent: 0px; border-spacing: 0px; width: 651px; display: table; border-collapse: collapse; font-family: 'Helvetica Neue','Hiragino Sans GB','Microsoft YaHei',黑体,Arial,sans-serif; orphans: 2; margin-bottom: 3em; letter-spacing: 0px; height: 667px; overflow: auto; word-spacing: 0px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid; -webkit-text-stroke-width: 0px"> Box-sizing: border-Box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased"> Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; background-color: rgb(246,248,249); border-top: medium none; border-right: medium none; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid"> Box-sizing: border-Box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased"> Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; background-color: rgb(255,255); border-top: medium none; border-right: medium none; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid">

Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: Nowrap; height: 40px; color: rgb(141,141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">属性名	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: Nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">类型	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: Nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">默认值	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: Nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">说明	Box-sizing: border-Box; border-bottom: medium none; text-align: left; border-left: medium none; padding-bottom: 6px; padding-left: 20px; padding-right: 20px; white-space: Nowrap; height: 40px; color: rgb(141,141); border-top: medium none; font-weight: 400; border-right: medium none; padding-top: 6px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">最低版本
Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">indicator-dotsBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">BooleanBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">falseBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">是否显示面板指示点Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">Box-sizing: border-Box; background-color: rgb(255,255); border-top: rgb(231,235) 1px solid; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; break-inside: avoid">	Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">indicator-colorBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">ColorBox-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">rgba(0,.3)Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased">指示点颜色Box-sizing: border-Box; border-bottom: medium none; border-left: medium none; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; height: 60px; border-top: medium none; border-right: medium none; padding-top: 12px; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased"> 3、源代码点击此处本站下载。 关于swiper详细说明还可参考官方文档：nofollow" target="_blank" href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html 希望本文所述对大家微信小程序开发有所帮助。 相关文章 自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗 前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l... nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步... 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现 前言 图片上传是web项目常见的需求，我基于之前的博客的代码... 踹掉后端，前端导出Excel！ 前言 导出Excel文件这个功能，通常都是在后端实现返回前端一... Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量 前言 众所周知，js是单线程的，从上往下，从左往右依次执行，... select标签 禁止选择但又能通过序列化form表单传值到后台 前言 项目开发中，我们可能会碰到这样的需求：select标签，禁... Copyright © 2018 编程之家. 当前版本 V7.0.16 编程之家 版权所有 闽ICP备13020303号-8