jpcj-xcx/pages/index/index.vue

<template>
	<page-meta>
		<navigation-bar :title="title" background-color="#4fc08d" />
	</page-meta>
	<van-transition :show="active==0" name='fade' duration='1000'>
		<component v-show="active==0" is="find"></component>
	</van-transition>
	<van-transition :show="active==1" name='fade' duration='1000'>
		<applist v-show="active==1" ref='applist' />
	</van-transition>
	<van-transition :show="active==2" name='fade' duration='1000'>
		<component v-show="active==2" is="user"></component>
	</van-transition>
	<van-tabbar :active="active" @change="onChange" :placeholder='true' active-color="#0F0404" inactive-color="#999999">
		<van-tabbar-item>
			<van-icon slot="icon" name="/static/imgs/发现-灰.png" />
			<van-icon slot="icon-active" name="/static/imgs/发现.png" />
			学车
		</van-tabbar-item>
		<van-tabbar-item>
			<van-icon slot="icon" name="/static/imgs/专题灰.png" />
			<van-icon slot="icon-active" name="/static/imgs/专题、.png" />
			发现
		</van-tabbar-item>
		<van-tabbar-item>
			<van-icon slot="icon" name="/static/imgs/我的灰.png" />
			<van-icon slot="icon-active" name="/static/imgs/我的.png" />
			我的
		</van-tabbar-item>
	</van-tabbar>
	<van-toast id="van-toast" />
</template>

<script>
	import applist from './components/applist/index.vue'
	import find from './components/find/index.vue'
	import user from './components/user/index.vue'
	import topic from './components/topic/index.vue'
	export default {
		components: {
			applist,
			find,
			user,
			topic
		},
		data() {
			return {
				comname: 'xueche',
				active: 2,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				current: 1,
				mode: 'round',
			}
		},
		onLoad() {

		},
		onReachBottom(){
			if(this.active==1){
				console.log(this.$refs.applist)
				this.$refs.applist.onBottom()
			}
		},
		computed: {
			title() {
				switch (this.active) {
					case 0:
						return '学车';
					case 1:
						return '发现';
					case 2:
						return '我的';
				}
			}
		},
		methods: {
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				this.active = event.detail

			},
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F1F1F1;
	}

	.grid {
		display: flex;
		justify-content: space-between;
		padding: 1% 2%;
		margin-bottom: 2%;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;

		.grid-item {
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 12px;
		}
	}

	.swiper-box {
		width: 100vw;
		height: 56.25vw;

		.image {
			width: 100%;
		}
	}

	.sticky {
		position: sticky;
		top: 54px;
		left: 0;
		background-color: #fff;
		z-index: 9;
	}

	.sticky-top {
		position: sticky;
		top: 0px;
		left: 0;
		background-color: #4fc08d;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		// border-top-left-radius: 14px;
		// border-top-right-radius: 14px;
		padding-right: 3%;

		.top-search {
			flex: 1;
		}
	}

	.sticky-bottom {
		position: sticky;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 10;
	}

	.fadeIn {
		animation: fadeIn 5s linear 2s infinite alternate;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>