uniapp关于固定底部导航，内容切换，数据解析，样式排版

Posted 2022-10-07 weixin_ancenhw

<template>
	<view class="">
		<view class="content">
			<!-- 通过定义active样式，对内容进行切换 -->
			<view style="flex: 1;" :class="currentIndex==0?'active':''"  data-index="0" @tap="handTapp">
				导航1
			</view>
			<view style="flex: 1;" :class="currentIndex==1?'active':''" data-index="1" @tap="handTapp">
				导航2
			</view>
		</view>
		<!-- 用block判断显示的是逻辑判断，在前端渲染页面，不显示额外的标签 -->
		<view class="">
			<block v-if="currentIndex==0" class="">
				导航内容1
			</block>
			<block v-else="currentIndex==1" class="">
				导航内容2
			</block>

		</view>
		<view class="tool_bottom">
			<view class="tool_item">
				<view class="">
					<image src="../../static/logo.png"></image>
				</view>
				<view class="">
					首页
				</view>
			</view>
			<view class="tool_item">
				<view class="">
					<image src="../../static/logo.png"></image>
				</view>
				<view class="">
					客服
				</view>
			</view>
			<view class="tool_item">
				<view class="">
					<image src="../../static/logo.png"></image>
				</view>
				<view class="">
					购物车
				</view>
			</view>
			<view class="tool_car">加入购物车</view>
			<view class="tool_buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default 
		data() 
			return 
				currentIndex:0
			
		,
		onLoad() 

		,
		methods: 
			handTapp(e)
				//解析指定数据
				const index=e.currentTarget.dataset
				this.currentIndex=index
			
		
	
</script>

<style lang="less">
	.content 
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	
    .active
		flex: 1;
		color: #ff5500;
	

	.tool_bottom 
		width: 100%;
		padding: 10px;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #e3e3e3;

	

	.tool_item 
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	

	.tool_car 
		flex: 2;
		background-color: #ffaa00;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #fff;
		padding: 5px;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
	

	.tool_buy 
		flex: 2;
		background-image: linear-gradient(90deg, #e66465, #ff5500);
		align-items: center;
		justify-content: center;
		font-size: 20px;
		color: #fff;
		padding: 5px;
		border-bottom-right-radius: 15px;
		border-top-right-radius: 15px;
	

	image 
		width: 20px;
		height: 20px;
	
</style>