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小编还为您精选了以下内容,希望对您有所帮助: