lcoco/pages/circle/topicPlaza.vue

<template>
	<view class="topic-plaza flex-common-css">
		<Nav class="nav-class" :title="'话题广场'" :bgckgroundBox="!isScroll?'#141414':'#fff'"
			:titleColor="isScroll?'#000':'#fff'">
		</Nav>
		<scroll-view :scroll-y="true" class="list-scroll" @scroll="scroll" @scrolltolower="scrolltolower">
			<view class="sys-background-black">
				<view class="follow-box sys-size-32 sys-weight-500 sys-color-5B">
					大家都在聊
				</view>
				<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
					mode="round" :dots-styles="dotsStyles">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
						<swiper-item v-for="(item, index) in info" :key="index">
							<view @click="goPlaza(itemTwo.id)" v-for="(itemTwo,indexTwo) in item.data" :key="indexTwo"
								class="swiper-item">
								<image class="swiper-img sys-radius-8" :src="itemTwo.url" mode=""></image>
								<view class="swiper-right">
									<view class="swiper-right-name">
										<view class="sys-size-28 sys-color-white">
											# {{itemTwo.name}}
										</view>
										<view class="tp sys-color-4BC285 sys-size-28">
											投票
										</view>
									</view>
									<view class="sys-size-24 sys-color-5B">
										{{itemTwo.num}}w人参与了投票
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="list-box flex-index-css">
				<view class="list">
					<view class="list-title sys-size-32 sys-weight-600 sys-color-black">
						# 嘿，我在
					</view>
					<view class="list-num sys-color-gray-9 sys-size-28">
						{{839}}条动态
					</view>
					<view class="list-data">
						<view class="list-left">
							<view class="list-left-text">
								来了不想走
							</view>
							<view class="list-left-time">
								<view class="list-left-time-text sys-color-gray-9 sys-size-24">
									你会唱晴天吗？
								</view>
								<view class="list-time sys-color-gray-9 sys-size-24">
									13分钟前发布
								</view>
							</view>
						</view>
						<image class="list-right sys-radius-12" src="/static/img/login/2.jpg" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isScroll: false,
				info: [{
						data: [{
							name: '能接受姐弟恋吗?',
							url: '/static/img/login/2.jpg',
							num: '1.6w',
							id: 1,
						}, {
							name: '分手后还能不能做朋友投票?',
							url: '/static/img/temporary/1.png',
							num: '1.6w'
						}, {
							name: '相亲要不要AA制投票?',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							num: '1.6w'
						}]
					},
					{
						data: [{
							name: '分手后还能不能做朋友投票',
							url: '/static/img/login/2.jpg',
							num: '1.6w'
						}, {
							name: '分手后还能不能做朋友投票?',
							url: '/static/img/login/2.jpg',
							num: '1.6w'
						}, {
							name: '分手后还能不能做朋友投票?',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							num: '1.6w'
						}]
					},
					{
						data: [{
							name: '相亲要不要AA制投票?',
							url: '/static/img/login/2.jpg',
							num: '1.6w'
						}, {
							name: '相亲要不要AA制投票?',
							url: '/static/img/temporary/1.png',
							num: '1.6w'
						}, {
							name: '相亲要不要AA制投票?',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							num: '1.6w'
						}]
					}
				],
				listData: [{
					name: '相亲要不要AA制投票?',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					num: '1.6w'
				}, {
					name: '相亲要不要AA制投票?',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					num: '1.6w'
				}, {
					name: '相亲要不要AA制投票?',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					num: '1.6w'
				}],
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.4)',
					border: 'rgba(255,255,255,0.4)',
					color: '#fff',
					selectedBackgroundColor: '#fff',
					selectedBorder: '#fff',
				},
				swiperDotIndex: 0,
			};
		},
		mounted() {},
		methods: {
			scroll(e) {
				if (e.detail.scrollTop > 50) {
					this.isScroll = true
				} else {
					this.isScroll = false
				}
			},
			scrolltolower() {
				console.log('触底');
			},
			change(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			goPlaza(id) {}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-swiper__dots-box[data-v-77b53eff] {
		position: fixed;
		bottom: 10px;
		left: 77%;
		top: -77%;
		right: 0;
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

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

			.follow-box {
				padding: 40rpx 0 0 32rpx;
				width: 100%;
				height: auto;
			}

			.swiper-box {
				width: 100%;
				height: 436rpx;
				padding: 42rpx 32rpx 0;
				box-sizing: border-box;

				.swiper-item {
					display: flex;
					align-items: center;
					margin: 0 0 42rpx 0;

					.swiper-img {
						width: 88rpx;
						height: 88rpx;
						margin: 0 20rpx 0 0;
					}

					.swiper-right {
						.swiper-right-name {
							display: flex;
							align-items: center;
							margin: 0 0 4rpx 0;
						}

						.tp {
							margin: 0 0 0 8rpx;
							font-family: PangMenZhengDao-3-Regular, PangMenZhengDao-3;
						}
					}
				}
			}

			.list-box {
				padding: 40rpx 32rpx 0;
				box-sizing: border-box;

				.list {
					width: 100%;
					height: auto;
					margin: 0 0 60rpx 0;
					padding: 0 0 40rpx 0;
					border-bottom: 1rpx solid #F2F2F2;

					.list-title {
						margin: 0 0 16rpx 0;
					}

					.list-num {
						margin: 0 0 30rpx 0;
					}

					.list-data {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.list-left {
							width: 100%;

							.list-left-text {
								margin: 0 0 50rpx 0;
							}

							.list-left-time {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}
						}

						.list-right {
							width: 140rpx;
							height: 140rpx;
							margin: 0 0 0 40rpx;
							flex-shrink: 0;
						}
					}
				}
			}
		}
	}
</style>