快捷導(dǎo)航

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

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

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

效果

代碼

<template>
  <view>
    <view class="tab-bar">
      <text class="tab" :class="{ 'active': activeTab === '0' }" @click="changeTab('0')">頁(yè)面1</text>
      <text class="tab" :class="{ 'active': activeTab === '1' }" @click="changeTab('1')">頁(yè)面2</text>
      <text class="tab" :class="{ 'active': activeTab === '2' }" @click="changeTab('2')">頁(yè)面3</text>
    </view>
    <view v-show="activeTab === '0'">
      <!-- 頁(yè)面1的內(nèi)容 -->
      <text>頁(yè)面1</text>
    </view>
    <view v-show="activeTab === '1'">
      <!-- 頁(yè)面2的內(nèi)容 -->
      <text>頁(yè)面2</text>
    </view>
    <view v-show="activeTab === '2'">
      <!-- 頁(yè)面3的內(nèi)容 -->
      <text>頁(yè)面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單頁(yè)面實(shí)現(xiàn)頁(yè)面切換的使用示例的文章就介紹到這了,更多相關(guān)uniapp單頁(yè)面頁(yè)面切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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