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

一.知识点 
可滚动视图区域 scroll-view

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

1.index.wxml

1. [html] view plain copy 在CODE上查看代码片派生到我的代码片
2. <view class="section">
3. <view class="section__title">vertical scroll竖直方向</view>
4. <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
5. <view id="green" class="scroll-view-item bc_green"></view>
6. <view id="red" class="scroll-view-item bc_red"></view>
7. <view id="yellow" class="scroll-view-item bc_yellow"></view>
8. <view id="blue" class="scroll-view-item bc_blue"></view>
9. </scroll-view>
10. <view class="btn-area">
11. <button size="mini" bindtap="tapMove">click me to scroll</button>
12. </view>
13. </view>

2.index.wxss

1. [html] view plain copy 在CODE上查看代码片派生到我的代码片
2. .scroll-view_H{
3. white-space: nowrap;
4. }
5. .scroll-view-item{
6. height: 200px;
7. }
8. .scroll-view-item_H{
9. display: inline-block;
10. width: 100%;
11. height: 200px;
12. }
13. #green{
14. background:green;
15. }
16. #red{
17. background:red;
18. }
19. #yellow{
20. background:yellow;
21. }
22. #blue{
23. background:blue;
24. }

index.js

1. [html] view plain copy 在CODE上查看代码片派生到我的代码片
2. <span style="font-family:Comic Sans MS;">var order = ['red', 'yellow', 'blue', 'green', 'red']
3. Page({
4. data: {
5. toView: 'green',
6. scrollTop: 100,
7. scrollLeft: 0
8. },
9. //滚动条滚到顶部的时候触发
10. upper: function(e) {
11. console.log("顶部");
12. },
13. //滚动条滚到底部的时候触发
14. lower: function(e) {
15. console.log("底");
16. },
17. //滚动条滚动后触发
18. scroll: function(e) {
19. console.log("滚动");
20. },
21. //通过设置滚动条位置实现画面滚动
22. tapMove: function(e) {
23. this.setData({
24. scrollTop: this.data.scrollTop + 10
25. })
26. }
27. })
28. </span>