【微信小程序入门到精通】— 轮播图你会了么？快速拿下 swiper 和 swiper-item-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序入门到精通】— 轮播图你会了么？快速拿下 swiper 和 swiper-item。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

swiper-item,【微信小程序入门到精通】,微信小程序,javascript,小程序

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章主要介绍我们微信小程序常用的视图容器类组件，对于 swiper 和 swiper-item 我们将逐一讲解。

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、轮播图介绍

轮播图是指在一个模块或者窗口，通过鼠标点击或手指滑动后，可以看到多张图片，这些图片统称为轮播图。

二、swiper 和 swiper-item 介绍

我们的 swiper 和 swiper-item 组件是用来干什么的呢？接下来我来总结一下

swiper 是我们的轮播图的外框架（容器）
swiper-item 组件用于放入我们轮播图的内容物

话不多说，接下来我们动手操作一下！

2.1 构建轮播图结构（.wxml）

打开 list.wxml，构建轮播图框架

 <swiper class="swiper-container" >
 <!-- 第一个轮播图 -->
 <swiper-item class="item">
  <view>A</view>
 </swiper-item>

 <!-- 第二个轮播图 -->
 <swiper-item class="item">
   <view>B</view>
 </swiper-item>

 <!-- 第三个轮播图 -->
 <swiper-item class="item">
   <view>C</view>
 </swiper-item>
 </swiper>

我们可以鼠标左键按住我们的A字样往右拖动，我们可以发现轮播效果已经实现

2.2 样式设置（.wxss）

接下来我们在 list.wxss 里面设置样式
```
 .swiper-container{
   height: 150px;
 }

 .item{
   height: 100%;
   line-height: 150px;
   text-align: center;

 }

 swiper-item:nth-child(1).item{
   background-color: yellow;
 }


 swiper-item:nth-child(2).item{
   background-color: red;
 }

 swiper-item:nth-child(3).item{
   background-color: gold;
 }
```
首先我们设置 swiper样式的设置，我们前面命名swiper容器为swiper-container，在wxss里面直接使用.swiper-container设置高度，然后我们前面设置了swiper-item名称为item，利用.item设置item的的高度和文字高度以及文本位置，最后我们设置轮播图内容的背景颜色
样式展示