小程序 滚动条

一、scroll-view

如何使用 scroll-view 详见：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

 

二、竖直滚动条

案例

// index.wxml

<!-- 竖直滚动条 -->

<scroll-view 
     class="scroll" upper-threshold="50" lower-threshold="50" scroll-top="20"
     scroll-y scroll-with-animation enable-back-to-top 
     scroll-into-view="" bindscrolltoupper="" bindscrolltolower="" bindscroll=""
>
     <view class="box box01"></view>
     <view class="box box02"></view>
     <view class="box box03"></view>
     <view class="box box04"></view>
</scroll-view>

// index.wxss

.scroll{
    height: 1000rpx;
    margin-top:150rpx;
}
.box{
    width: 100%;
    height: 400rpx;
}
.box01{
    background: rgb(202, 20, 20);
}
.box02{
    background: rgb(19, 179, 27);
}
.box03{
    background: rgb(4, 79, 150);
}
.box04{
    background: rgb(246, 250, 10);
}

效果 

 

三、水平滚动条

// index.wxml

<!-- 水平滚动条 -->
<scroll-view 
    class="scroll_col" upper-threshold="50" lower-threshold="50" scroll-left="20" 
    scroll-x scroll-with-animation 
    scroll-into-view="" bindscrolltoupper="" bindscrolltolower="" bindscroll=""
>
    <view class="scroll_col_box">
        <view class="box_col box04"></view>
        <view class="box_col box03"></view>
        <view class="box_col box02"></view>
        <view class="box_col box01"></view>
    </view>
</scroll-view>

// index.wxss

.scroll_col{
    width:1000rpx;
    height:400rpx;
    margin-top: 150rpx;
}
.scroll_col_box{
    width: 2000rpx;
}
.box_col{
    display: inline-block;
    width:400rpx;
    height: 400rpx;
}
.box01{
    background: rgb(202, 20, 20);
}
.box02{
    background: rgb(19, 179, 27);
}
.box03{
    background: rgb(4, 79, 150);
}
.box04{
    background: rgb(246, 250, 10);
}

效果

 

四、水平竖直综合滚动条

它的实现就是在 “竖直滚动条” 的基础上，添加了一些文字，使得文字的内容撑起盒子的大小，直到其宽度超过 scroll-view 的宽度，就实现了以下效果：