[WeChat Mini Programs Getting Started to Proficient] — Do you know how to play carousel? Take down swiper and swiper-item quickly

foreword

For the current form, WeChat mini-programs are a hot topic, so how do we learn and master them and then do practical projects?
For this reason, I specially set up this column to share it with you as I study!

This article mainly introduces the view container class components commonly used in our WeChat applet. We will explain swiper and swiper-item one by one.

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

1. Introduction to carousel

Carousel means that in a module or window, after clicking with a mouse or sliding a finger, you can see multiple pictures, and these pictures are collectively called a carousel.

---

2. Introduction to swiper and swiper-item

What are our swiper and swiper-item components for? Next, let me summarize

• swiper is the outer frame (container) of our carousel
• The swiper-item component is used to put the content of our carousel

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

2.1 Build the carousel structure (.wxml)

• Open list.wxml to build the carousel frame

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

• We can hold down our A word with the left mouse button and drag to the right, we can find that the carousel effect has been achieved

  

2.2 Style Settings (.wxss)

• Next we set the style in 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的的高度和文字高度以及文本位置，最后我们设置轮播图内容的背景颜色

• style display

  

Summarize

Encounter is fate, I look forward to making progress and growing together with you!