scroll-view 可滚动视图区域

scroll-view 可滚动视图组件，用于包裹可滚动元素，支持横向滚动和纵向滚动。

扫码体验：

示例代码

<style>
  .red {
    background-color: #f56264;
  }
  .green {
    background-color: #1fb822;
  }
  .blue {
    background-color: #24b0fc;
  }
  .yellow {
    background-color: #F0E68C;
  }
  .scroll-view-item {
    width: 100%;
    height: 100px;
    color: #fff;
  }
  .scroll-view-item_H {
    display: inline-block;
    width: 200px;
    height: 200px;
    color: #fff;
  }
  .scroll-view_H {
    white-space: nowrap;
  }
</style>
<template>
  <view class="container">
    <view class="page-section">
      <view class="page-section-title">vertical scroll</view>
      <view class="page-section-demo">
        <scroll-view 
          style="height: 200px;" 
          scroll-with-animation
          
          :scroll-y="true" 
          :scroll-into-view="toView"
          :scroll-top="scrollTop" 
          @scrolltoupper="upper" 
          @scrolltolower="lower"
          @scroll="scroll" 
        >
          <view id="blue" class="scroll-view-item blue"></view>
          <view id="red" class="scroll-view-item red"></view>
          <view id="yellow" class="scroll-view-item yellow"></view>
          <view id="green" class="scroll-view-item green"></view>
        </scroll-view>
      </view>
      <view class="page-section-btns">
        <button @click="tap">next</button>
        <button @click="tapMove">move</button>
        <button @click="tapMoveTop">scrollToTop</button>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">horizontal scroll</view>
      <view class="page-section-demo">
        <scroll-view class="scroll-view_H" :scroll-x="true" style="width: 100%">
          <view id="blue2" class="scroll-view-item_H blue"></view>
          <view id="red2" class="scroll-view-item_H red"></view>
          <view id="yellow2" class="scroll-view-item_H yellow"></view>
          <view id="green2" class="scroll-view-item_H green"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        toView: 'red',
        scrollTop: 100,
      };
    },
    methods: {
      scroll(evt) {
        console.log(evt)
      },
      upper(evt) {
        console.log(evt)
      },
      lower(evt) {
        console.log(evt)
      },
      tap(evt) {
        var order = ['red', 'yellow', 'blue', 'green', 'red'];
        for (var i = 0; i < order.length; ++i) {
          if (order[i] === this.toView) {
            this.toView = order[i + 1];
            break;
          }
        }
      },
      tapMove(evt) {
        this.scrollTop = this.scrollTop + 80;
        if (this.scrollTop > 200) {
          this.scrollTop = 0;
        }
      },
      tapMoveTop() {
        this.scrollTop = 0;
      }
    }
  };
</script>

属性