微信小程序——scroll-view组件（可滚动视图）

scroll-view可滚动视图

scrollview.wxml文件

<view>
  <view>
    <text>vertical scroll</text>
    <scroll-view scroll-y class="scroll-view-y" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" 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>
    <button type="primary" bindtap="tapMove">滚动</button>
  </view>

  <view>
    <text>horizontal scroll</text>
    <scroll-view scroll-x style="width:100%">
      <view class="scroll-view_H">
        <view class="scroll-view-item_H bc_green"></view>
        <view class="scroll-view-item_H bc_red"></view>
        <view class="scroll-view-item_H bc_yellow"></view>
        <view class="scroll-view-item_H bc_blue"></view>
      </view>
    </scroll-view>
  </view>
</view>>

scrollview.wxss文件

.scroll-view-item{
  height: 80px;
  width: 400px;
}
.scroll-view_H{
  display: flex;
  height: 80px;
  width: 500px;
  flex-direction: row; 
}
.scroll-view-item_H{
  width: 200px;
  height: 100px;
}
.bc_green{
  background: green;
}
.bc_red{
  background: red;
}
.bc_yellow{
  background: yellow;
}
.bc_blue{
  background: blue;
}
.scroll-view-y{
  height: 200px;
}

scrollview.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
      toView:'green',
      scrollTop:100
  },
  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
    })
  }
})

效果图