您的位置:首页 > 汽车 > 新车 > 益阳网站seo_如何开发一个小程序_舆情报告_企业网络营销成功案例

益阳网站seo_如何开发一个小程序_舆情报告_企业网络营销成功案例

2025/4/29 5:48:02 来源:https://blog.csdn.net/yrldjsbk/article/details/147539010  浏览:    关键词:益阳网站seo_如何开发一个小程序_舆情报告_企业网络营销成功案例
益阳网站seo_如何开发一个小程序_舆情报告_企业网络营销成功案例

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:允许用户鼠标自己滑动图片内容(且循环播放衔接的);

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com