第四章页面组件

；

4.1组件的定义及属性

小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布开放能力等8类(30多个)基础组件。
      每一个组件都由一对标签组成，有开始标签和结束标签，内容置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下:

     <标签名 属性名=”属性值”>内容…< /标签名>

      组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style ,hidden、data - *、bind * /catch * 等 。

      id 组件的唯一表示，保持整个页面唯一，不常用。
      class 组件的样式类，对应 WXSS 中定义的样式。
      style 组件的内联样式，可以动态设置内联样式。
      hidden 组件是否显示，所有组件默认显示。
      data-*  自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数通过传人参数对象的 currentTarget.dataset方式来获取自定义属性的值。
      bind*/catch*  组件的事件，绑定逻辑层相关事件处理函数。

4.2容器视图组件

容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括view、scroll -view和 swiper 组件。

1.view
  view组件是块级组件，没有特殊功能，主要用于布局展示，相当于HTML中的div，是布局中最基本的用户界面(UserInterace，UI)组件，通过设置view的CSS属性可以实现各种复杂的布局。

view组件的特有属性

通过<view>组件实现页面布局的代码如下:
<view style="text-align: center;">morenoflex布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #ff6;flex-grow: 1;">1</view>
  <view style="border: 1px solid #ff6;flex-grow: 1;">2</view>
  <view style="border: 1px solid #ff6;flex-grow: 1;">3</view>
 </view>
 
 <view style="text-align: center;">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
  <view style="border: 1px solid #ff6;">1</view>
  <view style="display: flex;">
  <view style="border: 1px solid #ff6;flex-grow: 1;">2</view>
  <view style="border: 1px solid #ff6;flex-grow: 1;">3</view>
 </view>
 </view>
 
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #ff6;flex-grow: 1;">1</view>
  <view style="display: flex;flex-direction: column;flex-grow: 1;">
  <view style="border: 1px solid #ff6;flex-grow: 1;">2</view>
  <view style="border: 1px solid #ff6;flex-grow: 1;">3</view>
 </view>
 </view>

srcoll-view组件属性

//.wxml代码：
<view class="container" style="padding: 0px;">morenoflex布局</view>
<scroll-view scroll-top="{{scrollTop}}"scroll-y="true"
style="height: {{scrollHeight}}px;"class="list" bindscrolltolower="bindDownLoad"
bindscrolltoupper="topLoad"bindscroll="scroll">
<view class="item"wx:for="{{list}}">
<image class="img" src="{{item.index1}}"></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">
<loading hidden="{{hidden}}"bindchange="loadingChange">
加载中…………
</loading>
 </view>
 
<view style="text-align: center;">左右混合布局</view>
<view style="display: flex;">
  <view style="border: 1px solid #ff6;flex-grow: 1;">1</view>
  <view style="display: flex;flex-direction: column;flex-grow: 1;">
  <view style="border: 1px solid #ff6;flex-grow: 1;">2</view>
  <view style="border: 1px solid #ff6;flex-grow: 1;">3</view>
 </view>
 </view>

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