本文为菜鸟窝编辑吴佳林的连载。
小程序的视图容器主要有三种，分别是 view，scroll-view，swiper。下面分别介绍一下这三种视图容器。
view
在之前的介绍里面，我们很多举例都是有关 view ，大家应该都比较熟悉了，接触过前端的，应该对 div 不陌生，view 的功能就跟 div 非常相似。 view 有很多个属性,分别是
-
hover : 是否启用点击态，默认是false。
设置这个属性就是讲视图设置成可点击之后的样式。设置形式为
<view hover="{{false}}">123</view> -
hover-class：指定按下去的样式类，默认值是none。设置上面
hover这个属性之后，你会发现其实没有样式效果，这是因为没有设置个属性。这个属性决定了 view 按下去之后的样式。设置形式为<view hover="{{true}}" hover-class="red">123</view>,其中red是一个wxss的样式。.red{ background: red } -
hover-start-time:按住后多久出现点击态，单位毫秒。
- hover-stay-time：手指松开后点击态保留时间，单位毫秒
scroll-view
可滚动视图区域。scroll-view 就是一个大的可滚动的布局里面可以包裹小布局，形式如下。
```
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>
```
介绍一下各个属性
-
scroll-x ：是否允许横向滚动，默认是false。形式
<scroll-view scroll-x={{false}}> -
scroll-y ：是否允许纵向滚动。其他方面跟
scroll-x一样。 -
upper-threshold： 距顶部/左边多远时（单位px），触发 scrolltoupper 事件。
前半部分不难理解，就是一个距离的问题，形式是
upper-threshold="100",后面的事件，到底如何触发呢。这就涉及到到另外一个属性bindscrolltoupper，形式是bindscrolltoupper='upper'这个upper就是定义在js文件里面的函数。
Page({
data: {
},
upper: function (e) {
console.info("1111")
}
})
也就是这个当距顶部/左边达到一定的距离的时候，就会触发bindscrolltoupper绑定的一个js函数。
-
lower-threshold：距底部/右边多远时（单位px），触发 scrolltolower 事件。触发的是
bindscrolltolower绑定的函数。 -
scroll-top ：设置竖向滚动条位置
-
scroll-left： 设置横向滚动条位置
- scroll-into-view：值应为某子元素id（id不能以数字开头），则滚动到该元素，元素顶部对齐滚动区域顶部，只支持纵向滚动
- scroll-with-animation：在设置滚动条位置时使用动画过渡
- enable-back-to-top： iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
- bindscrolltoupper:滚动到底部/右边，会触发 scrolltolower 事件
- bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件
-
bindscroll ：滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindscroll这个函数要会在滚动的时候一直调用函数，所以要小心性能问题。
关注公众号免费领取" N套客户端实战项目教程"
