uni-app:单页面的页面切换

效果

代码

<template>
  <view>
    <view class="tab-bar">
      <text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">页面1text>
      <text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">页面2text>
      <text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">页面3text>
    view>
 
    <view v-show="activeTab === '0'">
      
      <text>页面1text>
    view>
 
    <view v-show="activeTab === '1'">
      
      <text>页面2text>
    view>
 
    <view v-show="activeTab === '2'">
      
      <text>页面3text>
    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>