本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
index.wxml:
swiper组件属性说明如下:
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-dots | 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">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-color | 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">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
希望本文所述对大家微信小程序开发有所帮助。