微信小程序官方组件展示之视图容器scroll-view

功能描述：
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
属性说明：
WebView

Skyline
组件差异

1. 默认只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
2. 横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
3. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
   
   Bug & Tip
4. tip: 基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
5. tip: scroll-into-view 的优先级高于 scroll-top
6. tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
7. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

8. tip: scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画
   示例代码：
   JAVASCRIPT

   const order = ['demo1', 'demo2', 'demo3']
   Page({
   onShareAppMessage() {
    return {
      title: 'scroll-view',
      path: 'page/component/pages/scroll-view/scroll-view'
    }
   },
   data: {
    toView: 'green'
   },
   upper(e) {
    console.log(e)
   },
   lower(e) {
    console.log(e)
   },
   scroll(e) {
    console.log(e)
   },
   scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
   },
   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
    })
   }
   })

WXML：

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" 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>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</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>
    </view>
  </view>
</view>

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;
}

版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，我们第一时间处理。
原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html