<template>
	<scroll-view style="flex: 1;">
		<button @click="switchDisplay">显示内容</button>
		<view v-show="contentVisible" style="flex: 1;">
			<list-view style="height: 200px;">
				<sticky-section v-for="(group, _) in groupItems">
					<sticky-header style="background-color: antiquewhite;">
						<text class="group-title">{{ group.title }}</text>
					</sticky-header>
					<list-item class="content-group">
						<view class="content-box">
							<text class="item" v-for="index in 20" >{{index}} item信息</text>
						</view>
					</list-item>
				</sticky-section>
			</list-view>
		</view>
	</scroll-view>
</template>

<script>

	type ItemGroup = {
		title : string
	}
  export default {
    data() {
        return {
          groupItems: [] as ItemGroup[],
          contentVisible: false
        }
    },
    methods: {
      switchDisplay() {
      	if (this.contentVisible) {
      		this.contentVisible = false
      	} else {
      		this.contentVisible = true
      	}

      	if (this.contentVisible) {
      		setTimeout(() => {
      			this.groupItems = [{
      				title: 'sticky-header'
      			}] as ItemGroup[]
      		}, 200)
      	} else {
      		setTimeout(() => { // 面板隐藏，释放内存
      			this.groupItems = []
      		}, 200)
      	}
      }
    }
  }

</script>

<style lang="scss">
	.group-title {
		font-weight: bold;
		font-size: 14px;
		color: #4B515A;
		padding: 8px 0;
		background-color: #FFFFFF;
	}
	.content-group {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.content-box {
		width: 100%;
		position: relative;
	}
  .item{
    padding: 10px 0;
    background-color: #efeda7;
  }
</style>