-- 创造无限可能

uview组件tabbar底部导航栏,实现页面切换

2023-12-12 15:38:16
1458 人浏览 0 人点赞
有用,点赞支持一下

使用uview组件tabbar底部导航栏,点击按钮实现页面切换

导航栏结构代码

<u-tabbar v-model="current" :list="list" @change="navigatorTo"></u-tabbar>

Js代码

export default {
        data() {
            return {
                current: 0,
                list: [{
                        iconPath: "home",
                        selectedIconPath: "home-fill",
                        text: '首页',
                        customIcon: false,
                        pagePath: '/pages/business/home/home'
                    },
                    {
                        iconPath: "photo",
                        selectedIconPath: "photo-fill",
                        text: '站点',
                        customIcon: false,
                        pagePath: '/pages/business/site/list'
                    }
                ],
            }
        },
        methods: {
            navigatorTo(index) {
                let url = this.list[index].pagePath
                uni.navigateTo({
                    url: url,
                })
            }
        },
    }