uniapp小程序uView自定义tabbar

两年没接触小程序,都忘记uniapp

前言

工具:HBuilder X 3.99版本 微信开发者工具 1.06

语言:vue2 + uView

一、创建项目

先使用HBuilder X工具创建一个空白uni-app项目 uviewTest

二、安装和配置

HBuilder X找到工具-》插件安装-》插件市场
uview链接

配置成功后项目有一个uni_modules文件夹下uview-ui文件夹

引入js 在main.js中引入

引入css 在uni.scss文件最后引入

javascript 复制代码
@import "@/uni_modules/uview-ui/theme.scss"; 
@import "@/uni_modules/uview-ui/index.scss";

css的引用二

在uni.scss中@import "@/uni_modules/uview-ui/theme.scss";

在App.vue中@import "@/uni_modules/uview-ui/index.scss";

配置page.json easycom 代码在下面

easycom的作用主要是:

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。

三、使用步骤

1、配置page.json文件

javascript 复制代码
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app-uview"
			}
		},
		{
			"path": "pages/main/main",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"custom":true,
		"list":[
			{
				"pagePath": "pages/main/main"
			},
			{
				"pagePath": "pages/mine/mine"
			}
		]
	},
	"uniIdRouter": {},
	"easycom":{
		"autoscan":true,
		"custom":{
			"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
			"^my-(.*)": "@/components/my-$1/my-$1.vue" // 匹配components目录内的vue文件
		}
	}
	
}

2、创建文件

3、相关代码

javascript 复制代码
//my-tabbar文件
<template>
	<view>
		<u-tabbar
			:value="currentTab"
			:fixed="true"
			:border="false"
			activeColor="#d81e06"
			:placeholder="false"
			 @change="changeTabIndex"
		>
			<u-tabbar-item 
			v-for="item in switchTabs"
			:key="item.name"  
			:text="item.text" :icon="item.iconName" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				switchTabs:[
					{
						"pagePath":"/pages/main/main",
						"iconName":"home",
						"text":"首页",
						"name":"home"
					},
					{
						"pagePath":"/pages/mine/mine",
						"iconName":"account",
						"text":"我的",
						"name":"mine"
					}
				]
			}
		},
		props:['currentTab'],
		methods:{
			changeTabIndex(e){
				let pagePath = this.switchTabs[e].pagePath
				uni.switchTab({
					url:pagePath
				})
			}
		}
	}
</script>
javascript 复制代码
//App.vue文件
<template>
	<view class="content">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		components:{},
		onLoad() {
			uni.switchTab({
				url:'/pages/main/main'
			})
		},
		methods: {

		}
	}
</script>
javascript 复制代码
//main.vue文件
<template>
	<view class="content">
		首页
		<my-tabbar :currentTab='0'/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>
javascript 复制代码
//mine.vue 文件
<template>
	<view class="content">
		我的
		<my-tabbar :currentTab='1'/>
	</view>
</template>

<script>
	export default {
		data(){
			return{
			}
		},
		onLaunch() {	
		},
		methods:{
		}
	}
</script>

四 、运行

HBuilder X 运行-》运行到小程序模拟器

如果要在内置浏览器执行,要记得在App.vue加uni.hideTabBar()

相关推荐
qq22951165023 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦7 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck12 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
尚学教辅学习资料14 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23414 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟14 小时前
小程序跳转另一个小程序
小程序
17 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
20 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji21 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域1 天前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序