[wechat applet] basic horizontal and vertical scroll view (95/100)

Layout ：

<!--pages/scrollView/scrollView.wxml-->
<text>Vertical Scroll\n Roll vertically </text>
<scroll-view scroll-y="true" style="height: 500rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{
    {toView}}" scroll-top="{
    {scrollTop}}">
  <view id="demo1" class="scroll-view-item demo-text-1"></view>
  <view id="demo2" class="scroll-view-item demo-text-2"></view>
  <view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>
<view class="page-section-title">
  <text>Horizontal Scroll\n Roll horizontally </text>
</view>
<view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>

style ：

/* pages/scrollView/scrollView.wxss */
.page-section-spacing{
    
  margin-top: 60rpx;
}
.scroll-view_H{
    
  white-space: nowrap;
}
.scroll-view-item{
    
  height: 300rpx;
}
.scroll-view-item_H{
    
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

The model and control are as follows ：

// pages/scrollView/scrollView.js
Page({
    

  /** *  Initial data of the page  */
  data: {
    
    toView: 'green'
  },
  tap() {
    
    for (let i = 0; i < order.length; ++i) {
    
      if (order[i] === this.data.toView) {
    
        this.setData({
    
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

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

  lower(e) {
    
    console.log(e)
  },

  scroll(e) {
    
    console.log(e)
  },
  scrollToTop() {
    
    this.setAction({
    
      scrollTop: 0
    })
  },
  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    

  },

Different from the official website , However, I still try to simplify . Simple points are better than complex wisdom