微信小程序-组件-scorllview

1529893754831.jpg

1. 纵向滚动

vertical scroll








    click me to scroll

.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;}

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. 横向滚动

horizontal scroll
  
    
    
    
    
  

.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