微信小程式檢視容器和基本內容元件圖文詳解

2022-07-21 22:01:35

前言

開發者可以通過運用元件快速搭建出頁面結構，上一章也有對元件進行介紹，那麼本文牛牛就來帶大家學習小程式的元件。

我們可以將元件理解為微信內嵌的標籤，它在小程式承擔的作用與HTML的標籤一致，不過元件的功能更加多樣、具體。

事不宜遲，讓我們開衝！

一，檢視容器類元件

1.1 view

普通檢視容器，在微信小程式中，view就相當於HTML中的div標籤，屬於塊級元素

view由於其無意義性，經常用來做小程式大體框架的佈局

栗子：

如下實現縱向佈局

wxml檔案

<view class="column">
  <view class="view-1 box"></view>
  <view class="view-2 box"></view>
  <view class="view-3 box"></view>
</view>

wxss檔案

.column{
  margin: 0 auto;
  width: 100px;
}
.view-1{
  background-color: lightblue;
}
.view-2{
  background-color: lightcoral;
}
.view-3{
  background-color: lightgreen;
}
.box{
  width: 100px;
  height: 100px;
}

view元件沒有什麼預設的樣式，非常適合作為佈局結構使用，如網格佈局，flex佈局等等。

效果：

1.2 srcoll-view

相對比於view，scroll-view多了可捲動的功能，scroll-view被稱為可捲動的檢視區域
一般用來實現小程式的列表捲動功能
常用屬性：
- scroll-x，允許橫向捲動
- scroll-y，允許縱向捲動
- bindscrolltoupper 捲動到頂部/左邊觸發
- bindscrolltolower 捲動到底部/右邊觸發

bindscrolltoupper和bindscrolltolower一般配合事件繫結一起使用，事件就是渲染層與邏輯層的通訊，使用者在渲染層產生的行為，邏輯層對該行為進行相應。

栗子：

wxml檔案

<scroll-view class="scroll" scroll-y>
  <view class="box view-1"></view>
  <view class="box view-2"></view>
  <view class="box view-3"></view>
</scroll-view>

wxss檔案

.scroll{
  width: 100px;
  height: 120px;
}
.box{
  width: 100px;
  height: 100px;
}
.view-1{
  background-color: lightgreen;
}
.view-2{
  background-color: lightpink;
}
.view-3{
  background-color: lightskyblue;
}

效果：

當然你可以將scroll-y屬性改為scroll-x，實現橫向捲動

1.3 swiper和swiper-item

swiper，滾軸檢視容器，可以設定滑動播放的元素，需要注意的是，裡面只可放置swiper-item標籤，否則會導致未定義的行為。
swiper-item，只可放置於swiper，注意，其寬高自動設定為100%。
一般用來設定輪播圖
常用屬性：
- indicator-dots 設定是否使用面板指示點，預設為false
- indicator-color 面板指示點的顏色，預設值為rgba(0,0,0,.3)
- indicator-color 當前選中的指示點顏色，預設值為#000
- autoplay 是否自動切換圖片，預設為false
- interval 自動切換的時間間隔，預設為5000ms
- circular 是否選擇銜接滑動，==也就是當滑到最後一張圖片，是否允許划動的下一張即回到第一張，預設值為false

輪播圖栗子：

wxml檔案

<swiper class="container" indicator-dots="true" autoplay="true" circular="true" >
<swiper-item class="box item-1">
<view></view>
</swiper-item>
<swiper-item class="box item-2">
<view></view>
</swiper-item>
<swiper-item class="box item-3">
<view></view>
</swiper-item>
</swiper>

wxss檔案

.container{
  height: 200px;
}
.box{
  height: 100%;
}
.item-1{
  background-color: lightgreen;
}
.item-2{
  background-color: lightpink;
}
.item-3{
  background-color: lightgray;
}

就這樣，我們就實現了輪播圖，相比於在網頁用JS的複雜操作，這種低程式碼實現是不是很舒服，為了提高效率，低程式碼也將是未來的趨勢

效果：

檢視容器元件還有像可拖拽檢視movable-area，彈窗檢視page-container，感興趣可以瞭解一下

二，基本內容元件

2.1 text

內容描述為承載文字，是一個文字元件，您可以將它看作是小程式的span標籤，因為text也是行內元素。
常用屬性：
user-select ，文字是否可選，如可以進行復制，注意：該屬性可使文字元件顯示為inline-block

2.2 rich-text

內容描述為富文字，我們可以通過其中的nodes屬性，把HTML字串渲染成對應的UI結構

如下所示：

<rich-text nodes="<h1 style='color: lightblue'>標題</h1>"></rich-text>

效果如下：

總結

到此這篇關於微信小程式檢視容器和基本內容元件圖文詳解的文章就介紹到這了,更多相關小程式檢視容器和內容元件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

微信小程式檢視容器和基本內容元件圖文詳解

目錄

前言

一，檢視容器類元件

1.1 view

1.2 srcoll-view

1.3 swiper和swiper-item

二，基本內容元件

2.1 text

2.2 rich-text

總結

熱門文章