dreamland/pages/dream/view/community.vue

<template name="community">
	<view class="home">
		<view class="card-bottom">
			<!-- 顶部分页栏 -->
			<view class="top-tab">
				<view :class="['tab-item flex-center', activeTab == index ? 'active' : '']" @tap="handleTab(index)" v-for="(item, index) in tabList" :key="index">{{ item.title }}</view>
			</view>
			<view class="scroll-wrapper">
				<!-- 漂流瓶 -->
				<view v-if="activeTab == 0">
					<view class="margin-bottom" v-for="(item, index) in cardList" :key="index">
						<y-DiaryItem :obj="item" />
					</view>
				</view>
				<!-- 聚集岛 -->
				<view v-else>
					<view class="margin-bottom" v-for="(item, index) in rightList" :key="item.id">
						<y-DiaryItem :obj="item" />
					</view>
				</view>
				<y-LoadMore :status="loadMoreStatus" />
			</view>
			<!-- 右下角按钮 -->
			<y-Fab :bottom="140" :right="40" :btnList="fabList" @click="handleFab" />
		</view>
	</view>
</template>

<script>
export default {
	name: "community",
	props: {
		type : {
			type : String,
			value : null
		},
		type_id : {
			type : String,
			value : null
		},
		name : {
			type    : String,
			value	: null
		},
	},
	data() {
		return {
			startNum: 0,
			activeTab: 0,
			// tab的名称
			tabList: [
				{
					title: '漂流瓶'
				},
				{
					title: '聚集岛'
				}
			],
			cardList: [{
						id: 2,
						time: '06-17',
						avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
						nickName: '小黄鸭',
						title: '洛稚喜欢盛淮南谁也不知道',
						follow: false,
						isLike: false,
						likeNum: '24',
						commentNum: '0',
						imgList: [
							'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/tree.jpg'
						]
					},
					{
								id: 2,
								time: '06-17',
								avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
								nickName: '小黄鸭',
								title: '洛稚喜欢盛淮南谁也不知道',
								follow: false,
								isLike: false,
								likeNum: '24',
								commentNum: '0',
								imgList: [
									'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/tree.jpg'
								]
							}],
			rightList: [{
						id: 2,
						time: '06-17',
						avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
						nickName: '小黄鸭1',
						title: '洛稚喜欢盛淮南谁也不知道2222',
						follow: false,
						isLike: false,
						likeNum: '24',
						commentNum: '0',
						imgList: [
							'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/tree.jpg'
						]
					}],
			loadMoreStatus: 1, //0加载前，1加载中，2没有更多了
			//fab的设置
			fabList: [
				{
					bgColor: '#16C2C2',
					text: '发布',
					fontSize: 28,
					color: '#fff'
				},
				{
					bgColor: '#37b59d',
					text: '分享',
					fontSize: 28,
					color: '#fff'
				}
			]
		};
	},
	created() {
		this.loadData('add');
		//this.rightList = this.$store.state.diary.rightList;
	},
	onReachBottom() {
		this.startNum++;
		//上滑加载
		this.loadData('add');
	},
	methods:{
		toDetails : function(id){
			uni.navigateTo({
				url: '../diary/details/details?id=' + id 
			})
		},
		toOther : function(id){
			uni.navigateTo({
				url: '../mine/other/other?id=' + id
			})
		},
		loadData : function(type) {
			
		},
		//下拉刷新
		onPulldownReresh : function() {
			console.info(222)
			this.loadData('refresh');
		},
		handleTab : function(index) {
			this.activeTab = index;
		},
		//点击右下角tab按钮
		handleFab : function(e) {
			let index = e.index;
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '../push/push'
					});
					break;
				case 1:
					console.log(1);
					break;
			}
		}
	},
}
</script>

<style lang="less" scoped>
page {
	--mainColor: #435257;
	--activeColor: #36b39b;
}

view {
	box-sizing: border-box;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mainColor {
	color: var(--mainColor);
}

.aColor {
	color: var(--activeColor);
}

.color-nine{
	color: #999999;
}

.main-btn {
	border-radius: 40upx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mainColor);
	border: 1upx solid var(--mainColor);
	padding: 10rpx 40rpx;
}

.active-btn {
	color: #FFFFFF !important;
	background-color: var(--activeColor) !important;
	border: 1upx solid var(--activeColor) !important;
}

/* 点赞和评论 */
.margin-bottom {
	margin-bottom: 14px;
}
.home {
	padding-top: 120rpx;

	.top-barrage {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}

	.card-bottom {
		width: 100%;

		.top-tab {
			display: flex;
			height: 120rpx;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100;
			background-color: #ffffff;

			.tab-item {
				flex: 1;
				color: #999;
				border-bottom: 4rpx solid #ececec;
			}

			.active {
				color: var(--mainColor);
				border-bottom: 4rpx solid var(--mainColor);
			}
		}
	}
}
</style>