时间：2020-05-06 20:48作者：admin来源：未知人气：1009我要评论(0)
今天我们来讲小程序里实现轮播图的方法，大家要专心看哦。
这个组件叫做滑块组件，嗯，听起来还挺形象的，你看滑动轮播图的时候是不是就像滑动一个个方框的一样？
首先，按着老规矩，我们需要先打开微信小程序开发者文档，看一下关于swiper组件的相关内容：
这里要说一下，跟swiper有关的还有这个swiper-item的组件，这个组件和swiper是一块使用的，这个组件可以放一些东西进去。
如上面所述，我们的代码开始编写了，首先，需要把swiper和swiper-item的代码写进去。
参考代码：
<swiper class="banner">
<swiper-item>
</swiper-item>
</swiper>
那么，该如何插入第一张图片并让这个图片有链接反应呢？
这里需要多几层嵌套代码，其实不难理解，<navigator>的意思的链接，我们链接到logs页面上去，<navigator>下面是<image>图片，我们用的是网络图片，复制网络图片的图片地址即可。
参考代码：
<swiper class="banner">
<swiper-item>
<navigator url="/pages/logs/logs">
<image src="http://xxxxxx.jpg"></image>
</navigator>
</swiper-item>
</swiper>
那么，该如何搞多几张图片，让他们实现轮播呢？
简单来说，就是讲<swiper-item>里面的内容复制个几份即可，但是要放在<swiper>里面才可以。
我们给每一张图片都换个背景。
可以看到，现在的小程序已经实现成功了这轮播的效果。
我们给.banner加一个样式，刚才设定了样式，我们现在来对样式加个规范。
这里我们设置banner有一个1像素宽的红色的实线边框，然后宽为100%，高为200像素。
参考代码：
.banner{
border: 1px solid red;
width: 100%;
height: 200px;
}
我们再给这个图片设置个样式：
参考代码：
.banner image{
width: 100%;
height: 100%;
}效果如下，当然，我们可以打开调试器，在wxml里面可以看到他能规定的内容区域。
当然，我们对这个了解下即可，我们可以把这个调整回来，大小根据实际情况调整一下即可。
这个有什么用呢？看看加上的效果就知道了：
有没有发现，轮播图上有了堆小点点，这些小点点可以让我们清楚的看到有多少张图片。
参考代码：
<swiper class="banner" indicator-dots></swiper>但是大家有没有发现，现在的颜色真的很难看，是这种黑色的，遇到深色的就完全看不清了，那么，这种怎么解决呢？
我们在这里试一下，将指示点颜色调整为白色。（indicator-color）
（255,255,255）是白色，0.3是透明度了。数字越大越不透明。越小越透明。
参考代码：
<swiper class="banner" indicator-dots indicator-color="rgb(255,255,255,0.3)"></swiper>
可以很清楚的看到效果，页面里的颜色变成了纯白的透明色，同样的，我们来设置一下选中指示点的颜色：（indicator-active-color）
参考代码：
<swiper class="banner" indicator-dots indicator-color="rgb(255,255,255,0.3)" indicator-active-color="#fff"></swiper>
这个就其实挺简单了。我们之间在里面加上一个autoplay就可以了，可以看到，现在的显示器上就已经实现自动切换了。
那么，有的小伙伴就会问了，要是先修改轮播图的切换时间怎么办？
这里面我们可以修改时间的长短，默认的5000毫秒，我们可以修改的时间更短或更长。单位是毫秒。
参考代码：
<swiper class="banner" indicator-dots autoplay interval="1000">
这个大家可以自己去试试，挺有意思的。
，<swiper>和<swiper-item>两个属性需要搭配使用，还学会了设置指示点的显示和设置指示点的颜色，还学会通过属性来让轮播图自动切换，那么，我们今天学习些什么呢？
这个属性也是挺有意思的，我们平常在进行切换的时候都会看到一个切换动画，系统默认的切换动画是500毫秒，这个属性的单位也是毫秒，我们可以根据自己的需求调整时长。
我们在这里设置100毫秒，这样就比较快了。当然，我们如果设置为0，那么就没有动画跳转了。
参考代码：
<swiper class="banner" duration="100"></swiper>
不过讲到这里，大家有没有发现，我们最重要的内容还没有开始讲，就是拖到最后一张图片无法衔接到第一张图片去。
我们把这个代码加到<swiper>里面去，然后你会发现当我们拉到最后一张图片的时候，图片会自动轮播到第一张图片来。
参考代码：
<swiper class="banner" circular></swiper>
这个属性好理解，跟上面的差不太多，大家平常收到的邀请函基本上都是这个代码完成的。这边也来给大家简单的看一下。
参考代码：
<swiper class="banner" vertical></swiper>
通过图片可以很清楚的看出来，指示点跑到了最右边去了，我们也必须只能通过上下滑动来实现图片的跳转了。
这种一般是做引导页，全屏的轮播图比较好用，要是用平常的轮播图，就不建议了，因为用户不会很喜欢上下滑动。
我们可以简单的使用一下这个属性，在<swiper>组件里打入：previous-margin=“10”，这个时候我们可以看到图片左边多了个10像素的空隙。
参考代码：<swiper class="banner" previous-margin="10"></swiper>
同样的方法，我们可以打上next-margin=“10”，这样可以让图片的右边也有10像素的间隙。
参考代码：
<swiper class="banner" previous-margin="10" next-margin="10">
那么，这样看起来不是很美观，有没有办法可以添加一些间隙呢？
这里我们需要来到index.wxss页面，设置一个样式代码：
参考样式代码：
.banner swiper-item{
padding: 0 5px;
box-sizing:border-box;
}
大家有没有看到，现在的图片左右已经有了一个白色的间隙。我们可以根据实际需要，进一步美化。
这个组件就跟上节课我们说的<scroll-view>有很相似的地方了，这个可以设置同时显示的滑块数量。
参考代码：
<swiper class="banner" display-multiple-items="2">
可以看到，现在的图片上同时显示出来了两张图片，大家可以自己去尝试一下，挺有意思的。
当然了，为了看起来更好看一些，我们可以在wxss里面修改一下高度，这个看个人的喜好吧，主要还是好看为主。
相关阅读 万彩动画大师怎么添加一个场景的进场特效剪映怎么提速视频声音不变调剪映怎么压缩视频大小剪映如何设置视频的区域范围mindmaster如何使用分支箭头样式功能mindmaster如何给主题添加优先级图标mindmaster怎么在两个框框之间添加一个框框美图秀秀怎么把照片变成黑白美图秀秀镜面翻转怎么弄美图秀秀如何消除红眼
热门文章
电脑上圈11怎么打_⑪_圈11如何输入？
A4纸与16K纸的区别
如何利用“工信部12300”微信公众号投诉移动、联通、电信的方法
海康摄像头忘记密码，自己如何快速重置密码
最新文章
万彩动画大师怎么添加一个场景的进场特效
剪映怎么提速视频声音不变调
剪映怎么压缩视频大小剪映如何设置视频的区域范围mindmaster如何使用分支箭头样式功能mindmaster如何给主题添加优先级图标
人气排行 电脑上圈11怎么打_⑪_圈11如何输入？A4纸与16K纸的区别如何利用“工信部12300”微信公众号投诉移动、联通、电信的方法海康摄像头忘记密码，自己如何快速重置密码海康威视网络摄像头接网线的线序与接法Secure Boot安全启动开启关闭方法手动设置IP地址和DNS的方法小米手机 如何安装谷歌服务框架，最简单的方法
盖楼回复X
(您的评论需要经过审核才能显示)
查看所有0条评论>>