设置tabBar

在pages.json页面中配置tabbar
用到的图片存在static里新建icon目录下

    "tabBar":{
        "color":"#383838",
        "selectedColor":"#FFDEAD",
        "backgroundColor":"#FFF8DC",
        "list":[
            {
            "pagePath":"pages/index/index",
            "text":"首頁",
            "iconPath":"static/icon/home1.png",
            "selectedIconPath":"static/icon/home.png"
            },  {
            "pagePath":"pages/list/list",
            "text":"列表",
            "iconPath":"static/icon/list1.png",
            "selectedIconPath":"static/icon/list.png"
            },  {
            "pagePath":"pages/order/order",
            "text":"訂單",
            "iconPath":"static/icon/oder1.png",
            "selectedIconPath":"static/icon/order.png"
            },{
            "pagePath":"pages/shopcart/shopcart",
            "text":"購物車",
            "iconPath":"static/icon/shopcart1.png",
            "selectedIconPath":"static/icon/shopcart.png"
            },{
            "pagePath":"pages/mine/mine",
            "text":"我的",
            "iconPath":"static/icon/mine1.png",
            "selectedIconPath":"static/icon/mine.png"
            }
        ]
    }

navigater

相当于a链接跳转
使用navigater跳转普通页面左上角有可返回键
使用naviagter跳转tabBar页面必须要添加属性open-type="switchTab"，跳转后没有返回键，因为跳转到tabBar页面后会关闭所有其他页面

        <navigator url="../detail/detail">去詳情頁</navigator>
        <navigator url="../order/order" open-type="switchTab">去訂單頁</navigator>

编程式导航

不是通过链接，而是通过布局跳转
通过给标签添加点击事件，完成跳转
跳转普通页面使用uni.navigateTo（{url:""})
跳转tabBar页面使用uni.switchTab({url:""})

        <view class="cls" @click="gotolist">
            去列表頁
        </view>
        <view class="cls" @click="gotoplay">
            去遊戲頁
        </view>
        methods: {
            gotoplay(){
                uni.navigateTo({
                    url:"../play/play"
                })
            },
            gotolist(){
                uni.switchTab({
                    url:"../list/list"
                })
            }}