uView(Tabbar 底部导航栏)

(一)第一种方式
1,每个菜单页面都要

“首页” “发布” “我的” 每个页面都要

<template>
	<view>
		首页
		<u-tabbar
		:list="tabBar" 
		@change="changeEvent()" 
		bg-color="rgb(51, 61, 73)"
		active-color="rgba(8,141,246, 1)"
		inactive-color="#fff">
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabBar: '',
			}
		},
		onLoad() {
			this.tabBar = [{
					// pagePath(需以"/"开头)属性即可
					pagePath: "/pages/index/index",
					iconPath: "home",
					selectedIconPath: "home-fill",
					text: '首页',
				},
				{
					pagePath: "/pages/release/release",
					iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
					selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
					text: '发
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在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. 运行项目,即可看到自定义的底部导航栏了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值