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()

相关推荐
thigh_d10 小时前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
珎珎啊10 小时前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
前端无涯10 小时前
uniapp跨平台开发---switchTab:fail page `/undefined` is not found
uni-app
老李不敲代码10 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa11 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
七七小报11 小时前
uniapp-商城-34-shop 购物车 选好了 进行订单确认
uni-app
二J12 小时前
管理100个小程序-很难吗
android·小程序
qq_3573896313 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
万岳软件开发小城14 小时前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
橘猫云计算机设计1 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计