uniapp单页面实现页面切换的使用示例
作者：雯0609~
本文主要介绍了uniapp单页面实现页面切换的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
效果
代码
<template>
<view>
<view class="tab-bar">
<text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">页面1</text>
<text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">页面2</text>
<text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">页面3</text>
</view>
<view v-show="activeTab === '0'">
<!-- 页面1的内容 -->
<text>页面1</text>
</view>
<view v-show="activeTab === '1'">
<!-- 页面2的内容 -->
<text>页面2</text>
</view>
<view v-show="activeTab === '2'">
<!-- 页面3的内容 -->
<text>页面3</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
activeTab: '0'
};
},
methods: {
changeTab(index) {
this.activeTab = index;
}
}
};
</script>
<style>
.tab-bar {
display: flex;
justify-content: space-between;
width:100%;
}
.tab {
padding: 10px;
font-size: 16px;
cursor: pointer;
/* border: 1px solid black; */
width:33%;
text-align: center;
border-bottom: 1px solid #ccc;
}
.active {
color: #74bfe7;
/* background-color:#74bfe7; */
border-bottom: 1px solid #74bfe7;
}
</style>到此这篇关于uniapp单页面实现页面切换的使用示例的文章就介绍到这了,更多相关uniapp单页面页面切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！