小程序：scroll-view案例讲解

先把文档的链接为大家附上https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
然后把案例的代码甩上

• wxml

  vertical scroll
  
    
    
    
    
  

  
    click me to scroll into view 
    click me to scroll
  


  horizontal scroll
  
    
    
    
    
  

• wxss

/* scroll-view/scroll-view.wxss */
.scroll-view-item{
  width: 100%;
  height: 100%;
}
.bc_green{
  background: green;
}
.bc_red{
  background: red;
}
.bc_yellow{
  background: yellow;
}
.bc_blue{
  background: blue;
}

• js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  tap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function (e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

• 效果如图

我门主要需要了解的代码部分如下

1. 首先它定义了 scroll-y为true 允许纵向滚动
2. bindscrolltoupper=“upper” bindscrolltolower=“lower” 绑定了到底部和到顶部所需要触发的事件（对于这里的绑定的事件根据个人案例的需求来做）
3. scroll-into-view="{{toView}}" scroll-top="{{scrollTop}} 这里通过确定试图的初始id，这里的id是与下面view中的id相对应的，从js中的data中获取数据，所以初始位置是红色并且于容器底部相距100px；
4. js中的按钮绑定事件代码分别是：到下个view 以及 在原来的基础上下滑10px
5. 最后大家如果自己有兴趣可以在上面的代码中完善 横向滚动

注意:在做横向滚动的时候，如果你设置了高度：需要在scroll-view中添加 white-space: nowrap; 在scroll的item中添加 display: inline-block;

• Bug & Tip
  tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
  tip: scroll-into-view 的优先级高于 scroll-top
  tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
  tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部