第四章、页面组件

4.1组件的定义及属性

组件是页面视图层(WXML)的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。

4.2容器视图组件

4.2.1 view

view组件的特有属性

4.2.2 scroll-view

scrview组件的属性

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}
 
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.usermotto {
  margin-top: 200px;
}
 
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}
 
.avatar {
  display: block;
  width: 56px;
  height: 56px;
}
 
.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}
 
.nickname-label {
  width: 105px;
}
 
.nickname-input {
  flex: 1;
}

4.2.3 swiper

swiper组件属性

<!--index.wxml-->
<!--<view style="text-align: center;">默认flex布局</view>-->
<view style="display: flex;">
<View style="border: 1px solid #f00;flex-grow: 1;">1</View>
<View style="border: 1px solid #f00;flex-grow: 1;">2</View>
<View style="border: 1px solid #f00;flex-grow: 1;">3</View>
</view>
<view style="text-align: center;">上下混合布局</view>
<view style="display: flex; flex-direction: column;">
<view style="border: 1px solid #f00;">1</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1;"></view>
<view style="border: 1px solid #f00;flex-grow: 2;"></view>
</view>
</view>
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
<view style="border:1px solid #f00;flex-grow: 1;">1</view>
<view style="display: flex;flex-direction: column;flex-grow: 1;">
<view style="border: 1px solid #f00;flex-grow: 1;">2</view>
<view style="border: 1px solid #f00;flex-grow: 2;">3</view>
</view>
</view>

4.3 基础内容组件

4.3.1 icon

icon组件属性

4.3.2 text

text组件属性

4.3.3 progress

progress组件属性

<view class="container" style="padding: 0rpx;">
<!-- 垂直滚动，这里必须设置高度 -->
  <scroll-view scroll-top="{{scrollTop}}"scroll-y="true" -style="height: {{scrollHeight}}px;" class="list" bind-scrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.pic_url}}"></image>
      <view class="text">
       <text class="title">{{item.name}}</text>
       <text class="description">{{item.short_description}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <losding hidden="{{hidden}}" bindchange="loadingChange">
      加载中……
    </losding>
  </view>
</view>-->

4.4表单组件

4.4.1 button

button组件属性

4.4.2 radio

radio组件属性

4.4.3 checkbox

checkbox组件属性

.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname{
  color:#aaa;
}
.usermotto{
  margin-top: 200px;
}
scroll-view{
  width: 100%;
}
.item{
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
}
.item.img{
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
}
.title{
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
}
.description{
  font-size: 26rpx;
  line-height: 15rpx;
}

4.4.4 switch

switch组件属性

4.4.5 slider

slider组件属性

4.4.6 picker

picker组件属性

4.4.7 pocker-view

4.4.8 input

4.4.9 textarea

4.4.10 label

4.4.10 form

4.5 多媒体组件

4.5.1 image

4.5.2 audio

4.5.3 video

4.5.4 camera

4.6 其他组件

4.6.1 map

4.6.2 canvas

4.7 本章小结

       基础内本章介绍了小程序中的常用组件，包括容器组件(view、scroll-view、swiper)、容组件(icon、text、progress、rich-text)、表单组件(form、input、button、radio、check-box、label、picker、picker-view、slider、switch、textarea)、多媒体组件( audio、1magevideo、camera)、其他组件(map、canvas等)。熟练掌握这些组件的属性和方法是开发小程序的必备技能。