微信小程序常用視圖容器組件如何使用

這篇文章主要講解了“微信小程序常用視圖容器組件如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序常用視圖容器組件如何使用”吧！

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。

感謝各位的閱讀，以上就是“微信小程序常用視圖容器組件如何使用”的內容了，經過本文的學習后，相信大家對微信小程序常用視圖容器組件如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！