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">
    <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>