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

相关推荐
D155540880581 小时前
电竞护航小程序成品搭建三角洲行动护航小程序开发俱乐部点单小程序成品游戏派单小程序定制
游戏·小程序
说私域11 小时前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
吴传逞11 小时前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
wmsj057811 小时前
小程序图片批量保存太麻烦?用这款工具一键搞定,附工具教程!
小程序
说私域13 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序服务提升复购率和转介绍率的研究
人工智能·小程序
2501_9159214319 小时前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_9160088920 小时前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !21 小时前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app
xw521 小时前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
宋辰月1 天前
微信小程序-day4
微信小程序·小程序