当前位置：首页 > news >正文

微信小程序的轮播图学习报告

news 2025/4/16 8:41:43

微信小程序轮播图学习报告

好久都没分享新内容了，实在惭愧惭愧。今天给大家做一个小程序轮播图的学习报告。

先给大家看一下我的项目状态：

在这里插入图片描述

很空昂！像一个正在修行的老道，空的什么也没有。

但是我写了 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界面定义的名字。告诉他我要给他设置的样式。

由于过于基础，不进行详细介绍了，初学的小伙伴可以评论区交流。

设置图片到轮播图中

写困了。这里简单介绍一下吧。眼皮打架了…

<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;}}
}
}

好了奥伙伴们，简单分享一下困了该咪西了.

查看全文

http://www.mrgr.cn/news/80907.html