ToB企服应用市场:ToB评测及商务社交产业平台

标题: uniapp小程序uView自定义tabbar [打印本页]

---

作者: 尚未崩坏    时间: 2024-7-22 17:14
标题: 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文件最后引入

1. @import "@/uni_modules/uview-ui/theme.scss";
2. @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文件

1. {
2.         "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
3.                 {
4.                         "path": "pages/index/index",
5.                         "style": {
6.                                 "navigationBarTitleText": "uni-app-uview"
7.                         }
8.                 },
9.                 {
10.                         "path": "pages/main/main",
11.                         "style": {
12.                                 "navigationBarTitleText": "首页"
13.                         }
14.                 },
15.                 {
16.                         "path": "pages/mine/mine",
17.                         "style": {
18.                                 "navigationBarTitleText": "我的"
19.                         }
20.                 }
21.         ],
22.         "globalStyle": {
23.                 "navigationBarTextStyle": "black",
24.                 "navigationBarTitleText": "uni-app",
25.                 "navigationBarBackgroundColor": "#F8F8F8",
26.                 "backgroundColor": "#F8F8F8"
27.         },
28.         "tabBar": {
29.                 "custom":true,
30.                 "list":[
31.                         {
32.                                 "pagePath": "pages/main/main"
33.                         },
34.                         {
35.                                 "pagePath": "pages/mine/mine"
36.                         }
37.                 ]
38.         },
39.         "uniIdRouter": {},
40.         "easycom":{
41.                 "autoscan":true,
42.                 "custom":{
43.                         "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue",
44.                         "^my-(.*)": "@/components/my-$1/my-$1.vue" // 匹配components目录内的vue文件
45.                 }
46.         }
47.        
48. }

复制代码

2、创建文件

3、相关代码

1. //my-tabbar文件
2. <template>
3.         <view>
4.                 <u-tabbar
5.                         :value="currentTab"
6.                         :fixed="true"
7.                         :border="false"
8.                         activeColor="#d81e06"
9.                         :placeholder="false"
10.                          @change="changeTabIndex"
11.                 >
12.                         <u-tabbar-item
13.                         v-for="item in switchTabs"
14.                         :key="item.name"  
15.                         :text="item.text" :icon="item.iconName" ></u-tabbar-item>
16.                 </u-tabbar>
17.         </view>
18. </template>
20. <script>
21.         export default {
22.                 data(){
23.                         return{
24.                                 switchTabs:[
25.                                         {
26.                                                 "pagePath":"/pages/main/main",
27.                                                 "iconName":"home",
28.                                                 "text":"首页",
29.                                                 "name":"home"
30.                                         },
31.                                         {
32.                                                 "pagePath":"/pages/mine/mine",
33.                                                 "iconName":"account",
34.                                                 "text":"我的",
35.                                                 "name":"mine"
36.                                         }
37.                                 ]
38.                         }
39.                 },
40.                 props:['currentTab'],
41.                 methods:{
42.                         changeTabIndex(e){
43.                                 let pagePath = this.switchTabs[e].pagePath
44.                                 uni.switchTab({
45.                                         url:pagePath
46.                                 })
47.                         }
48.                 }
49.         }
50. </script>

复制代码

1. //App.vue文件
2. <template>
3.         <view class="content">
4.         </view>
5. </template>
7. <script>
8.         export default {
9.                 data() {
10.                         return {
11.                                 title: 'Hello'
12.                         }
13.                 },
14.                 components:{},
15.                 onLoad() {
16.                         uni.switchTab({
17.                                 url:'/pages/main/main'
18.                         })
19.                 },
20.                 methods: {
22.                 }
23.         }
24. </script>

复制代码

1. //main.vue文件
2. <template>
3.         <view class="content">
4.                 首页
5.                 <my-tabbar :currentTab='0'/>
6.         </view>
7. </template>
9. <script>
10.         export default {
11.                 data() {
12.                         return {
13.                         }
14.                 },
15.                 onLoad() {
16.                 },
17.                 methods: {
18.                 }
19.         }
20. </script>

复制代码

1. //mine.vue 文件
2. <template>
3.         <view class="content">
4.                 我的
5.                 <my-tabbar :currentTab='1'/>
6.         </view>
7. </template>
9. <script>
10.         export default {
11.                 data(){
12.                         return{
13.                         }
14.                 },
15.                 onLaunch() {       
16.                 },
17.                 methods:{
18.                 }
19.         }
20. </script>

复制代码

四 、运行

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4