微信小程序_(组件)swiper轮播图
2023-09-14 08:57:04 时间
微信小程序swiper轮播图组件官方文档 传送门
Learn:
swiper组件
一、swiper组件
indicator-dots:是否显示面板指示点【默认值false】
autoplay:是否自动切换【默认值false】
interval:自动切换时间间隔【默认值5000】
duration:滑动动画时长【默认值500】
swiper滑块组件代码,初始化indicator-dots,autoplay,interval,duration四个属性
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" > <block wx:for="{{imgUrls}}" wx:key=""> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper>
添加<button>组件绑定函数,去修改indicator-dots,autoplay,interval,duration四个属性
<button bindtap="changeIndicatorDots">indicator-dots</button> <button bindtap="changeAutoplay">autoplay</button> interval自动切换时间间隔 <slider bindchange="intervalChange" show-value min="500" max="2000" /> duration滑动动画时长 <slider bindchange="durationChange" show-value min="1000" max="10000" />
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!--index.wxml--> Cynical丶Gary <!-- 建立swiper代码块 --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" > <block wx:for="{{imgUrls}}" wx:key=""> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper> <button bindtap="changeIndicatorDots">indicator-dots</button> <button bindtap="changeAutoplay">autoplay</button> interval自动切换时间间隔 <slider bindchange="intervalChange" show-value min="500" max="2000" /> duration滑动动画时长 <slider bindchange="durationChange" show-value min="1000" max="10000" />
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Page({ data: { imgUrls: [ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange(e) { this.setData({ interval: e.detail.value }) }, durationChange(e) { this.setData({ duration: e.detail.value }) } })
相关文章
- 微信小程序官方组件展示之导航functional-page-navigator源码
- 微信小程序官方组件展示之基础内容rich-text源码
- 微信小程序官方组件展示之基础内容text源码
- 微信小程序官方组件展示之表单组件checkbox源码
- 微信小程序开发之(表单组件的使用)代码篇
- 微信小程序外部如何控制组件样式
- 两万字:讲述微信小程序之组件
- 微信小程序官方组件展示之媒体组件live-pusher源码
- 微信小程序官方组件展示之媒体组件voip-room源码
- 微信小程序官方组件展示之画布canvas源码
- 微信小程序官方组件展示之开放能力open-data源码
- 微信小程序swiper组件之终极优化丝滑方案
- 企业微信 iOS 工程演进之路(一)- 组件化
- 微信小程序日期选择器(起始日期与终止日期)轮子复制粘贴直接用————modal组件
- 微信小程序常用视图容器组件
- Jmeter系统入门教程(安装、组件使用、Demo展示、连接数据库、压测报告)
- 【Android 插件化】插件化简介 ( 组件化与插件化 )
- 微信终端跨平台组件 mars 系列(一) - 高性能日志模块xlog
- 微信移动端数据库组件WCDB系列(二) — 数据库修复三板斧