关于uniapp:uniApp-tabbar-可自定义也可原生

55次阅读

共计 2048 个字符,预计需要花费 6 分钟才能阅读完成。

最近在学习 uniApp, 对于 tabbar 的学习,记录一下。

  1. uniApp 原生的 tabbar 设置
    pages.json 文件中,留神 static 文件下图片门路

    "tabBar": {
         "color": "#7A7E83",
         "selectedColor": "#3cc51f",
         "borderStyle": "black",
         "backgroundColor": "#ffffff",
         "list": [{
             "pagePath": "pages/index/index",
             "iconPath": "static/images/tabbar2/basics.png",
             "selectedIconPath": "static/images/tabbar2/basics_cur.png",
             "text": "首页"
         },{
             "pagePath": "pages/fangke/fangke",
             "iconPath": "static/images/tabbar2/plugin.png",
             "selectedIconPath": "static/images/tabbar2/plugin_cur.png",
             "text": "访客"
         }, {
             "pagePath": "pages/my/my",
             "iconPath": "static/images/tabbar2/about.png",
             "selectedIconPath": "static/images/tabbar2/about_cur.png",
             "text": "我的"
         }]
     }
  2. 自定义的 tabbar,用的 colorUI 的 tabbar 组件
    下载源码解压,复制根目录的 /colorui 文件夹到你的根目录
    传送门 colorUI-uniAPP
    传送门 colorUI
    原理是一个主页面引入多个页面,在主页面进行切换显示。这样能够解决切换时闪动的问题。
    main.js全局引入components

import basics from './pages/basics/home.vue'
Vue.component('basics',basics)

import components from './pages/component/home.vue'
Vue.component('components',components)

import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)

在主页面 index.vue 文件中,

<basics v-if="PageCur=='basics'"></basics>
<components v-if="PageCur=='component'"></components>
<plugin v-if="PageCur=='plugin'"></plugin>
<view class="cu-bar tabbar bg-white shadow foot">
            <view class="action" @click="NavChange" data-cur="basics">
                <view class='cuIcon-cu-image'>
                    <image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] +'.png'"></image>
                </view>
                <view :class="PageCur=='basics'?'text-green':'text-gray'"> 元素 </view>
            </view>
            <view class="action" @click="NavChange" data-cur="component">
                <view class='cuIcon-cu-image'>
                    <image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] +'.png'"></image>
                </view>
                <view :class="PageCur=='component'?'text-green':'text-gray'"> 组件 </view>
            </view>
            <view class="action" @click="NavChange" data-cur="plugin">
                <view class='cuIcon-cu-image'>
                    <image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] +'.png'"></image>
                </view>
                <view :class="PageCur=='plugin'?'text-green':'text-gray'"> 扩大 </view>
            </view>
</view>

APP.vue 记得引入 colorUI 的 css

<style>
  @import "colorui/main.css";
  @import "colorui/icon.css";
</style>

正文完
 0