nested-scroll-body

# nested-scroll-body

组件类型：UniNestedScrollHeaderElement

scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点，仅支持作为 <scroll-view type='nested'> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染

# 兼容性

Web	Android	iOS
x	4.11	4.11

# 使用场景

scroll-view 嵌套场景中。内层 scroll-view 滚动时无法与外层 scroll-view 滚动衔接，无法实现嵌套滚动连贯效果。因此提供nested-scroll-body节点，存放内层 scroll-view 节点。nested-scroll-body会与外层nested-scroll-header衔接滚动逻辑实现连贯滚动。开发者只需将内层滚动节点放置nested-scroll-body节点内即可。具体用法请参考scroll-view嵌套模式

注意

nested-scroll-body 组件不支持css, 排版需求要交给子节点实现
nested-scroll-body 组件不支持复数子节点，渲染时会取其第一个子节点来渲染
nested-scroll-body 组件只能渲染在 nested-scroll-header组件下面
外层 scroll-view 的子节点中只能有一个 nested-scroll-body

# 示例

hello uni-app x

该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验

<template>
  <scroll-view style="flex:1" type="nested" direction="vertical" refresher-enabled="true" refresher-default-style="none"
    bounces="false" :refresher-triggered="refresherTriggered" @refresherpulling="onRefresherpulling"
    @refresherrefresh="onRefresherrefresh" @refresherrestore="onRefreshrestore">
    <nested-scroll-header>
      <swiper ref="header" indicator-dots="true" circular="true">
        <swiper-item v-for="i in 3" :item-id="i">
          <image src="/static/shuijiao.jpg" style="width:100% ;height: 240px;"></image>
        </swiper-item>
      </swiper>
    </nested-scroll-header>
    <nested-scroll-body>
      <view style="flex:1">
        <view style="flex-direction: row;">
          <text style="padding: 12px 15px;">nested-scroll-body</text>
        </view>
        <!-- 嵌套滚动仅可能关闭bounces效果 会影响嵌套滚动不连贯 -->
        <list-view bounces="false" id="body-list" :scroll-top="scrollTop" style="flex:1"
          associative-container="nested-scroll-view">
          <list-item v-for="key in scrollData">
            <view class="scroll-item">
              <text class="scroll-item-title">{{key}}</text>
            </view>
          </list-item>
        </list-view>
      </view>
      <text>不会渲染，因为 nested-scroll-body 只会渲染第一个子节点</text>
    </nested-scroll-body>
    <!-- 支持自定义样式下拉刷新slot组件 -->
    <refresh-box slot="refresher" :state="state"></refresh-box>
  </scroll-view>
</template>

<script>
  import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';
  export default {
    components: { refreshBox },
    data() {
      return {
        scrollData: [] as Array<string>,
        scrollTop: 0,
        refresherTriggered: false,
        pullingDistance: 0,
        resetting: false
      }
    },
    computed: {
      state() : number {
        if (this.resetting) {
          return 3;
        }
        if (this.refresherTriggered) {
          return 2
        }
        if (this.pullingDistance > 45) {
          return 1
        } else {
          return 0;
        }
      }
    },
    onLoad() {
      let lists : Array<string> = []
      for (let i = 0; i < 30; i++) {
        lists.push("item---" + i)
      }
      this.scrollData = lists
    },
    methods: {
      onRefresherpulling(e : RefresherEvent) {
        this.pullingDistance = e.detail.dy;
      },
      onRefresherrefresh() {
        this.refresherTriggered = true
        setTimeout(() => {
          this.refresherTriggered = false
          this.resetting = true;
        }, 1500)
      },
      onRefreshrestore() {
        this.pullingDistance = 0
        this.resetting = false;
      },
      //自动化测试使用
      testBodyScrollBy(y : number) {
        this.scrollTop = y
      }
    }
  }
</script>

<style>
  .scroll-item {
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;
    background-color: #fff;
    border-radius: 4px;
  }

  .scroll-item-title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #555;
  }

  .scroll-header-tiem {
    height: 200px;
    background-color: #66ccff;
    align-items: center;
    justify-content: center;
  }
</style>