支付寶小程序組件 可滾動視圖區(qū)域·scroll-view

可滾動視圖區(qū)域。scroll-view 滾動條無法隱藏，可以全局禁用滾動，但是無法禁用 scroll-view 中的滾動距離展示。

說明：

• 使用豎向滾動時，需要指定固定高度，可通過 acss 設置 height。
• scroll-into-view 的優(yōu)先級高于 scroll-top。
• 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，無法觸發(fā) onPullDownRefresh 下拉刷新功能。
• scroll-view 不支持 scroll-x=true 和 scroll-y=true 同時生效，只能用一個。可以使用 view 設置 disable-scroll 為 true 禁止滑動。
• scroll-view 滿屏時，無法滑動頁面，會導致導航欄滑動透明失效?？赏ㄟ^ my.setNavigationBar 設置導航欄樣式：導航欄標題、導航欄背景色、導航欄底部邊框顏色、導航欄左上角 logo 圖片。
• 可以監(jiān)聽 ScrollView 父 view 的觸摸事件控制 ScrollView 的滑動來達到取消慣性的效果。
• scroll-view 組件不支持自定義下拉刷新以及滾動條。

掃碼體驗

示例代碼

// API-DEMO page/component/scroll-view.json
{
  "defaultTitle": "Scroll View"
}
<!-- API-DEMO page/component/scroll-view.axml -->
<view class="page">
  <view class="page-description">可滾動視圖區(qū)域</view>
  <view class="page-section">
    <view class="page-section-title">vertical scroll</view>
    <view class="page-section-demo">
      <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
    <view class="page-section-btns">
      <view onTap="tap">next</view>
      <view onTap="tapMove">move</view>
      <view onTap="scrollToTop">scrollToTop</view>
    </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 bc_blue"></view>
        <view id="red2"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
        <view id="green2" class="scroll-view-item_H bc_green"></view>
      </scroll-view>
    </view>
  </view>
</view>
// API-DEMO page/component/scroll-view.js
const order = ['blue', 'red', 'green', 'yellow'];


Page({
  data: {
    toView: 'red',
    scrollTop: 100,
  },
  upper(e) {
    console.log(e);
  },
  lower(e) {
    console.log(e);
  },
  scroll(e) {
    this.setData({
      scrollTop: e.detail.scrollTop,
    });
  },
  scrollEnd() {


  },
  scrollToTop(e) {
    console.log(e);
    this.setData({
      scrollTop: 0,
    });
  },
  tap(e) {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        const next = (i + 1) % order.length;
        this.setData({
          toView: order[next],
          scrollTop: next * 200,
        });
        break;
      }
    }
  },
  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10,
    });
  },
});
/* API-DEMO page/component/swiper-view.acss */
.scroll-view_H {
  white-space: nowrap;
  display:flex;
}
.scroll-view-item {
  height: 200px;
}
.scroll-view-item_H {
  flex-shrink:0;
  flex-grow:0;
  width: 300px;
  height: 200px;
}

屬性

常見問題

為何 scroll-view 在 popup 擴展組件中無法滑動？

popup 組件上加上 disableScroll={{false}} 屬性才能滑動

為何使用 swiper 嵌套 scroll-view，scroll-view無法滑動？

swiper 和 scroll-view 均為滑動組件，如果必須使用，建議不做嵌套或者讓 scroll-view 阻止 touch 事件冒泡即可：catchTouchStart、catchTouchMove。

如何監(jiān)聽 scroll-view 滾動到底部？

可以直接在 onScroll 方法中進行處理，使用 onScrollToLower 監(jiān)聽 scroll-view 的滾動高度來進行判斷是否滑動到了底部。 scrollheight 是 scroll-view 里面所有 view 的高度和，scrollTop 是滾動的值； scrolltop 的值等于 scrollheight-scrollview 視圖的高度。

為何在頁面有蒙層的情況下，外層滑動到底部，會導致蒙層也能滑動？

在外層 scroll-view 添加屬性 trap-scroll。