微信小程序學習之常用的視圖組件

Posted on by

一.常用的視圖組件

1.view

  • 普通視圖區域
  • 類似與HTML中的div，是一個塊級元素
  • 常用來實現頁面的佈局效果

 使用效果：

wxml文件：

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

 wxss文件：

.container1 view{
    width: 100px;/*寬*/
    height: 100px;/*高*/
    text-align: center;/*居中*/
    line-height: 100px;/*縱向居中*/
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightgreen;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/*給三個view加上不同的顏色*/
.container1{
  display: flex;/*將三個view橫向排列*/
  justify-content: space-around;/*橫向分散對其齊*/
}

效果圖：

2.scroll-view

  • 可滾動的視圖區域
  • 常用來實現滾動列表效果

 使用效果：

wxml文件：

<!-- scroll-y屬性：允許縱向滾動 -->
<!-- scroll-x屬性：允許橫向滾動 -->
<!-- 註意：使用豎向滾動時，必須給scroll-view一個固定高度 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

 wxss文件：

.container1 view{
    width: 100px;/*寬*/
    height: 100px;/*高*/
    text-align: center;/*居中*/
    line-height: 100px;/*縱向居中*/
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightgreen;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
/*給三個view加上不同的顏色*/
.container1{
  border: 1px solid red;
  /*給scroll-view一個固定高度*/
  height: 120px;
  width: 100px;
}

效果圖：

可以使用鼠標上下拖動，達到滾動的效果！  

3.swiper和swiper-item

輪播圖容器組件和輪播圖item組件

 使用效果：

wxml文件：

<!-- 輪播圖區域 -->
<!-- indicator-dots 屬性：顯示面板指示點 -->
<swiper class="swiper-container">
  <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>

 wxss文件：

.swiper-container{
  height: 150px;/*輪播圖高度*/
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
 
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

效果圖：

l circular實現銜接滑動，滑倒C，往右滑動回到A，類似循環隊列！！

 例如：加上 indicator-dots 屬性

<!-- 輪播圖區域 -->
<!-- indicator-dots 屬性：顯示面板指示點 -->
<swiper class="swiper-container" indicator-dots>
  <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>

效果圖：可與上進行對比

4.text

  • 文本組件
  • 類似與HTML中的span標簽，是一個行內元素

使用效果：

wxml文件：

<view>
  手機號支持長按選中保存
  <text selectable>18814231000</text>
</view>
<!-- 隻有在text中的文本才能長按保存(必須加上selectable)，view中不可長按保存 -->

 效果圖：

5.rich-text 

  • 富文本組件
  • 支持把HTML字符串渲染為WXML結構

 通過rich-text組件的nodes屬性節點，把HTML字符串渲染為對應的UI結構：

wxml文件：

<view>
  手機號支持長按選中保存
  <text selectable>18814231000</text>
</view>
<!-- 隻有在text中的文本才能長按保存(必須加上selectable)，view中不可長按保存 -->
<rich-text nodes="<h1 style='color:red;'>標題<h1>"></rich-text>

效果圖：

6.button

  • 按鈕組件
  • 功能比HTML中的button按鈕豐富
  • 通過open-type屬性可以調用微信提供的各種功能（客服、轉發、獲取用戶授權等）

使用效果：

wxml文件：

<!-- 按鈕組件的基本使用 -->
<!-- 通過type屬性指定按鈕顏色類型 -->
<button>普通按鈕</button>
<button type="primary">主色調按鈕</button>
<button type="warn">警告按鈕</button>
 
<!-- size="mini" 小尺寸按鈕 -->
<button size="mini">普通按鈕</button>
<button type="primary" size="mini">主色調按鈕</button>
<button type="warn" size="mini">警告按鈕</button>
 
<!-- plain 鏤空按鈕 -->
<button size="mini" plain>普通按鈕</button>
<button type="primary" size="mini" plain>主色調按鈕</button>
<button type="warn" size="mini" plain>警告按鈕</button>

 效果圖：

7.image

  • 圖片組件
  • image組件默認高度約300px、高度約240px

使用效果：

wxml文件：

<!-- image 圖片組件 -->
<image></image>
<image src="/images/123.jpg"></image>

wxss文件：

image{
  border: 1px solid red;
}

效果圖：

 例如更改屬性mode為aspectFit，自適應的，效果圖：

<!-- image 圖片組件 -->
<image></image>
<image src="/images/123.jpg" mode="aspectFit"></image>

8.navigator

  • 頁面導航組件
  • 類似於HTML中的a鏈接

總結

到此這篇關於微信小程序學習之常用的視圖組件的文章就介紹到這瞭,更多相關微信小程序組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：