微信小程序-组件-scorllview

1529893754831.jpg

1. 纵向滚动
<!--index.wxml-->
<view class="section__title">vertical scroll</view>
<scroll-view scroll-y style="height: 200px;" 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 class="btn-area">
    <button size="mini" bindtap="tapMove">click me to scroll</button>
</view>

<!--index.wxss-->
.page-section{
  margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}
.bc_yellow {background: yellow;width:100px; height: 100px;}

<!--index.js-->
Page({
  data: {

  },
  onLoad: function () {
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  tapMove: function (e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

1.gif

2. 横向滚动

<!--index.wxml-->
<view class="section__title">horizontal scroll</view>
  <scroll-view scroll-x="true" style="white-space: nowrap; display:flex ">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>

<!--index.wxss-->
.bc_green {background: green;width:200px; height: 200px;display:inline-block}
.bc_red {background: red;width:200px; height: 200px;display:inline-block}
.bc_blue {background: blue;width:200px; height: 200px;display:inline-block}
.bc_yellow {background: yellow;width:200px; height: 200px;display:inline-block}
.tap_yellow {

1.gif