<template>
	<view class="topic-plaza flex-common-css">
		<Nav class="nav-class" :bgckgroundBox="!isScroll?'#141414':'#fff'" :titleColor="isScroll?'#000':'#fff'">
		</Nav>
		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
			<view class="swiper-box">
				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
					:mode="mode" :dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box">
						<swiper-item v-for="(item, index) in 3" :key="index">
							<view class="swiper-item" :class="'swiper-item'">
								<!-- <text style="color: #fff; font-size: 32px;">{{index+1}}</text> -->
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isScroll: false,
			};
		},
		mounted() {},
		methods: {
			scroll(e) {
				if (e.detail.scrollTop > 50) {
					this.isScroll = true
				} else {
					this.isScroll = false
				}
			},
			scrolltolower() {
				console.log('触底');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.topic-plaza {
		.list-scroll {
			width: 100%;
			flex: 1;
			overflow: auto;

			.swiper-box {
				width: 100%;
				height: 436rpx;
			}
		}
	}
</style>
