开发微信小程序时有时需要实现图片轮播图的功能,这时就需要用到微信自定义的 wxml 语法中的 <swiper>
标签,还需要在 .js 文件中设置。
<!-- 轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class='lunbo'>
<block wx:for="{{imgUrls}}" wx:key="unique">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
data: {
imgUrls: [ // 轮播图图片列表
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=886843130,3396342640&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1602634665,822065077&fm=26&gp=0.jpg',
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2329701593,1536949166&fm=26&gp=0.jpg'
],
indicatorDots: true, // 是否显示面板指示点
autoplay: true, // 是否自动切换
interval: 5000, // 自动切换时间间隔
duration: 500 // 滑动动画时长
}