前端网站开发总结手机网站 软件
uniapp开发03-轮播图组件swiper的简单使用案例！这个仅仅是官方提供的一个轮播图组件啊。实际上我们项目开发的时候，会应用到其他第三方公司的轮播图组件资源！效果更强大。兼容性更强。
废话不多说，我们直接上代码。分析代码。
<template><view><!--演示轮播图组件效果 swiper--><swiper class="swiper" autoplay="true" interval="3000" circular><swiper-item class="item"><image src="/static/images/2.jpg" mode=""></image><text class="info-pic">001</text></swiper-item><swiper-item class="item"><image src="/static/images/3.jpg" mode=""></image><text>002</text></swiper-item><swiper-item class="item"><image src="/static/images/4.jpg" mode=""></image><text>003</text></swiper-item></swiper></view>
</template><script></script><style lang="scss">.swiper{border: 1px solid red;.item{width: 750rpx;.info-pic{display: inline-block;margin-top: 10rpx;}}}</style>
下面看看实际的运行情况如何。
如图，效果是可以正常轮播显示的。我们开启了一些参数。
我们开启了autoplay参数，默认是false的。我们设置为了true.允许它自己自动播放。
同时我们修改了默认的轮播间隔时间为3秒，默认的是5秒（有点慢）；
我们还增加了参数circular:允许用户鼠标自己滑动图片内容（且循环播放衔接的）；