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

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

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

1、組件概述

組件是視圖層基本的組成單元，具備UI風(fēng)格樣式以及特定的功能效果。當(dāng)打開某款小程序之后，界面中的圖片、文字等元素都需要使用組件，小程序組件使用靈活，組件之間通過相互嵌套進(jìn)行界面設(shè)計(jì)，開發(fā)者可以通過組件的選擇和樣式屬性設(shè)計(jì)出不同的界面效果。一個組件包括開始標(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)部項(xiàng)目的排列方式。

屬性如下表所示

2.1.1 案例

本例設(shè)計(jì)了兩組父子view容器的點(diǎn)擊態(tài)，第一組父子view容器種子view容器不阻止點(diǎn)擊態(tài)向父容器傳遞，第二組父子view容器中子view容器阻止點(diǎn)擊態(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;
}

頁面初始效果

點(diǎn)擊第1組子容器

點(diǎn)擊第2組子容器

在view.wxml種放置兩組<view>容器，在app.wxss文件中設(shè)置父容器背景色為淺紅色，子容器背景色為淺藍(lán)色，通過hover-class="view-hover"為標(biāo)簽增加屬性，點(diǎn)擊態(tài)均設(shè)置為點(diǎn)擊后背景色更新為紅色，第一組不阻止點(diǎn)擊態(tài)傳遞給父容器，在第二組子類容器種通過hover-stop-propagation來組織點(diǎn)擊態(tài)傳遞給父容器，并設(shè)置屬性hover-start-time=“3000”，hover-stay-time=“4000”,當(dāng)點(diǎn)擊子容器時，3s后出現(xiàn)點(diǎ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">實(shí)現(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">圖片進(jìn)行翻頁切換</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用于顯示面板知識點(diǎn)，<swiper>組件中嵌套3組<swiper-item>,swiper容器高度設(shè)置為300rpx。

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

您可能感興趣的文章: