小程序之scroll-view

2016-11-07
#微信小程序

这篇文章将向大家介绍小程序控件之scroll-view

scroll-view 的属性

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

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

示例代码

  • 选中pages文件夹下的detail文件夹下的detail.wxml文件,键入如下代码：

    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
    <!--scroll-view组件-->
    <block wx:if="{{index == 1}}">
        <!--横向滚动-->
        <view class="menu">
            <scroll-view scroll-x="true" class="top-nav">
                <view class="top_btn top_btn_select">栏目1</view>
                <view class="top_btn">栏目2</view>
                <view class="top_btn">栏目3</view>
                <view class="top_btn">栏目4</view>
                <view class="top_btn">栏目5</view>
                <view class="top_btn">栏目6</view>
                <view class="top_btn">栏目7</view>
                <view class="top_btn">栏目8</view>
            </scroll-view>
        </view>
        
        <!--竖向滚动-->
        <scroll-view scroll-y="true" class="content">
            <view class="cell">cell1</view>
            <view class="cell">cell2</view>
            <view class="cell">cell3</view>
            <view class="cell">cell4</view>
            <view class="cell">cell5</view>
            <view class="cell">cell6</view>
            <view class="cell">cell7</view>
            <view class="cell">cell8</view>
        </scroll-view>
       
    </block>

  • 选中pages文件夹下的detail文件夹下的detail.wxss文件,键入如下代码：

    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-view 组件样式
    */
    /*
    水平
    */
    .menu{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      width: 100%;
      background: #fff;
      border-top:#eee solid 1px;
      border-bottom:#eee solid 1px;
    }
    .top-nav{
        white-space: nowrap;
        display: flex;
    }
    .top_btn {
        display: inline-block;
        margin: 10px;
        font-size: 1rem;
        color: gray;
    }
    .top_btn_select {
        color: red;
        font-size: 1.5rem;
    }
    /*
    垂直
    */
    .content{
        height: 100%;
        width: 100%;
        margin-top:45px; 
    }
    .cell {
        display: inline-block;
        margin: 10px 20px;
        width: 90%;
        height: 200px;
        border: #e9e9e9 solid 1px;
        text-align: center;
        background-color: red;
        color: white;
    }

本文代码

请查看此目录下面的 wx4 文件夹