微信小程序基础控件，入门（2），

​

scroll-view 纵向滚动

<view class="page-section-title" bindtap='toRefreshPage' >
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 100rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>

scroll-view 横向滚动

<view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>

style 样式

.scroll-view-item{
  height: 100rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 100rpx;
}
.flex-wrp{
  display:flex;
}
.demo-text-1{
  width: 350rpx;
  background-color: aqua;
}

微信官网平台链接： ​​https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html​​

如需要可以下载源码：

demo地址：​​ 源代码地址github​​