微信小程序——scroll 滚动 滚动事件

**

scroll-view

**
1）<scroll-view></scroll-view>
滚动框架
2）

<scroll-view >
<view id='one' class='scroll-view-item bc_green'></view>
<view id='two' class='scroll-view-item bc_red'></view>
<view id='three' class='scroll-view-item bc_blue'></view>
</scroll-view>

在框架内写内容

3）wxss中写样式
white-space: nowrap;——不换行
每个项目都应设置高度

.scroll-view{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
  /* 每个项目都应设置高度 */
}
.bc_green{
  background-color: green;
}
.bc_red{
  background-color: red;
}
.bc_blue{
  background-color: blue;
}

4）样式

5）需要将内容都放到一个盒子里

<scroll-view style='height:200px;'>

给框架一个高，将内容锁定

6）滚动

<scroll-view style='height:200px;'scroll-y='true'>

框架默认滚动为flase

**

2.绑定触碰时间

**
1）wxml

<scroll-view style='height:200px;'scroll-y='true' bindscrolltoupper="upper" bindscrolltolower="lower" bind="scroll">

bindscrolltoupper——滚动到顶部/左边
bindscrolltolower——滚动到底部/右边
bindscroll——滚动的过程
2）js

  upper:function(event){
    console.log("滚动到顶部");
  },
  lower:function(event){
    console.log("滚动到底部");
  },
  scroll:function(event){
    console.log("正在滚动");
  }

3）样式