微信小程序之scroll-view

微信小程序官方的Demo对于我难点就在于把scroll-x 的子部件给弄到一排，还的，能用按钮控制出他的移动,官方Demo恰好没给出wxss代码，下面我给出实现代码注意 white-space:nowrap千万不能少,其他的写法虽然能把他们弄到水平一排，但是他们大部分都是不能水平滚动，或者通过按钮控制元素滚动
效果图:

<scroll-view class="scroll-view-V" scroll-y style="height: 200px" scroll-into-view="{{CurrVtoView}}">
  <view id="green" class="scroll-view-V-item bc_green">view>
  <view id="red" class="scroll-view-V-item bc_red">view>
  <view id="blue" class="scroll-view-V-item bc_blue">view>
  <view id="yellow" class="scroll-view-V-item bc_yellow">view>
scroll-view>
<view>
  <button bindtap="downtap">下翻button>
view>
<scroll-view class="scroll-view-H" scroll-x style=" display:flex; width:100%;white-space:nowrap" scroll-into-view="{{CurrHtoView}}"> 
    <view id="green" class="scroll-view-H-item bc_green">view>
    <view id="red" class="scroll-view-H-item bc_red">view>
    <view id="blue" class="scroll-view-H-item bc_blue">view>
    <view id="yellow" class="scroll-view-H-item bc_yellow">view>
scroll-view>
<view>
  <button bindtap="righttap">右翻button>
view>

/* pages/begin/begin.wxss */
.bc_green {
  background-color: green;
  height: 100px;
}
.bc_red {
  background-color: red;
  height: 100px;
}
.bc_yellow {
  background-color: yellow;
  height: 100px;
}
.bc_blue {
  background-color: blue;
  height: 100px;
}

.scroll-view-H {
  margin-top:30px;
}
.scroll-view-H-item {
  width:200px;
  display:inline-block;
}

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

  /**
   * 页面的初始数据
   */
  data: {
    CurrVtoView:'green',
    CurrHtoView:'green',
    scrollTop:100
  },
  downtap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (this.data.CurrVtoView === order[i]) {
        break;
      }
    }
    this.setData(
      {
        CurrVtoView: order[i + 1]
      }
    )
    console.log(this.data.CurrVtoView)
  },
  righttap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (this.data.CurrHtoView === order[i]) {
        break;
      }
    }
    this.setData(
      {
        CurrHtoView: order[i + 1]
      }
    )
    console.log(this.data.CurrHtoView)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})