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

相关推荐
萧寂1732 小时前
微信小程序自定义轮播图指示点样式
微信小程序·小程序
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
R_yy11 小时前
微信小程序开发——视频播放实现(本地视频或者云端视频均可)
前端·微信小程序·小程序
css趣多多12 小时前
使用git管理uniapp项目
uni-app
低代码布道师15 小时前
加油站小程序实战教程03站点管理
低代码·小程序
V+zmm1013418 小时前
智慧物流小程序(论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
霍格沃兹测试开发学社测试人社区18 小时前
性能测试丨微信小程序性能优化指南
性能优化·微信小程序·小程序
猿毕设21 小时前
【FL0100】基于SSM微信小程序的走失人员的报备平台
java·spring boot·后端·python·微信小程序·小程序
猿毕设21 小时前
【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
java·spring boot·后端·python·微信小程序·小程序