快捷導航

uniapp單頁面實現(xiàn)頁面切換的使用示例

更新時間：2023年09月18日 11:02:08 作者：雯0609~

本文主要介紹了uniapp單頁面實現(xiàn)頁面切換的使用示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

效果

代碼

<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的內(nèi)容 -->
      <text>頁面1</text>
    </view>
    <view v-show="activeTab === '1'">
      <!-- 頁面2的內(nèi)容 -->
      <text>頁面2</text>
    </view>
    <view v-show="activeTab === '2'">
      <!-- 頁面3的內(nèi)容 -->
      <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>

到此這篇關(guān)于uniapp單頁面實現(xiàn)頁面切換的使用示例的文章就介紹到這了,更多相關(guān)uniapp單頁面頁面切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

sencha ext js 6 快速入門(必看)
下面小編就為大家?guī)硪黄猻encha ext js 6 快速入門(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
js捕獲鼠標右鍵菜單中的粘帖事件實現(xiàn)代碼
突發(fā)奇想比如點擊菜單中的粘帖后事件如何捕獲，如下圖所示,用的jQuery中的paste事件，如想獲得粘帖文本要使用setTimeout控制下時間，感興趣的朋友可以參考下
2013-04-04
深入理解JavaScript系列（15）函數(shù)（Functions）
本章節(jié)我們要著重介紹的是一個非常常見的ECMAScript對象——函數(shù)（function),我們將詳細講解一下各種類型的函數(shù)是如何影響上下文的變量對象以及每個函數(shù)的作用域鏈都包含什么，以及回答諸如像下面這樣的問題：下面聲明的函數(shù)有什么區(qū)別么
2012-04-04
js實現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果
這篇文章主要介紹了js實現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果,實例分析了javascript實現(xiàn)百葉窗動畫效果的技巧,需要的朋友可以參考下
2015-03-03
索趣科技的答案
索趣科技的答案...
2007-02-02
javascript引導程序
本網(wǎng)站的javascript程序架構(gòu)從以下幾個基本點出發(fā)
2008-10-10
微信小程序登錄獲取不到頭像和昵稱的詳細解決辦法
相信好多小伙伴在使用getUserInfo獲取小程序用戶昵稱和頭像時卻獲取不到,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄獲取不到頭像和昵稱的詳細解決辦法,需要的朋友可以參考下
2022-12-12
addEventListener()和removeEventListener()追加事件和刪除追加事件
這篇文章主要給大家介紹了關(guān)于addEventListener()和removeEventListener()追加事件和刪除追加事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
一文帶你掌握JavaScript中Moment.js如何操作日期和時間
Moment.js是一個極其強大的JavaScript庫,專門用于解析、驗證、操作和顯示日期和時間,下面就跟隨小編一起學習一下Moment.js的具體使用吧
2024-01-01
javascript遍歷對象的五種方式實例代碼
在我們?nèi)粘９ぷ鬟^程中,我們對于javaScript遍歷對象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對象的五種方式,需要的朋友可以參考下
2021-10-10