【0基础学习微信小程序】视图容器（一）

本文为菜鸟窝编辑吴佳林的连载。

小程序的视图容器主要有三种，分别是 view，scroll-view，swiper。下面分别介绍一下这三种视图容器。

view

在之前的介绍里面，我们很多举例都是有关 view ，大家应该都比较熟悉了，接触过前端的，应该对 div 不陌生，view 的功能就跟 div 非常相似。 view 有很多个属性,分别是

hover : 是否启用点击态，默认是false。

设置这个属性就是讲视图设置成可点击之后的样式。设置形式为 123
hover-class：指定按下去的样式类，默认值是none。设置上面 hover 这个属性之后，你会发现其实没有样式效果，这是因为没有设置个属性。这个属性决定了 view 按下去之后的样式。设置形式为 123 ,其中red 是一个wxss的样式。

.red{
  background: red
}

scroll-view

可滚动视图区域。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这个函数要会在滚动的时候一直调用函数，所以要小心性能问题。

【五一大促】菜鸟窝全场android项目实战课程低至五折，更有价值33元的四款热门技术免费领，17年初优惠力度最大的一次活动，有意向的童鞋不要错过
狂戳>>http://www.cniao5.com/hd/2017/51.html