微信小程序轮播图学习报告
好久都没分享新内容了，实在惭愧惭愧。今天给大家做一个小程序轮播图的学习报告。
先给大家看一下我的项目状态：
很空昂！像一个正在修行的老道，空的什么也没有。
但是我写了 4 个 view 容器，随手写的啦…
稍后，我要写 swiper 标签，swiper标签是实现轮播图的关键。
轮播图绘制
小程序的轮播图和以往的前端开发不同。大多数东西 都是封装好的，我们在用的时候只需要调用人家封装好的就可以了。
<view class="swiper">
<swiper>
<swiper-item>
1
</swiper-item>
<swiper-item>
2
</swiper-item>
<swiper-item>
3
</swiper-item>
</swiper>
</view>
在这块代码块中，我在 view 容器里，设置了 swiper 标签，刚才有提过，swiper 标签是小程序中实现轮播图的关键。而 swiper 标签下的 swiper-item 可以看成是一个子标签。
就好像 swiper 是一位父亲，而swiper-item 是这位父亲的各个儿子，儿子们如果想像父亲一样驰骋猎场，就必须是该父亲的儿子，所以创建在 swiper 下面。而每个儿子都是该轮播图的一部分。
效果如下：
这儿啊！我本来真的想放效果的，图片不太看的出来，录制了几秒钟的视频，插入不进来，回头俺私下去找个 可以截 GIF 的工具。
麻烦大家自己测试吧。
样式调制
现在轮播图已经有了，只不过很丑很丑。。
在调整调整样式。
找到该界面文件下的 wxss文件，我这里改的是 scss。不过都没关系啊，你也可以改一下，
下边我们要去这个文件里设置局部的样式。
.swiper {
swiper {
height: 360rpx;
background-color: skyblue;
swiper-item {
// & 连接符 在 scss 文件中 代表 父类选择器引用的意思。
// 运行后会被解析为 swiper-item
&:first-child {
background-color: lightsalmon;
}
&:last-child {
background-color: lightseagreen;
}
}
}
}
在这个文件中，我写上了这块代码段。
调用刚才wxml界面定义的名字。告诉他 我要给他设置的样式。
由于过于基础，不进行详细介绍了，初学的小伙伴 可以评论区交流。
更多的属性介绍
轮播图自动播放
移步至 wxml 文件中，我们给 swiper 添加 autoplay 属性。 该熟悉的默认值为 true，不写值 也可以。
<view class="swiper">
<swiper autoplay="true">
<swiper-item>
1
</swiper-item>
<swiper-item>
2
</swiper-item>
<swiper-item>
3
</swiper-item>
</swiper>
</view>
轮播时常设置
通过interval 属性，将轮播时常调整成 两秒
<view class="swiper">
<swiper autoplay="true" interval="2000">
<swiper-item>
1
</swiper-item>
<swiper-item>
2
</swiper-item>
<swiper-item>
3
</swiper-item>
</swiper>
</view>
底部导航
indicator-dots 属性值 也是布尔类型。默认为 true
indicator-color 属性可以设置底部导航原点的颜色
设置小圆点激活时的样式通过 indicator-active-color 进行调制
<view class="swiper">
<swiper autoplay="true" interval="2000" indicator-dots="true">
<swiper-item>
1
</swiper-item>
<swiper-item>
2
</swiper-item>
<swiper-item>
3
</swiper-item>
</swiper>
</view>
轮播顺序调制
<!-- 轮播顺序设置通过 circular 进行设置 默认为 true -->
设置图片到轮播图中
写困了。这里简单介绍一下吧。眼皮打架了…
<view class="swiper">
<swiper autoplay="true" interval="2000" indicator-dots="true">
<swiper-item>
<image src="图片路径" mode="" />
</swiper-item>
</swiper>
</view>
如果 只是学习了解一下，就这样把图片加进去，然后到 scss 文件中 去调整样式。
.swiper {
swiper {
height: 360rpx;
background-color: skyblue;
swiper-item {
image {
// 宽和高 设置为 占满轮播图
width: 100%;
height: 100%;
}
&:first-child {
background-color: lightsalmon;
}
&:last-child {
background-color: lightseagreen;
}
}
}
}
好了奥 伙伴们，简单分享一下 困了 该咪西了.
