js轮播图菜鸟教程 js轮播图代码运行结果( 二 )

这样我们的数据就可以在页面上显示出来了。
但是我们这里有问题
1，图片没有铺满全屏2，轮播图的提示点也没有3，轮播图不能自动滚动下面我们就来解决这些问题5-6，优化轮播图首先设置图片的mode，让图片铺满。这里用到了image的mode属性，如下图。
我把官方文档的链接给到大家：https://developers.weixin.qq.com/miniprogram/dev/component/image.html这里的mode裁剪模式，大家可以根据自己的需求设置。
home.wxml代码如下：
home.wxss里的代码如下：
可以看出，我们的图片这个时候撑满了屏幕，但是会有裁剪
这个取决于我们image组件的mode裁剪参数的设置，至于设置哪种裁剪模式，这个你可以根据自己的业务场景来定，最好的是设计出来的图片完全符合比例。这样就不会有裁剪的问题了。
5-7，设置自动轮播我们要设置轮播图的自动轮播等属于，其实就是来设置swiper组件的一些属性。其实官方都有给出来的。
这里也把对应的官方文档链接给到大家，大家可以根据自己的需求去做设置。https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html我这里只设置下面两个属性
indicator-dots：显示指示点autoplay：自动轮播这样我们完整的轮播图功能就实现了。关于轮播图的点击和跳转，我们后面章节再做讲解，这节主要是带大家实现动态的轮播图功能。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：