快捷導(dǎo)航

微信小程序常用視圖容器組件使用詳解

更新時間：2022年03月16日 11:32:10 作者：別團等shy哥發(fā)育

組件是視圖層基本的組成單元，具備UI風(fēng)格樣式以及特定的功能效果。本文將通過示例詳細為大家介紹一下微信小程序中常用的視圖容器組件，需要的可以參考一下

1、組件概述

組件是視圖層基本的組成單元，具備UI風(fēng)格樣式以及特定的功能效果。當(dāng)打開某款小程序之后，界面中的圖片、文字等元素都需要使用組件，小程序組件使用靈活，組件之間通過相互嵌套進行界面設(shè)計，開發(fā)者可以通過組件的選擇和樣式屬性設(shè)計出不同的界面效果。一個組件包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來裝飾這個組件的樣式。

其語法格式如下：

<標(biāo)簽名稱屬性="值">
內(nèi)容
</標(biāo)簽名稱>

2、常用的試圖容器組件

視圖容器(View Container)組件用于排版頁面為其他組件提供載體。常用視圖容器有View、scroll-view和swiper等等。

2.1 view

view容器是頁面中最基本的容器組件，通過高度和寬度來定義容器大小。<view>相當(dāng)于HTML種的<div>標(biāo)簽，是一個頁面中最外層的容器，能夠接受其他組件的嵌入，例如，多個view容器的嵌套。view容器可以通過flex布局定義內(nèi)部項目的排列方式。

屬性如下表所示

2.1.1 案例

本例設(shè)計了兩組父子view容器的點擊態(tài)，第一組父子view容器種子view容器不阻止點擊態(tài)向父容器傳遞，第二組父子view容器中子view容器阻止點擊態(tài)向父容器傳遞，

pages/view/view.wxml代碼如下：

<view class="demo-box">
  <view class="title">1.view小案例</view>
  <view class="title">(1)不阻止父容器的view-hover</view>
  <view class="view-parent" hover-class="view-hover">我是父類容器
    <view class="view-son" hover-class="view-hover">我是子類容器</view>
  </view>
  <view class="title">(2)阻止父容器的view-hover</view>
  <view class="view-parent" hover-class="view-hover">我是父類容器
    <view class="view-son" hover-class="view-hover" hover-stop-propagation hover-start-time="3000" hover-stay-time="4000">我是子類容器</view>
  </view>
</view>

pages/view/view.wxss代碼如下：

.view-parent {
  width: 100%;
  height: 350rpx;
  background-color: pink;
  text-align: center;
}
.view-son {
  width: 50%;
  height: 200rpx;
  background-color: skyblue;
  margin: 20rpx auto;
  text-align: center;
}
.view-hover {
  background-color: red;
}

app.wxss

.demo-box {
  padding: 20rpx;
  margin: 20rpx 60rpx;
  border: 1rpx solid gray;
}
.title {
  display: flex;
  flex-direction: row;
  margin: 20rpx;
  justify-content: center;
}

頁面初始效果

點擊第1組子容器

點擊第2組子容器

在view.wxml種放置兩組<view>容器，在app.wxss文件中設(shè)置父容器背景色為淺紅色，子容器背景色為淺藍色，通過hover-class="view-hover"為標(biāo)簽增加屬性，點擊態(tài)均設(shè)置為點擊后背景色更新為紅色，第一組不阻止點擊態(tài)傳遞給父容器，在第二組子類容器種通過hover-stop-propagation來組織點擊態(tài)傳遞給父容器，并設(shè)置屬性hover-start-time=“3000”，hover-stay-time=“4000”,當(dāng)點擊子容器時，3s后出現(xiàn)點擊狀態(tài)，當(dāng)手指松開4ss后，子容器背景色編為初始顏色。

2.2 scroll-view

scroll-view容器為可滾動的視圖容器，允許用戶通過手指在容器上滑動來改變顯示區(qū)域，常見的滑動方向有水平滑動和垂直滑動。其屬性表如下所示。

注意：在使用縱向滾動時，需要為設(shè)置一個固定寬度

2.2.1 案例

pages/scroll-view/scroll-view.wxml

<view class="demo-box">
    <view class="title">2.scroll-view小案例</view>
    <view class="title">實現(xiàn)縱向滾動</view>
    <scroll-view scroll-y>
      <view class="scroll-item-y">元素一</view>
      <view class="scroll-item-y">元素二</view>
      <view class="scroll-item-y">元素三</view>
      <view class="scroll-item-y">元素四</view>
      <view class="scroll-item-y">元素五</view>
      <view class="scroll-item-y">元素六</view>
    </scroll-view>
</view>

pages/scroll-view/scroll-view.wxss

scroll-view {
  height: 600rpx;
  width: 250rpx;
  margin: 0 auto;
}
.scroll-item-y {
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background-color: skyblue;
  border: 1px solid gray;
}

本例在scroll-view.wxml文件中設(shè)置組件，通過設(shè)置屬性scroll-y,允許組件上下滑動，在scroll-view.wxss文件中設(shè)置其高度為600rpx，使得scroll-view組件能夠縱向滑動，在中嵌套6組用于顯示滾動效果，內(nèi)部元素寬度均為250rpx。

滑動前：

滑動后：

2.3 swiper

<swiper>組件為滑塊視圖容器，通常用于圖片之間的切換播放，被形象得稱為輪播圖。其屬性表如圖所示。

2.3.1 案例

效果圖：

pages/swiper/swiper.wxml

<view class="demo-box">
  <view class="title">3.swiper小案例</view>
  <view class="title">圖片進行翻頁切換</view>
  <swiper indicator-dots autoplay interval="3000">
    <swiper-item>
      <image src="/images/cat1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/cat2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/cat3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

pages/swiper/swiper.wxss

swiper {
  height: 350rpx;
}

本例在swiper.wxml文件中放置<swiper>組件,組件屬性autoplay允許自動切換圖片，設(shè)置屬性interval=“3000”,圖片每隔3s發(fā)生一次切換，屬性indicator-dots用于顯示面板知識點，<swiper>組件中嵌套3組<swiper-item>,swiper容器高度設(shè)置為300rpx。

以上就是微信小程序常用視圖容器組件使用詳解的詳細內(nèi)容，更多關(guān)于小程序視圖容器組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: