一.知識點(diǎn) 
可滾動視圖區(qū)域 scroll-view

使用豎向滾動時，需要給一個固定高度，通過 WXSS 設(shè)置 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. //滾動條滾到頂部的時候觸發(fā)
10. upper: function(e) {
11. console.log("頂部");
12. },
13. //滾動條滾到底部的時候觸發(fā)
14. lower: function(e) {
15. console.log("底");
16. },
17. //滾動條滾動后觸發(fā)
18. scroll: function(e) {
19. console.log("滾動");
20. },
21. //通過設(shè)置滾動條位置實現(xiàn)畫面滾動
22. tapMove: function(e) {
23. this.setData({
24. scrollTop: this.data.scrollTop + 10
25. })
26. }
27. })
28. </span>