微信小程序——组件定义及属性（view组件）
小程序定义了各种各样的组件，它们在WXML中起着各不同的作用。与HTML元素一样，一个组件是指从组件开始标签到结束标签的所有代码，由于组件可能会被转译为不同端对应的代码，所以在页面创建过程中，不能使用小程序组件标签以外的标签。
组件定义及属性
1）组件是视图层的基本组成单元
2）组件自带一些功能与微信风格的样式
3）一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内
按类型可以将组件划分为七大类：视图容器、基础内容、表单、导航、多媒体、地图、画布
一个完整的组件结构如下：
<tagname property="value">contents</tagname>
组件可以通过属性进行配置，属性只能用在开始标签或单个自闭合标签上，不能用于结束标签。一个组件可以对应多个属性，属性具有名称和值两部分，组件的属性名称都是小写，以连字符“-”连接。组件属性分为所有组件都有的共同属性和组件自定义的特殊属性。
1.组件的共同属性
- id：组件的唯一表示，保持整个页面唯一。
- class：组件里的样式类，在对应的WXSS中定义的样式类。
- style：组件的内联样式，可以动态设置的内联样式。使用方式同HTML标签style属性。
- hidden：组件是否显示，所有组件默认显示。
- data-*：自定义属性，组件上触发事件时，会发送给事件处理函数。事件处理函数可以通过datascl获取。
- bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数。bind为冒泡事件，catch为非冒泡事件。
除上述属性以外几乎所有组件都有自定义属性，可以对该组件的功能或样式进行修饰，具体参考各个组件的定义。
2.组件的属性类型
每个属性都有其对应的类型，使用时应给属性值传入对应的类型值，属性按类型可分为：
- Boolean：布尔值，组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型。
- Number：数字。
- String：字符串。
- Array：数组。
- Object：对象。
- EventHandler：事件处理函数名。
- Any：任意属性。
视图容器
有过前端经验的同学都了解，在前端项目中我们常使用DIV+CSS进行页面布局，其中<div/>没有任何语义和功能，仅作为容器元素存在，在小程序中，有一套类似<div/>的容器组件，那就是<view/>、<scroll-view/>和<swiper/>。在HTML中大部分标签内部能嵌套任何标签，如<div/>、<span/>、<section/>、<p/>等，但是在小程序中，大部分组件都有它自己特殊的功能和意义，标签都有特定的用法，内部也只能嵌套指定的组件，而容器组件内部能嵌套任何标签，容器组件是构建布局的基础组件。本小节主要介绍视图类容器。
View组件
<view/>是一个块级容器组件，没有特殊功能，主要用于布局展示，是布局中最基本的UI组件，任何一种复杂的布局都可以通过嵌套<view/>组件，设置相关WXSS实现。<view/>支持常用的CSS布局属性，如display、float、position甚至Flex布局等，熟悉DIV+CSS的人应该很容易上手
<view/>具备一套关于点击行为的属性：
- hover:是否启动点击态，默认值为false
- hover-class:指定按下去的样式，当hover-class="none"时，没有点击态效果，默认值为none
- hover-start-time:按住多久出现点击态，单位毫秒，默认值为50
- hover-stay-time:手指松开后点击态保留时间，单位毫秒，默认值为400
1）水平3栏布局
示例代码如下：
-
<view style="display:flex;">
-
<view style='background-color:red;flex-grow:1;height:180rpx;'>
</view>
-
<view style='background-color:blue;flex-grow:1;height:180rpx;'>
</view>
-
<view style='background-color:green;flex-grow:1;height:180rpx;'>
</view>
-
</view>
执行结果如下：
2）左右混合布局
示例代码如下：
-
-
<view style='display:flex;height:400rpx;'>
-
<view style='background-color:red;width:250rpx;color:#fff;'>1
</view>
-
<view style='flex-grow:1;display:flex;flex-direction:column;'>
-
<view style='flex-grow:1;background-color:blue;color:#fff;'>2
</view>
-
<view style='flex-grow:1;background-color:green;color:#fff'>3
</view>
-
</view>
-
</view>
执行结果如下：
3）上下混合布局
示例代码如下：
-
<view style="display:flex;flex-direction:column;height:400rpx;">
-
<view style='background-color:red;height:150rpx;color:#fff;'>1
</view>
-
<view style='flex-grow:1;display:flex;'>
-
<view style="flex-grow:1;background-color:blue;color:#fff;">2
</view>
-
<view style='flex-grow:1;background-color:green;color:#fff'>3
</view>
-
</view>
-
</view>
执行结果为：
通过上面案例可以发现，任何复杂的布局都是通过不断嵌套<view/>实现的，在小程序中使用<view/>就像我们在HTML使用<div/>一样边界，通过<view/>我们可以构建我们想要的任何页面。
Scroll-view组件
在布局过程中，我们需要一些容器具备可滑动的能力，尽管我们可以通过给<view/>设置overflow:scroll属性来实现，但由于小程序实现原理中没有DOM概念，我们没法直接监听<view/>滚动、触顶、触底等事件，这时便需要使用<scroll-view/>。<scroll-view/>在<view/>基础上增加了滚动相关属性，通过设置这些属性，我们能响应滚动相关事件。<scroll-view/>属性如下：
- scroll-x:允许横向滚动，默认为false
- scroll-y:允许纵向滚动，默认为false
- upper-threshold:距顶部/左边多远时(单位px)，触发scrolltoupper事件，默认值为50
- lower-threshold:距底部/右边多远时(单位px)，触发scrolltolower事件，默认值为50
- scroll-top:设置竖向滚动条位置
- scroll-left:设置横向滚动条位置
- scroll-into-view:值应为某子元素id，滚动到该元素时，元素顶部对齐滚动区域顶部
- bindscrolltoupper:滚动到顶部/左边，会触发scrolltoupper事件
- bindscrolltolower:滚动到底部/右边，会触发scrolltolower事件
- bindscroll:滚动时触发，event.detail = {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}
目前，有些组件不能在<scroll-view/>中使用:<textarea/>、<video/>、<map/>、<convas/>
下面我们创建一个可滚动视图区，示例代码如下：
-
<scroll-view class="scroll-container" upper-threshold="0"
-
lower-threshold=
"100"
scroll-into-view=
"{{toView}}"
-
bindscroll=
"scroll"
bindscrolltolower=
"scrollToLower"
-
bindscrolltoupper=
"scrollToUpper"
scroll-y=
"true"
-
scroll-top=
"{{scrollTop}}">
-
<view id='item-1' class='scroll-item bg-red'>1
</view>
-
<view id='item-2' class='scroll-item bg-blue'>2
</view>
-
<view id='item-3' class='scroll-item bg-red'>3
</view>
-
<view id='item-4' class='scroll-item bg-blue'>4
</view>
-
<view id='item-5' class='scroll-item bg-red'>5
</view>
-
<view id='item-6' class='scroll-item bg-blue'>6
</view>
-
</scroll-view>
-
<view class='act'>
-
<button bindtap='scrollToTop'>点击滚动到顶部
</button>
-
</view>
-
.scroll-container{
-
border:solid
1px;
-
height:
2400rpx;
-
}
-
.scroll-container
.scroll-item{
-
height:
300rpx;
-
width:
120%;
-
}
-
.bg-blue{
background-color:
#87CEFA;
height:
400rpx;}
-
.bg-red{
background-color:
#FF6347;
height:
400rpx;}
-
.act{
padding:
10px;}
-
-
Page({
-
data: {
-
toView:
'item3'
//第一次渲染时,<scroll-view>默认滚动到id值为"item-3""区域
-
},
-
scrollToUpper:
function(){
-
console.log(
'触发到滚动顶部事件');
-
},
-
scrollToLower:
function(){
-
console.log(
"触发滚动到底部事件");
-
},
-
//点击按钮时，滚动到顶部
-
scroll:
function(){
-
console.log(
'触发了滚动事件');
-
},
-
scrollToTop:
function(){
-
this.setData({
-
scrollTop:
'0'
-
});
-
}
-
});
执行结果如下：
滑块视图组件
滑块视图容器在前端开发中是一个常见组件，利用它我们可以实现轮播图、滑动页面、图片预览效果等。一个完整的滑块视图组件由<swiper/>和<swiper-item/>连个标签组成，它们不能单独使用，一个<swiper/>中只能放置一个或多个<swiper-item>，放置其他节点会被删除，<swiper-item/>内部能放置任何组件，默认宽高自动设置为100%。<swiper-item/>组件作为容器没有任何特殊属性，<swiper/>组件属性如下：
- indicator-dots:是否显示面板指示点，默认值为false
- autoplay:是否自动切换，默认为false
- current:当前所在页面的index，默认值为0
- interval:自动切换时间间隔，默认值为5000
- duration:滑动动画时长，默认值为1000
- circular:是否采用衔接动画，默认值为false
- bindchange:current改变时会触发change事件，event.detail={current:current};
1)基本轮播图
示例代码如下：
-
<swiper
class=
"banner" indicator-dots=
"true" autoplay=
"{{autoplay}}"
-
current=
'0' interval=
'2000' duration=
'300' bindchange=
'change'>
-
<block wx:for="{{sliderList}}">
-
<swiper-item class="{{item.className}}">{{item.name}}
</swiper-item>
-
</block>
-
</swiper>
-
<view>
-
<button bindtap='play'>暂停|播放</button>
-
<
/view>
-
.banner{
height:
400px;
background-color:
#ddd;}
-
.bg-blue{
background-color:
#87CEFA;}
-
.bg-red{
background-color:
#FF6347;}
-
.bg-green{
background-color:
#43CD80;}
-
Page({
-
data:{
-
autoplay:
true,
-
sliderList:[
-
{
className:
'bg-red',
name:
'slider1' },
-
{
className:
'bg-blue',
name:
'slider2' },
-
{
className:
'bg-green',
name:
'slider3' }
-
]
-
},
-
play:
function(){
-
this.setData({
-
autoplay:!
this.data.autoplay
-
});
-
},
-
change:
function(){
-
console.log(
'执行了滚动');
-
}
-
});
执行结果如下：
2）自定义轮播图
<swiper/>默认组件中不能提供面板指示点的样式设置，而在轮播组件中，我们常常需要设置自定义面板指示点，这时可以通过bindchange事件来实现
示例代码如下：
-
<swiper indicator-dots=
"{{indicatorDots}}" autoplay=
"{{autoplay}}" interval=
"{{interval}}" duration=
"{{duration}}">
-
<block wx:for="{{image}}">
-
<swiper-item>
-
<image style='width:100%;height:100;' src='{{item}}'>
</image>
-
</swiper-item>
-
</block>
-
</swiper>
-
Page({
-
-
data:{
-
image:[
-
'images/un1.jpg',
-
'images/un2.jpg',
-
'images/un3.jpg'
-
],
-
indicatorDots:
true,
//是否显示面板指示点
-
autoplay:
true,
//是否自动切换
-
interval:
3000,
//自动切换时间间隔
-
duration:
1000,
//滑动动画时长
-
-
}
-
});
执行结果如下：
