EveryLike/pages/component/nested-scroll-body/nested-scroll-body.uvue

<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" @scrollend="scrollEnd">
    <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" :refresher-enabled="false">
          <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,
        testScrollTop: 0
      }
    },
    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
      },
      scrollEnd(e : UniScrollEvent) {
        this.testScrollTop = e.detail.scrollTop
        console.log('testScrollTop:', this.testScrollTop)
      }
    }
  }
</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>