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

第微信小程序常用視圖容器組件使用詳解目錄1、組件概述2、常用的試圖容器組件2.1view2.2scroll-view2.3swiper

1、組件概述

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

其語(yǔ)法格式如下：

標(biāo)簽名稱屬性=值

內(nèi)容

/標(biāo)簽名稱

2、常用的試圖容器組件

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

2.1view

view容器是頁(yè)面中最基本的容器組件，通過(guò)高度和寬度來(lái)定義容器大小。view相當(dāng)于HTML種的div標(biāo)簽，是一個(gè)頁(yè)面中最外層的容器，能夠接受其他組件的嵌入，例如，多個(gè)view容器的嵌套。view容器可以通過(guò)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

view1.view小案例/view

view(1)不阻止父容器的view-hover/view

viewhover-我是父類容器

viewhover-我是子類容器/view

/view

view(2)阻止父容器的view-hover/view

viewhover-我是父類容器

viewhover-hover-stop-propagationhover-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:20rpxauto;

text-align:center;

.view-hover{

background-color:red;

app.wxss

.demo-box{

padding:20rpx;

margin:20rpx60rpx;

border:1rpxsolidgray;

.title{

display:flex;

flex-direction:row;

margin:20rpx;

justify-content:center;

頁(yè)面初始效果

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

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

在view.wxml種放置兩組view容器，在app.wxss文件中設(shè)置父容器背景色為淺紅色，子容器背景色為淺藍(lán)色，通過(guò)hover->

2.2scroll-view

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

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

2.2.1案例

pages/scroll-view/scroll-view.wxml

view

view2.scroll-view小案例/view

view實(shí)現(xiàn)縱向滾動(dòng)/view

scroll-viewscroll-y

view元素一/view

view元素二/view

view元素三/view

view元素四/view

view元素五/view

view元素六/view

/scroll-view

/view

pages/scroll-view/scroll-view.wxss

scroll-view{

height:600rpx;

width:250rpx;

margin:0auto;

.scroll-item-y{

height:200rpx;

line-height:200rpx;

text-align:center;

background-color:skyblue;

border:1pxsolidgray;

本例在scroll-view.wxml文件中設(shè)置組件，通過(guò)設(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.3swiper

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

2.3.1案例

效果圖：

pages/swiper/swiper.wxml

view

view3.swiper小案例/view

view圖片進(jìn)行翻頁(yè)切換/view

swiperindicator-dotsautoplayinterval="3000"

swiper-item

imagesrc="/images/cat1.jpg"/image

/swiper-item

swiper-item

imagesrc="/images/cat2.jpg"/image

/swiper-item

swiper-item

imagesrc="/images/cat3.jpg"/image

/swiper-item

/swiper

/view

pages/swiper/swiper.wxss

swiper{

height:350rpx;

本例在swiper.wxml文件中放置swiper組件,組件屬性autoplay允許自動(dòng)切換圖片，設(shè)置屬性inte