微信小程序視圖容器和基本內(nèi)容組件實(shí)例分析

本篇內(nèi)容介紹了“微信小程序視圖容器和基本內(nèi)容組件實(shí)例分析”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一，視圖容器類組件

1.1 view

普通視圖容器，在微信小程序中，view就相當(dāng)于HTML中的div標(biāo)簽，屬于塊級元素

view由于其無意義性，經(jīng)常用來做小程序大體框架的布局

栗子：

如下實(shí)現(xiàn)縱向布局

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組件沒有什么默認(rèn)的樣式，非常適合作為布局結(jié)構(gòu)使用，如網(wǎng)格布局，flex布局等等。

效果：

1.2 srcoll-view

• 相對比于view，scroll-view多了可滾動(dòng)的功能，scroll-view被稱為可滾動(dòng)的視圖區(qū)域

• 一般用來實(shí)現(xiàn)小程序的列表滾動(dòng)功能

• 常用屬性：

• scroll-x，允許橫向滾動(dòng)

• scroll-y，允許縱向滾動(dòng)

• bindscrolltoupper 滾動(dòng)到頂部/左邊觸發(fā)

• bindscrolltolower 滾動(dòng)到底部/右邊觸發(fā)

bindscrolltoupper和bindscrolltolower一般配合事件綁定一起使用，事件就是渲染層與邏輯層的通信，用戶在渲染層產(chǎn)生的行為，邏輯層對該行為進(jìn)行相應(yīng)。

栗子：

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

效果：

當(dāng)然你可以將scroll-y屬性改為scroll-x，實(shí)現(xiàn)橫向滾動(dòng)

1.3 swiper和swiper-item

• swiper，滑塊視圖容器，可以設(shè)置滑動(dòng)播放的元素，需要注意的是，里面只可放置swiper-item標(biāo)簽，否則會(huì)導(dǎo)致未定義的行為。

• swiper-item，只可放置于swiper，注意，其寬高自動(dòng)設(shè)置為100%。

• 一般用來設(shè)置輪播圖

• 常用屬性：

• indicator-dots 設(shè)置是否使用面板指示點(diǎn)，默認(rèn)為false

• indicator-color 面板指示點(diǎn)的顏色，默認(rèn)值為rgba(0,0,0,.3)

• indicator-color 當(dāng)前選中的指示點(diǎn)顏色，默認(rèn)值為#000

• autoplay 是否自動(dòng)切換圖片，默認(rèn)為false

• interval 自動(dòng)切換的時(shí)間間隔，默認(rèn)為5000ms

• circular 是否選擇銜接滑動(dòng)，==也就是當(dāng)滑到最后一張圖片，是否允許劃動(dòng)的下一張即回到第一張，默認(rèn)值為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;
}

就這樣，我們就實(shí)現(xiàn)了輪播圖，相比于在網(wǎng)頁用JS的復(fù)雜操作，這種低代碼實(shí)現(xiàn)是不是很舒服，為了提高效率，低代碼也將是未來的趨勢

效果：

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

二，基本內(nèi)容組件

2.1 text

• 內(nèi)容描述為承載文本，是一個(gè)文本組件，您可以將它看作是小程序的span標(biāo)簽，因?yàn)?code>text也是行內(nèi)元素。

• 常用屬性：

  user-select ，文本是否可選，如可以進(jìn)行復(fù)制，注意：該屬性可使文本組件顯示為inline-block

2.2 rich-text

內(nèi)容描述為富文本，我們可以通過其中的nodes屬性，把HTML字符串渲染成對應(yīng)的UI結(jié)構(gòu)

如下所示：

<rich-text nodes="<h2 style='color: lightblue'>標(biāo)題</h2>"></rich-text>

效果如下：

“微信小程序視圖容器和基本內(nèi)容組件實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！