一、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 的宽度，就实现了以下效果：
