Uniapp小程序开发-底部tabbar的开发思路

文章目录


前言

记录uniapp 开发小程序的底部tabbar ,这里讨论的不是自定义tabbar的情况。而是使用wx.setTabBarItem(Object object) 这个api的情况。关于custom 小程序底部tabbar的可以跳过。


一、uniapp 实现 tabbar

实现 tabbar 的简单步骤如下:

  1. 在 uniapp 项目的 pages.json 文件中,配置 tabBar 字段,来定义 tabbar 的样式和内容,例如:
json 复制代码
{
  "tabBar": {
    "color": "#666",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tabbar/cart.png",
        "selectedIconPath": "static/tabbar/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user_active.png"
      }
    ]
  }
}
  1. pages 目录下创建对应的三个页面:indexcartuser

  2. pages/index 目录下创建 index.vue 文件,编写首页的内容。

  3. pages/cart 目录下创建 cart.vue 文件,编写购物车页面的内容。

  4. pages/user 目录下创建 user.vue 文件,编写个人中心页面的内容。

  5. App.vue 文件中,将 tabbar 的内容放在 <tabbar> 标签内,例如:

html 复制代码
<template>
  <view>
    <router-view></router-view>
    <tabbar></tabbar>
  </view>
</template>
  1. 在项目的根目录下,创建 components 文件夹,再在该文件夹下创建 tabbar.vue 文件,编写 tabbar 的样式和逻辑,例如:
html 复制代码
<template>
  <view class="tabbar">
    <view v-for="(item, index) in tabBar.list" :key="index" class="tabbar-item" @click="switchTab(index)">
      <image :src="item.selected ? item.selectedIconPath : item.iconPath" class="tabbar-icon"></image>
      <view class="tabbar-text">{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBar: getApp().globalData.tabBar  // 从全局数据中获取 tabBar 的配置
    }
  },
  methods: {
    switchTab(index) {
      uni.switchTab({
        url: '/' + this.tabBar.list[index].pagePath
      })
    }
  }
}
</script>

<style scoped>
.tabbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #000;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
}

.tabbar-icon {
  width: 24px;
  height: 24px;
}

.tabbar-text {
  margin-top: 2px;
}
</style>
  1. main.js 文件中全局配置 tabBar 的配置,例如:
javascript 复制代码
App({
  globalData: {
    tabBar: require('./pages.json').tabBar
  }
})

这样,就完成了 tabbar 的简单实现过程。tabbar 的样式和逻辑可以根据项目的需求进行自定义修改,tabbar第一个path与pages的path 保持一致。也就是首页路径。

二、图标使用网络图片

那么如果是icon是后端返回网络图片,url的形式。

json 复制代码
{
  "iconPath": "https://files/static/tabbar/home.png",
  "selectedIconPath": "https://files/static/tabbar/home_active.png"
}
     

注意这个功能要小程序版本的基础库版本在 2.7.0以上。

后端返回tabbar信息

后端返回tabbar信息,已达到可以在后端管理tabbar的图标。即是iconPath,selectedIconPath 这些是支持重置。官方提供了这个apiwx.setTabBarItem(Object object)

uniapp方式中的setTabBarItem

如图在onLauch中加入相关逻辑。获取tabbar信息后,uni.setTabBarItem。


总结

今天的内容就在这里了,本文讨论如何使用uniapp实现基本tabbar功能,接着给出动态设置icon的思路。依赖的api是uni.setTabBarItem。

相关推荐
fhf4 分钟前
感觉根本等不到35岁AI就把我裁了
前端·人工智能·程序员
hummhumm5 分钟前
第 36 章 - Go语言 服务网格
java·运维·前端·后端·python·golang·java-ee
蒜蓉大猩猩26 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
Clockwiseee1 小时前
JS原型、原型链以及原型链污染学习
javascript·学习·原型模式
王解1 小时前
一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)
前端·perttier
乐闻x1 小时前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
遇到困难睡大觉哈哈1 小时前
JavaScript面向对象
开发语言·javascript·ecmascript
檀越剑指大厂1 小时前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶1 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam1 小时前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot