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

目录

• 前言
• 一、轮播图介绍
• 二、swiper 和 swiper-item 介绍
• • 2.1 构建轮播图结构（.wxml）
  • 2.2 样式设置（.wxss）
  • 总结

    前言

    对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？

    为此我特意开设此专栏，在我学习的同时也将其分享给大家！

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

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

    一、轮播图介绍

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

    ---

    二、swiper 和 swiper-item 介绍

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

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

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

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

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

            A    B    C  

      • 我们可以鼠标左键按住我们的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的的高度和文字高度以及文本位置，最后我们设置轮播图内容的背景颜色

        • 样式展示

          总结

          相遇即是缘分，期待与您一起进步，不断成长！