微信小程式常用檢視容器元件使用詳解

2022-03-16 13:00:14

1、元件概述

元件是檢視層基本的組成單元，具備UI風格樣式以及特定的功能效果。當開啟某款小程式之後，介面中的圖片、文字等元素都需要使用元件，小程式元件使用靈活，元件之間通過相互巢狀進行介面設計，開發者可以通過元件的選擇和樣式屬性設計出不同的介面效果。一個元件包括開始標籤和結束標籤，屬性用來裝飾這個元件的樣式。

其語法格式如下：

<標籤名稱屬性="值">
內容
</標籤名稱>

2、常用的試圖容器元件

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

2.1 view

view容器是頁面中最基本的容器元件，通過高度和寬度來定義容器大小。<view>相當於HTML種的<div>標籤，是一個頁面中最外層的容器，能夠接受其他元件的嵌入，例如，多個view容器的巢狀。view容器可以通過flex佈局定義內部專案的排列方式。

屬性如下表所示

2.1.1 案例

本例設計了兩組父子view容器的點選態，第一組父子view容器種子view容器不阻止點選態向父容器傳遞，第二組父子view容器中子view容器阻止點選態向父容器傳遞，

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檔案中設定父容器背景色為淺紅色，子容器背景色為淺藍色，通過hover-class="view-hover"為標籤增加屬性，點選態均設定為點選後背景色更新為紅色，第一組不阻止點選態傳遞給父容器，在第二組子類容器種通過hover-stop-propagation來組織點選態傳遞給父容器，並設定屬性hover-start-time=“3000”，hover-stay-time=“4000”,當點選子容器時，3s後出現點選狀態，當手指鬆開4ss後，子容器背景色編為初始顏色。

2.2 scroll-view

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

注意：在使用縱向捲動時，需要為設定一個固定寬度

2.2.1 案例

pages/scroll-view/scroll-view.wxml

<view class="demo-box">
    <view class="title">2.scroll-view小案例</view>
    <view class="title">實現縱向捲動</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檔案中設定元件，通過設定屬性scroll-y,允許元件上下滑動，在scroll-view.wxss檔案中設定其高度為600rpx，使得scroll-view元件能夠縱向滑動，在中巢狀6組用於顯示捲動效果，內部元素寬度均為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允許自動切換圖片，設定屬性interval=“3000”,圖片每隔3s發生一次切換，屬性indicator-dots用於顯示面板知識點，<swiper>元件中巢狀3組<swiper-item>,swiper容器高度設定為300rpx。

以上就是微信小程式常用檢視容器元件使用詳解的詳細內容，更多關於小程式檢視容器元件的資料請關注it145.com其它相關文章！