1. view組件

view組件就類似于html中的div標簽

list.wxml

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

list.wxss

.container1 view{
  	width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}

.container1{
  display: flex;
  justify-content: space-around;
}

2. scroll-view 組件

scroll-view組件就是滾動的視窗，使用scroll-view組件時，要想橫向滾動或者縱向滾動時，需要在scroll-view組件上添加對應的屬性 scroll-x 或 scroll-y,然后需要注意的是，縱向滾動需要給scroll-view組件限定高度，橫向滾動則需要給scroll-view組件添加一個限定的寬度。

list.wxml

<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

list.wxss

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}

.container1{
  justify-content: space-around;
  height: 150px;
  width: 100px;
  border: 1px solid red;
}

3. swiper 和 swiper-item 組件

swiper 和 swiper-item組件是微信小程序提供的用于快速構建輪播圖的組件，swiper為輪播圖的容器，swiper-item為輪播圖的每一項。

其中swiper組件中的indicator-dots屬性為是否在輪播圖面板上顯示指示點，若想顯示，那么將其indicator-dots屬性設置為true.

list.wxml

<swiper class="swiper-container" indicator-dots="true">
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

list.wxss

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}

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


swiper-item:nth-child(1){
  background-color: lightgreen;
}
swiper-item:nth-child(2){
  background-color: lightpink;
}
swiper-item:nth-child(3){
  background-color: lightcoral;
}

3.1. swiper組件中的常用屬性

官網(wǎng)地址【swiper組件】

4. text 和 rich-text組件

4.1. text組件

text為文本組件，類似于html中的span標簽，也是一個行內元素

text組件一個常用的功能 ：長按選中功能（text組件的selectbale屬性）

list.wxml

<view>
  微信號:
  <text selectable>robin_zh</text>
</view>

4.2. rich-text 組件

rich-text 組件為富文本組件，它可以通過nodes屬性將HTML字符串渲染為wxml結構

<rich-text nodes="<h1>HTML字符串</h1>"></rich-text>

5. button 組件

button組件，微信小程序為其提供了諸多屬性，type ,size,plain…，同時button組件可以通過open-type屬性調用微信提供的各種功能（客服，轉發(fā)，獲取用戶權限，信息等）

<view>=====1.普通按鈕，通過type來指定顏色======</view>
<button>默認按鈕</button>
<button type="primary">主色調按鈕</button>
<button type="warn">警告按鈕</button>

<view>=====2.迷你按鈕，通過size來指定尺寸======</view>
<button size="mini">默認按鈕</button>
<button size="mini" type="primary">主色調按鈕</button>
<button size="mini" type="warn">警告按鈕</button>

<view>======3.鏤空按鈕，通過plain指定鏤空======</view>
<button plain>默認按鈕</button>
<button type="primary" plain>主色調按鈕</button>
<button type="warn" plain>警告按鈕</button>

6. image組件

image組件就和html中的img標簽是完全一樣的，只不過在微信小程序中的image組件即使沒有圖片也會默認占據(jù)一部分位置（大約300px*240px）

<image/>
<image src="./kl.jpg" />

/* pages/list/list.wxss */
image{
  border: 1px solid red;
  margin-bottom: 4px;
}

6.1. image的mode屬性

image組件的mode屬性用來指定圖片的裁剪和縮放模式

mode屬性的默認值為scaleToFill,不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素。

mode屬性值的說明:文章來源地址http://www.zghlxwxcb.cn/news/detail-550633.html

到了這里，關于微信小程序常用組件的簡單使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！