Content Table
2017-02-07

小程序滚动

微信小程序使用 scroll-view 实现滚动区域，有水平滚动和垂直滚动，scroll-view 的结构如下:

1
2
3
4
5
<scroll-view>
    <view></view>
    ...
    <view></view>
</scroll-view>

设置 WXSS 的时候，需要注意使用 font-size: 0 和 white-space: nowrap。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 文件名: scroll.wxml -->

<view style="padding: 10rpx;">
    <view class="section">
        <view class="section__title">水平滚动</view>
        <scroll-view id="horizontal-scroll-view" scroll-x="true">
            <view class="scroll-view-item bc_green"></view>
            <view class="scroll-view-item bc_red"></view>
            <view class="scroll-view-item bc_yellow"></view>
            <view class="scroll-view-item bc_blue"></view>
        </scroll-view>
    </view>

    <view class="section">
        <view class="section__title">垂直滚动</view>
        <scroll-view id="vertical-scroll-view" scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
            <view id="green" class="scroll-view-item bc_green"></view>
            <view id="red" class="scroll-view-item bc_red"></view>
            <view id="yellow" class="scroll-view-item bc_yellow"></view>
            <view id="blue" class="scroll-view-item bc_blue"></view>
        </scroll-view>
    </view>

    <view class="btn-area">
        <button size="mini" bindtap="tap">click me to scroll into view</button>
        <button size="mini" bindtap="tapMove">click me to scroll</button>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- 文件名: scroll.wxss -->
/* 水平滚动 */
#horizontal-scroll-view {
    height: 150px;
    white-space: nowrap; /* 很重要，否则会换行 */
}

#horizontal-scroll-view .scroll-view-item {
    width: 300rpx;
    height: 100%;
    display: inline-block;
}

/* 垂直滚动 */
#vertical-scroll-view {
    height: 150px; /* 必须设置固定的高度才能出现滚动效果 */
    font-size: 0; /* 去掉 item 之间的空白，因为有一个空格 */
}

#vertical-scroll-view .scroll-view-item {
    width: 100%;
    height: 200rpx;
    display: inline-block;
}

/* 其他 */
.section {
    margin-bottom: 8rpx;
}

button {
    width: 100%;
}

.bc_red {
    background-color: #34A7FF;
}

.bc_green {
    background-color: #2FC9E8;
}

.bc_blue {
    background-color: #41FFEC;
}

.bc_yellow {
    background-color: #2FE8A1;
}

水平 scroll-view 需要使用 white-space: nowrap 防止 view 换行。
垂直 scroll-view 需要使用 font-size: 0 去掉 view 之间的空格占据的空间，并且需要给 scroll-view 设置一个固定的高度，否则看不到滚动效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 文件名: scroll.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
        })
    }
})