lcoco/pages/circle/topic.vue

<template>
	<view class="topic flex-common-css">
		<Nav class="nav-class" :bgckgroundBox="!isScroll?'transparent':'#fff'" :titleColor="isScroll?'#000':'#fff'">
		</Nav>
		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
			<view class="head-bg-img">
				<image class="bg-img" src="@/static/img/circle/1.png" mode=""></image>
				<view class="placeholder-box">
					<view class="placeholder"></view>
				</view>
			</view>
			<view class="content-box">
				<view class="title-box">
					<view class="title-box-left">
						<view
							class="icon sys-height-40 sys-radius-round sys-background-black sys-color-white sys-weight-600">
							#
						</view>
						<view class="title-name sys-weight-600">
							我最爱的OOTD
						</view>
					</view>
					<view
						class="title-box-right sys-background-black sys-radius-12 sys-color-white sys-size-28 sys-height-56">
						关注
					</view>
				</view>
				<view class="list-type">
					<view class="list-type-l">
						<view class="type sys-size-28 sys-weight-600" @click="selectType(1)"
							:class="typeNum == 1?'sys-color-black type-border':'sys-color-gray-9'">
							最新
						</view>
						<view class="type sys-size-28 sys-weight-600" @click="selectType(2)"
							:class="typeNum == 2?'sys-color-black type-border':'sys-color-gray-9'">
							最热
						</view>
					</view>
					<view class="list-type-r sys-size-24 sys-color-gray-9">
						1573条动态
					</view>
				</view>
				<MyPraise class="my-praise" :tagNum="1"></MyPraise>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MyPraise from "@/pages/my/model/my-praise";
	export default {
		components: {
			MyPraise,
		},
		data() {
			return {
				isScroll: false,
				typeNum: 1,
			};
		},
		mounted() {},
		methods: {
			scroll(e) {
				if (e.detail.scrollTop > 50) {
					this.isScroll = true
				} else {
					this.isScroll = false
				}
			},
			scrolltolower() {
				console.log('触底');
			},
			selectType(num) {
				this.typeNum = num
			},
		},
	}
</script>

<style lang="scss" scoped>
	.topic {
		.nav-class {
			position: absolute;
			left: 0;
			top: 0;
		}

		.list-scroll {
			width: 100%;
			flex: 1;
			overflow: auto;

			.head-bg-img {
				width: 100%;
				height: 352rpx;
				position: relative;

				.bg-img {
					width: 100%;
					height: 100%;
				}

				.placeholder-box {
					width: 100%;
					height: 48rpx;
					// background: #333;
					position: absolute;
					bottom: 0;

					.placeholder {
						width: 100%;
						height: 100%;
						border-radius: 32rpx 32rpx 0 0;
						background: #fff;
					}
				}
			}

			.content-box {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;

				.title-box {
					width: 100%;
					height: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 32rpx;
					box-sizing: border-box;
					margin: 0 0 50rpx 0;

					.title-box-left {
						display: flex;
						align-items: center;

						.icon {
							width: 40rpx;
							margin: 0 8rpx 0 0;
							text-align: center;
						}

						.title-name {}
					}

					.title-box-right {
						padding: 0 32rpx;
					}
				}

				.list-type {
					display: flex;
					// align-items: center;
					justify-content: space-between;
					padding: 0 32rpx;
					border-bottom: 1rpx solid #F2F2F2;

					.list-type-l {
						display: flex;
						align-items: center;

						.type {
							padding: 0 0 26rpx 0;
							margin: 0 60rpx 0 0;
						}

						.type-border {
							border-bottom: 4rpx solid #000000;
						}
					}

					.list-type-r {}
				}
			}
		}
	}
</style>