欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年09月18日 11:02:08   作者：雯0609~  
本文主要介紹了uniapp單頁面實(shí)現(xiàn)頁面切換的使用示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

效果

代碼

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

相關(guān)文章

最新評論