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中引入
https://img-blog.csdnimg.cn/direct/090bc9b2b245460bb170d3dc52baa434.png
引入css 在uni.scss文件最后引入
@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文件
{
"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、创建文件
https://img-blog.csdnimg.cn/direct/5aea624f67854741acd9be3280e2fabc.png
3、相关代码
//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.pagePath
uni.switchTab({
url:pagePath
})
}
}
}
</script>
//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>
//main.vue文件
<template>
<view class="content">
首页
<my-tabbar :currentTab='0'/>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
//mine.vue 文件
<template>
<view class="content">
我的
<my-tabbar :currentTab='1'/>
</view>
</template>
<script>
export default {
data(){
return{
}
},
onLaunch() {
},
methods:{
}
}
</script>
四 、运行
HBuilder X 运行-》运行到小程序模拟器
https://img-blog.csdnimg.cn/direct/76fa021f31dd4c97a65e5551e31ea154.png
假如要在内置浏览器执行，要记得在App.vue加uni.hideTabBar()
https://img-blog.csdnimg.cn/direct/548be459ba5242ad9b11ebf246014ac0.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]