微信小程序：scroll-view

一.wxml

<view class="section">
  <view class="section_title">vertical scroll</view>
  <scroll-view scroll-y="true" style="height:200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{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="tap">click me to srolll into view</button>
    <button size="mini" bindtap="tapmove">click me to scrol</button>
  </view>
  <view class="section section_gap">
    <view class="section_title">horizontal scroll</view>
    <scroll-view class="scroll_view_H" scroll-x="true" style="width:100%;">
      <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>
  </view>
</view>

二.js

// pages/demo1/index.js
var order=['red','yellow','blue','green','red']
Page({

  /**
   * 页面的初始数据
   */
  data: {
    toView:'red',
    scrollTop:100
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  upper:function(e){
    console.info(e)
  },
  lower:function(e){
    console.info(e)
  },
  scroll:function(e){
    console.info(e)
  },
  tap:function(){
    for(var i=0;i<order.length;i++){
      if(order[i]===this.data.toView){
        this.setData({
          toView:order[i+1]
        })
        break;
      }
    }
  },
  tapMove:function(e){
    this.setData({ scrollTop: this.data.scrollTop+10})
  },
})

三.css

dth:200rpx;
  height:200rpx;
}
.bc_green{
  background-color: green;
}
.bc_red{
  background-color: red;
}
.bc_blue{
 background-color: blue;
}
.bc_yellow{
  background-color: yellow;
}
.scroll-view-item{
  height:200rpx;
}
.scroll-view-item_H{
  height:300rpx;
  width:300rpx;
  display:inline-block;//此处设置scroll-x失效问题
}
.scroll_view_H{
  white-space: nowrap;  //此处设置scroll-x失效问题
}