【微信小程序】swiper轮播图
2021-04-07 21:19
836 查看
<view class="swiperWrap"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#fff"> <block wx:for="{{imgUrls}}" wx:for-index="index" wx:key="index"> <swiper-item> <image class="" src="{{item}}"></image> </swiper-item> </block> </swiper> </view>
data:
imgUrls: [ '/images/ad1.jpg', '/images/ad2.jpg', '/images/ad3.jpg', '/images/ad4.jpg', '/images/ad5.jpg', '/images/ad6.jpg', '/images/ad7.jpg', ], indicatorDots: true, // 是否显示面板指示点 autoplay: true, // 是否自动切换 circular: true, // 是否采用衔接滑动 interval: 3000, // 自动切换时间间隔 duration: 1000, // 滑动动画时长
相关文章推荐
- 微信小程序调用swiper轮播组件,元素不显示问题记录
- 微信小程序使用swiper组件实现类3D轮播图
- 微信小程序实现Swiper轮播图效果
- 微信小程序之 3d轮播(swiper来实现)
- 微信小程序自定义轮播图swiper dots默认样式
- 微信小程序之swiper无缝轮播
- [新手教程] 微信小程序 轮播图 swiper图片组件
- 微信小程序入门学习,借助云开发动态更换swiper图片数据,小程序轮播图动态更新
- 微信小程序 轮播图 swiper图片组件
- 微信小程序swiper实现轮播图,可触发点击事件
- 微信小程序实现3D轮播图效果(非swiper组件)
- 如何自定义微信小程序swiper轮播图面板指示点的样式
- 微信小程序的轮播图swiper问题
- 微信小程序之swiper轮播图中的图片自适应高度的方法
- 微信小程序之轮播组件:swiper
- 解决微信小程序的swiper轮播图右边留有空白
- 微信小程序-swiper轮播图获取index
- [微信小程序]根据图片宽高动态改变swiper(轮播图)组件宽高
- 微信小程序之swiper轮播图中的图片自适应高度
- 微信小程序 swiper 轮播+缩略图