【小程序系列】使用uView 自定义配置uni-app原生中的tabBar

一、uView是什么?

uView是uni-app生态专用的UI框架,是一个开源、免费的优秀框架。

二、安装与配置

官方文档讲的很详细,所以这里就直接引用:安装与配置

三、使用步骤

在完成第二步,并成功引入后,进行如下步骤:

1、创建tabBar对应的页面文件
在这里插入图片描述

2、配置page.json中的tabBar属性

  • 需要注意的是,这里仅需配置tabBar中list属性中各页面的路径,如下图所示:
    在这里插入图片描述
    在这里插入图片描述

这里要注意了,和官方文档不一样,但确实是不需要加/
因为我在实测过后发现加/是无效的,在去掉/后反而正常了

3、创建自定义tabBar文件

由于我们要使用自定义的tabBar覆盖原生的tabBar,所以需要创建一个自定义文件,一个对象对应tabBar按钮的配置,这里列出单个对象的所有字段属性:

 let list =[{  
					iconPath: "/static/uview/example/component.png",
					selectedIconPath: "/static/uview/example/component_select.png", // 激活(选中)的图标,同上
					text: '首页', // 显示的提示文字
					count: 2, // 红色角标显示的数字,如果需要移除角标,配置此参数为0即可
					isDot: true,   // 如果配置此值为true,那么角标将会以红点的形式显示
					pagePath: "/pages/home/index", // 点击某一个item时,跳转的路径,此路径必须是pagees.json中tabBar字段中定义的路径
          customIcon: false, // 如果使用自定义扩展的图标库字体,需配置此值为true
                            // 自定义字体图标库教程:https://www.uviewui.com/guide/customIcon.html
          midButton: false, // 如果是凸起按钮项,需配置此值为true
				},
				{
					iconPath: "/static/uview/example/js.png",
					selectedIconPath: "/static/uview/example/js_select.png",
					text: '发布',
					midButton: true,  
					pagePath: "/pages/publish/index",
          customIcon: false,
				},
				{
					iconPath: "account",
					selectedIconPath: "account-fill",
					text: '我的',
          customIcon: false,
					pagePath: "/pages/my/index",
          customIcon: false,
				},
			]
 
export default list
  • 这里可以创建多个对象
  • 如果还有疑问,可以参考官网文档

4、配置Vuex

在创建了上面的不同角色对应的tabBar对象数组后,我们要在Vuex中使用,因为uni-app自动集成了Vuex,所以直接引用就好了,由于我将其分模块处理了,这里列出结构:

import Vue from 'vue'
import Vuex from 'vuex'
import api from '@/api'
import list from '@/utils/tabBar.js'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		store: {},
		member: {}, //成员信息
    tabList:list
	},
	getters: {
		isLogin: state => Object.keys(state.member).length > 0	//是否登录
	},
	mutations: {
		SET_MEMBER(state, member) {
			state.member = member
		},
		SET_STORE(state, store) {
			state.store = store
		},
	},
	actions: {
		async getStore({commit}) {
			const store = await api('store')
			commit('SET_STORE', store)
		}
	}
})

export default store

还需要在mian.js中引入并挂载:

import Vue from 'vue'
import App from './App'
import uView from 'uview-ui';
import store from './store'
import { $http } from '@escook/request-miniprogram'
uni.$http = $http
// 配置请求根路径
$http.baseUrl = 'https://www.uinav.com'

// 请求开始之前做一些事情
$http.beforeRequest = function (options) {
  uni.showLoading({
    title: '数据加载中...',
  })
}

// 请求完成之后做一些事情
$http.afterRequest = function () {
  uni.hideLoading()
}
Vue.use(uView);
Vue.config.productionTip = false

App.mpType = 'app'

Vue.prototype.$store = store
const app = new Vue({
    store,
    ...App
})
app.$mount()

5、使用
在这里插入代码片

总结

感谢你能阅读我的这篇文章,其实实现这个从技术角度上不是很复杂,但是很少看见一个系统且完整的配置tabBar的文章,遂将自己的一些步骤和代码记录下来,希望能帮到大家,如果该篇文章中有错误或不足之处,忘指出,谢谢~~

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值