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

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

1、組件概述

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

其語法格式如下：

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

2、常用的試圖容器組件

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

2.1 view

view容器是頁面中最基本的容器組件，通過高度和寬度來定義容器大小。<view>相當(dāng)于HTML種的<div>標(biāo)簽，是一個(gè)頁面中最外層的容器，能夠接受其他組件的嵌入，例如，多個(gè)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)擊子容器時(shí)，3s后出現(xiàn)點(diǎn)擊狀態(tài)，當(dāng)手指松開4ss后，子容器背景色編為初始顏色。

2.2 scroll-view

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

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

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)縱向滾動(dòng)</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,允許組件上下滑動(dòng)，在scroll-view.wxss文件中設(shè)置其高度為600rpx，使得scroll-view組件能夠縱向滑動(dòng)，在中嵌套6組用于顯示滾動(dòng)效果，內(nèi)部元素寬度均為250rpx。

滑動(dòng)前：

滑動(dòng)后：

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允許自動(dòng)切換圖片，設(shè)置屬性interval=“3000”,圖片每隔3s發(fā)生一次切換，屬性indicator-dots用于顯示面板知識(shí)點(diǎn)，<swiper>組件中嵌套3組<swiper-item>,swiper容器高度設(shè)置為300rpx。

感謝各位的閱讀，以上就是“微信小程序常用視圖容器組件如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)微信小程序常用視圖容器組件如何使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！