• ?? 所屬專欄：【微信小程序開發(fā)教程】

• ?? 作??者：我是夜闌的狗??

• ?? 個人簡介：一個正在努力學技術的CV工程師，專注基礎和實戰(zhàn)分享 ，歡迎咨詢！

• ?? 歡迎大家：這里是CSDN，我總結知識的地方，喜歡的話請三連，有問題請私信 ?? ?? ??

前言

??大家好，又見面了，我是夜闌的狗??，本文是專欄【微信小程序開發(fā)教程】專欄的第6篇文章;
??今天開始學習微信小程序的第三天??????，開啟新的征程，記錄最美好的時刻??，每天進步一點點。
??專欄地址：【微信小程序開發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開發(fā)過程的總結，希望能夠加深自己的印象，以及幫助到其他的小伙伴????。
??如果文章有什么需要改進的地方還請大佬不吝賜教????。

一、小程序中組件的分類

??前面幾期已經(jīng)大致介紹完了小程序項目整體框架了，具體更詳細的內(nèi)容可以看一下 官網(wǎng)文檔 。這個時候終于可以說出那句話了

??搞錯了，應該敲代碼??才對。那話不多說，趕緊書接上回。

??小程序中的組件也是由宿主環(huán)境提供的，開發(fā)者可以基于組件快速搭建出漂亮的頁面結構。官方把小程序的組件分為了 9 大類，分別是：視圖容器、基礎內(nèi)容、表單組件、導航組件、媒體組件、map 地圖組件、canvas 畫布組件、開放能力、無障礙訪問。
??其中比較常用的是視圖容器、基礎內(nèi)容、表單組件、導航組件這四種。

二、視圖容器

1、常用的視圖容器類組件

??比較常用的視圖組件有view、scroll-view和swiper 和 swiper-item，其作用和使用場景如下所示：

2、 view 組件的基本使用

??首先要找到對應的頁面來使用view組件，這里以 CshPage1 頁面為例，在 CshPage1.wxml 里寫頁面的結構，CshPage1.wxss 里寫頁面的樣式。

CshPage1.wxml：

<view class="containerCsh1">
  <view>刻晴</view>
  <view>琪亞娜</view>
  <view>李信</view>
</view>

CshPage1.wxss：

??用類名選擇器來選中父元素，再用后代選擇器來選擇子元素來統(tǒng)一設置其寬高等內(nèi)容，當然如果想單獨對一個子元素進行設置，可以通過C3選擇器 nth-child(1) 來選中子元素，并對其進行添加樣式，通過改變父元素的布局就能實現(xiàn)子元素之間的排列了。

/* pages/CshPage1/CshPage1.wxss */
/* 給子元素設置大小 */
.containerCsh1 view{
  width: 100px;
  height: 100px;
  text-align: center; 
  line-height: 100px;
}
/* 給子元素添加背景顏色 */
.containerCsh1 view:nth-child(1){
  background-color: lightcoral;
}
.containerCsh1 view:nth-child(2){
  background-color: lightgreen;
}
.containerCsh1 view:nth-child(3){
  background-color: lightslategrey;
}

/* 給父元素加布局樣式 */
.containerCsh1{
  display: flex;
  justify-content: space-around;
}

??編寫完成之后就實現(xiàn)如圖的 flex 橫向布局效果：

3、scroll-view 組件的基本使用

??可以基于剛才的效果來實現(xiàn)元素縱向滾動效果。注意：這里要使用縱向滾動時，必須給 scroll-view 一個固定高度，同理橫向滾動也是需要一個固定寬度。

• scroll-y 屬性：允許縱向滾動；
• scroll-x 屬性：允許橫向滾動；

CshPage1.wxml：

<scroll-view class="containerCsh1" scroll-y>
  <view>刻晴</view>
  <view>琪亞娜</view>
  <view>李信</view>
</scroll-view>

CshPage1.wxss：

/* pages/CshPage1/CshPage1.wxss */
/* 給子元素設置大小 */
.containerCsh1 view{
  width: 100px;
  height: 100px;
  text-align: center; 
  line-height: 100px;
}
/* 給子元素添加背景顏色 */
.containerCsh1 view:nth-child(1){
  background-color: lightcoral;
}
.containerCsh1 view:nth-child(2){
  background-color: lightgreen;
}
.containerCsh1 view:nth-child(3){
  background-color: lightslategrey;
}

/* 給父元素加布局樣式 */
.containerCsh1{
  border: 1px solid red;
  height: 120px;
  width: 100px;
}

??編寫完成之后就實現(xiàn)如圖的縱向滾動效果：

4、 swiper 和 swiper-item 組件的基本使用

??當想要輪播圖效果的時候，需要配合 swiper 和 swiper-item 組件就能實現(xiàn)出輪播圖效果，indicator-dots 屬性是顯示面板上指示點。里面有幾個輪播圖就用幾個 swiper-item 項。
??先來介紹 swiper 組件的常用屬性吧

cshPageSwiper.wxml：

<!-- 輪播圖結構 -->
<swiper class="swiper-containercsh" indicator-dots indicator-color="white" 
indicator-active-color="gray" autoplay interval="2000" circular>
  <!-- 第一張輪播圖-->
  <swiper-item>
    <view class="item">刻晴</view>
  </swiper-item>
  <!-- 第二張輪播圖-->
  <swiper-item>
    <view class="item">琪亞娜</view>
  </swiper-item>
  <!-- 第三張輪播圖-->
  <swiper-item>
    <view class="item">李信</view>
  </swiper-item>
</swiper>

cshPageSwiper.wxss：

??設置輪播圖容器高度，再對各個輪播項進行屬性賦值。

.swiper-container {
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
/* 給輪播設置屬性 */
swiper-item:nth-child(1) .item{
  background-color: lightseagreen;
}
swiper-item:nth-child(2) .item{
  background-color: limegreen;
}
swiper-item:nth-child(3) .item{
  background-color: lightsalmon;
}

??編寫完成之后就實現(xiàn)出輪播圖效果：

總結

??感謝觀看，這里就是常用的視圖容器類組件的介紹使用，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。?? ?? ??

??也歡迎你，關注我。?? ?? ??

??原創(chuàng)不易，還希望各位大佬支持一下，你們的點贊、收藏和留言對我真的很重要！?。?? ?? ?? 最后，本文仍有許多不足之處，歡迎各位認真讀完文章的小伙伴們隨時私信交流、批評指正！下期再見。??

更多專欄訂閱:

• ?? 【LeetCode題解（持續(xù)更新中）】
• ?? 【Java Web項目構建過程】
• ?? 【微信小程序開發(fā)教程】
• ? 【JavaScript隨手筆記】
• ?? 【大數(shù)據(jù)學習筆記（華為云）】
• ?? 【程序錯誤解決方法（建議收藏）】
• ?? 【軟件安裝教程】

訂閱更多，你們將會看到更多的優(yōu)質內(nèi)容！！文章來源地址http://www.zghlxwxcb.cn/news/detail-802037.html

到了這里，關于【微信小程序】-- 常用視圖容器類組件介紹 -- view、scroll-view和swiper（六）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！