uniapp点击导航栏,显示页面(动态渲染)

最新推荐文章于 2024-04-02 10:05:32 发布

牛油的果

最新推荐文章于 2024-04-02 10:05:32 发布

阅读量871

点赞数

分类专栏： uniapp 文章标签： html javascript uni-app 前端

本文链接：https://blog.csdn.net/weixin_57633124/article/details/130575047

版权

uniapp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.效果图展示(点击有效果且显示不同页面)

2. hrml代码 tab_itmbot所属标签表示下划线

              <view class="tab">
					<view :class="activeone"  @click="chenked(1)">
						<view class="tab_itemtitle">全部</view>
						<view class="tab_itembot"></view>
					</view>
					<view :class="activetwo"  @click="chenked(2)">
						<view class="tab_itemtitle" >待支付</view>
						<view class="tab_itembot"></view>
					</view>
					<view :class="activethree"  @click="chenked(3)">
						<view class="tab_itemtitle" >待发货</view>
						<view class="tab_itembot"></view>
					</view>
					<view :class="activefour"  @click="chenked(4)">
						<view class="tab_itemtitle">已发货</view>
						<view class="tab_itembot"></view>
					</view>
					<view :class="activefive"  @click="chenked(5)">
						<view class="tab_itemtitle" >已完成</view>
						<view class="tab_itembot"></view>
					</view>
				</view>

3.js代码

包括组件引入,注册

注意:在conponents里面注册时,命名必须用小驼峰注册法:

即当标识符是一个单词的时候首字母小写

当标识符是多个单词的时候首字母小写,其他单词首字母大写

<script>
	import pagea from "@/components/pageone/pageone.vue"
	import pageb from "@/components/pagetwo/pagetwo.vue"
	import pagec from "@/components/pagethree/pagethree.vue"
	import paged from "@/components/pagefour/pagefour.vue"
	import pagee from "@/components/pagefive/pagefive.vue"
	export default {
		components:{
			pagea,
			pageb,
			pagec,
			paged,
			pagee
		},
		data() {
			return {
				isActive: 1
			};
		},
		computed:{
				activeone() {
							return this.isActive==1?'active':'activeone'
						},                                          
			    activetwo() {                                         
							return this.isActive==2?'active':'activeone'
						},                                          
			    activethree() {                                         
							return this.isActive==3?'active':'activeone'
						},                                          
			    activefour() {                                         
							return this.isActive==4?'active':'activeone'
						},                                          
				activefive() {                                         
							return this.isActive==5?'active':'activeone'
						},
		},
		methods: {
					chenked(type) {
									this.isActive = type
								}
					}
		
	}
</script>

4.scss代码,注意要使用scss的页面

<style lang="scss">

	.tab {
			display: flex;
			width: 750rpx;
			align-items: center;
			height: 100rpx;
			background-color: #fff;
			// 选中的样式
			.active {
				height:50px;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 50rpx;
				margin-top: 40rpx;
				.tab_itemtitle {
					text-align: center;
					height: 48rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #EE2747;
					line-height: 40rpx;
				}
				.tab_itembot {
					width: 43rpx;
					height: 6rpx;
					background: #EE2747;
					border-radius: 5rpx;
					margin-top: 5rpx;
				}
			}
			// 未选中的样式
			.activeone{
				height:50px ;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 50rpx;
				margin-top: 40rpx;
				.tab_itemtitle {
				    height: 45rpx;
				    font-size: 33rpx;
				    font-weight: 500;
				    color: #666;
				    line-height: 38rpx;
					text-align: center;
				}
				
			}
			
		}

</style>

5.使用组件(组件里面写页面的具体内容)

<pagea v-if="isActive==1"></pagea>
<pageb v-if="isActive==2"></pageb>
<pagec v-if="isActive==3"></pagec>
<paged v-if="isActive==4"></paged>
<pagee v-if="isActive==5"></pagee>