在 Uni-app 中，你可以通过自定义样式来创建一个带有 Tab 栏的页面，并在每个 Tab 下展示一个列表。以下是一个简单的示例，展示了如何创建一个带有两个 Tab 的页面，并在每个 Tab 下展示一个列表。
1. 创建 Tab 栏页面
首先，在你的项目中创建一个新的页面，比如 pages/tabs/tabs.vue，用于展示 Tab 栏和列表。
vue复制代码
| <template> | |
| <view class=”container”> | |
| <view class=”tab-bar”> | |
| <view class=”tab-item” @click=”switchTab(‘tab1’)”>Tab 1</view> | |
| <view class=”tab-item” @click=”switchTab(‘tab2’)”>Tab 2</view> | |
| </view> | |
| <view class=”tab-content”> | |
| <view v-if=”activeTab === ‘tab1′” class=”tab-content-item”> | |
| <view class=”list-item” v-for=”(item, index) in list1″ :key=”index”> | |
| {{ item }} | |
| </view> | |
| </view> | |
| <view v-if=”activeTab === ‘tab2′” class=”tab-content-item”> | |
| <view class=”list-item” v-for=”(item, index) in list2″ :key=”index”> | |
| {{ item }} | |
| </view> | |
| </view> | |
| </view> | |
| </view> | |
| </template> | |
| <script> | |
| export default { | |
| data() { | |
| return { | |
| activeTab: ‘tab1’, | |
| list1: [‘Item 1-1’, ‘Item 1-2’, ‘Item 1-3’], | |
| list2: [‘Item 2-1’, ‘Item 2-2’, ‘Item 2-3’] | |
| }; | |
| }, | |
| methods: { | |
| switchTab(tab) { | |
| this.activeTab = tab; | |
| } | |
| } | |
| }; | |
| </script> | |
| <style scoped> | |
| .container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| } | |
| .tab-bar { | |
| display: flex; | |
| justify-content: space-around; | |
| background-color: #fff; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .tab-item { | |
| flex: 1; | |
| text-align: center; | |
| padding: 10px 0; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| .tab-item.active { | |
| color: #007aff; | |
| border-bottom: 2px solid #007aff; | |
| } | |
| .tab-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| .tab-content-item { | |
| padding: 10px; | |
| } | |
| .list-item { | |
| padding: 10px; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| </style> |
2. 添加样式和逻辑调整
在上面的代码中，我们使用了 v-if 来切换不同 Tab 的内容，并通过 switchTab 方法来切换 activeTab 的值。
注意：tab-item.active 类在上面的代码中没有直接用到，因为我们是通过 v-if 切换内容。如果你希望在 Tab 项上显示激活状态，可以添加如下逻辑：
vue复制代码
| <view class=”tab-item” :class=”{ active: activeTab === ‘tab1’ }” @click=”switchTab(‘tab1’)”>Tab 1</view> | |
| <view class=”tab-item” :class=”{ active: activeTab === ‘tab2’ }” @click=”switchTab(‘tab2’)”>Tab 2</view> |
并在样式中添加 .active 的样式定义：
css复制代码
| .tab-item.active { | |
| color: #007aff; | |
| border-bottom: 2px solid #007aff; | |
| } |
3. 添加到页面路由
最后，别忘了在你的 pages.json 中添加这个页面的路由配置：
json复制代码
| { | |
| “pages”:[ | |
| { | |
| “path”:“pages/tabs/tabs”, | |
| “style”:{ | |
| “navigationBarTitleText”:“Tabs” | |
| } | |
| } | |
| // 其他页面配置… | |
| ] | |
| } |
总结
这个示例展示了如何在 Uni-app 中创建一个简单的 Tab 栏，并在每个 Tab 下展示一个列表。你可以根据需要进一步扩展和自定义这个示例，比如添加更多的 Tab、使用图标、或者将 Tab 栏组件化等。
一、uni-app的tab选项卡，了解一下？
tab选项卡，简单来说，就是每个标题对应一项内容，点击不同的标题，展示不同的内容。就像微信、支付宝等应用里的功能切换，是不是很熟悉？这就是tab选项卡的魅力所在。
二、uni-app tab样式代码案例，手把手教你
1. 组件使用
首先，你需要引入uni-app的tab组件。在项目中，你可以这样写：
“`html
这里的`current`参数用于切换不同选项卡内容，`tabList`参数用于配置tab栏目标题的数组。
2. 封装组件
接下来，我们可以自己封装一个tab组件，让它更加美观。以下是一个简单的tab组件代码：
“`html
{{ item }}
3. 动态效果
为了让tab选项卡更加生动，我们可以添加一个位移动画效果。这里，我们使用CSS3的`transition`属性来实现：
“`css
.title {
transition: color 0.3s ease;
这样，当点击不同的tab时，标题颜色会平滑过渡，给人一种流畅的感觉。
三、uni-app tab样式代码案例，进阶技巧
1. 自定义图标
uni-app的tab组件支持自定义图标。你可以在`list`属性中设置`iconPath`和`selectedIconPath`来指定图标路径。
2. 动态图标
如果你希望图标随着状态变化，可以在页面的生命周期钩子函数中动态修改`selectedIconPath`。
3. 自定义事件处理
uni-app的tab组件支持自定义事件处理。你可以在`@clickItem`事件中获取当前点击的tab索引，然后进行相应的操作。
四、uni-app tab样式代码案例，
uni-app的tab样式代码案例，让你轻松实现跨平台应用的tab选项卡功能。通过封装组件、添加动态效果、自定义图标等技巧，让你的应用更加美观、实用。快来试试吧，让你的应用在多个平台上大放异彩！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
