유 니 앱 사용자 정의 탭 바 아래쪽 탐색

유 니 앱 의 네 이 티 브 tabbar 설정 과 애플 릿 의 차이 가 많 지 않 습 니 다. 구체 적 인 설정 은 이 글 을 보십시오.https://uniapp.dcloud.io/coll...

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "  "
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "  "
    }]
}

pages. json 에 tabBar 인자 가 설정 되 어 있 지 않 으 면 유 니 앱 에 아래쪽 tabbar 가 표시 되 지 않 습 니 다. 사용자 정의 구성 요소 형식 으로 원 하 는 사용자 정의 tabbar 효 과 를 실현 할 수 있 습 니 다.H5 엔 드, 애플 릿, App 엔 드 에 표 시 된 사용자 정의 tabbar 효과
새 tabbar. vue 구성 요 소 를 만 들 고 main. js 에 전역 구성 요 소 를 도입 합 니 다.

    
        
            
            {{item.badge}}
            
            
        {{item.text}}
    

    export default {
        data() {
            return {
                tabList: [
                    {
                        icon: 'icon-emotion',
                        text: 'tab01',
                        badge: 1
                    },
                    {
                        icon: 'icon-qianbao',
                        text: 'tab02',
                    },
                    {
                        icon: 'icon-choose01',
                        text: 'tab03',
                        badgeDot: true
                    }
                ],
                currentTabIndex: this.current
            }
        },
        props: {
            current: { type: [Number, String], default: 0 },
            backgroundColor: { type: String, default: '#fbfbfb' },
            color: { type: String, default: '#999' },
            tintColor: { type: String, default: '#42b983' }
        },
        methods: {
            switchTab(index){
                this.currentTabIndex = index
                this.$emit('click', index)
            }
        },
    }

import tabBar from './components/tabbar.vue'
Vue.component('tab-bar', tabBar)

페이지 에 tabbar 를 도입 하고 tabbar 속성 파 라미 터 를 사용자 정의 합 니 다.

data() {
    return {
        ...
        currentTabIndex: 1
    }
},
methods: {
    tabClick(index){
        console.log('  tabBar  ：' + index)
        this.currentTabIndex = index
    },
    ...
},

위의 그림 인 스 턴 스 에서 유 니 앱 사용자 정의 상단 탐색 표시 줄https://blog.csdn.net/yanxiny...