小程序开发之组件scroll-view（可滚动视图区域）

scroll-view

scroll-view可滚动视图区域。

scroll-view属性

如果使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height。

注：

1. 请勿在 scroll-view 中使用textarea、map、canvas、video组件
2. scroll-into-view 的优先级高于 scroll-top
3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

例如：
index.wxml

<view class="section">
  <view class="section_title">滚动视图scroll-view</view>
  <scroll-view
    scroll-y                  
    style="height: 200px;"
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    bindscroll="scroll"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
  >
  <!-- 
    scroll-y                      //允许纵向滚动             
    style="height: 200px;"        //组件的内联样式
    bindscrolltoupper="upper"     //滚动到顶部，会触发 scrolltoupper 事件
    bindscrolltolower="lower"     //滚动到底部，会触发 scrolltolower 事件
    bindscroll="scroll"           //滚动时触发，计算坐标 event.detail 
    scroll-into-view="{{toView}}" //值为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素
    scroll-top="{{scrollTop}}"    //设置竖向滚动条位置
  -->
    <view id="green" class="bg_green"></view>
    <view id="red" class="bg_red"></view>
    <view id="yellow" class="bg_yellow"></view>
    <view id="blue" class="bg_blue"></view>
  </scroll-view>
</view>

index.wxss

.flex-wrp {display: flex;}
.bg_green {background: green;width:100px; height: 100px;}
.bg_red {background: red;width:100px; height: 100px;}
.bg_blue {background: blue;width:100px; height: 100px;}
.bg_yellow {background: yellow;width:100px; height: 100px;}

index.js

const order = ['red', 'yellow', 'blue', 'green', 'red']

Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper(e) {
    console.log(e)
  },
  lower(e) {
    console.log(e)
  },
  scroll(e) {
    console.log(e)
  },
  tap(e) {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

视图展示：