微信小程序开发—(十三)可滚动视图区域 scroll-view

一.知识点

可滚动视图区域 scroll-view

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

1.index.wxml

  vertical scroll竖直方向
  
    
    
    
    
  
  
    click me to scroll
  

2.index.wxss

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
#green{
	background:green;
}
#red{
	background:red;
}
#yellow{
	background:yellow;
}
#blue{
	background:blue;
}

index.js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  //滚动条滚到顶部的时候触发
  upper: function(e) {
    console.log("顶部");
  },
  //滚动条滚到底部的时候触发
  lower: function(e) {
    console.log("底");
  },
  //滚动条滚动后触发
  scroll: function(e) {
    console.log("滚动");
  },
  //通过设置滚动条位置实现画面滚动
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

感觉手册上的事列用起来有点问题，你们呢？如果是我的问题欢迎指出来