uniapp+uView自定义底部tabBer

HBuilderX和微信开发工具联合开发小程序

一,安装uView2

1.uView安装

2.查看官方文档uView配置

 二,

1.现在pages文件新建四个vue页面

2.在pages.json配置导航栏,因为要在微信开发者工具运行,要配置custom

"tabBar": {
		"custom": true,
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/categry/categry",
				"text": "分类"
			},
			{
				"pagePath": "pages/car/car",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/user",
				&
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp中使用uView定义底部导航栏的步骤如下: 1. 安装uView插件,在HBuilderX中打开项目,右键点击项目根目录,选择"插件安装",搜索uView,安装并重启HBuilderX。 2. 在App.vue文件中引入uView组件库: ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` 3. 在pages.json中配置底部导航栏,如下所示: ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } } ], "tabBar": { "color": "#7A7E83", "selectedColor": "#007AFF", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home_active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabbar/mine.png", "selectedIconPath": "static/tabbar/mine_active.png" } ] } } ``` 其中,"tabBar"字段配置底部导航栏,"list"数组配置每个导航项的属性。 4. 在各个页面中添加导航栏的内容,如下所示: ```html <template> <view> <view>这是首页</view> </view> </template> <script> export default { data() { return { title: '首页' } }, onNavigationBarButtonTap() { uni.navigateTo({ url: '/pages/search/search' }); } } </script> ``` 其中,"data"中配置页面标题,"onNavigationBarButtonTap"函数配置导航栏右侧按钮的点击事件。 5. 在App.vue中配置全局导航栏样式,如下所示: ```scss <style lang="scss"> // 配置全局导航栏样式 .u-navbar { background-color: #007aff; color: #ffffff; } </style> ``` 6. 运行项目,即可看到自定义底部导航栏了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值