软件项目网站建设实验报告,蓟县做网站公司,长葛哪里有做网站的,创业网站怎么做的废话不多说#xff0c;直接行源码
这里需要的底部tabbar的图片在这里 我的资源里面呢
图片是这样的
先看成品吧 首先 - BaseApp\components\Tabbar.vue script setupimport {ref,nextTick,watch} from vue// 核心 - 隐藏uniapp自带的底部tabbaruni.hi…废话不多说直接行源码
这里需要的底部tabbar的图片在这里 我的资源里面呢
图片是这样的
先看成品吧 首先 - BaseApp\components\Tabbar.vue script setupimport {ref,nextTick,watch} from vue// 核心 - 隐藏uniapp自带的底部tabbaruni.hideTabBar()let current ref(0)const list ref([{pagePath: pages/index/index,iconPath: ../static/tab/11.png,selectedIconPath: ../static/tab/1.png,text: index}, {pagePath: pages/warn/index,iconPath: ../static/tab/22.png,selectedIconPath: ../static/tab/2.png,text: warn}, {pagePath: pages/my/index,iconPath: ../static/tab/33.png,selectedIconPath: ../static/tab/3.png,text: my}, {pagePath: pages/user/index,iconPath: ../static/tab/44.png,selectedIconPath: ../static/tab/4.png,text: user}, {pagePath: pages/sign/index,iconPath: ../static/tab/55.png,selectedIconPath: ../static/tab/5.png,text: sign}])const changeTab (e) {uni.switchTab({url: /${list.value[e].pagePath},})}// const props defineProps([current])const props defineProps({current: {type: String, // 或者其他你需要的类型 required: true // 如果这个 prop 是必需的 }})console.log(props, props)current.value props.current
/scripttemplateview classtabbar!-- 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 --view classtabbar-item v-for(item, index) in list :keyindex clickchangeTab(index)view classselect v-ifcurrent indexview classi-timage classimg imgactive modewidthFix :srcitem.selectedIconPath v-ifcurrent index/imageimage classimg modewidthFix :srcitem.iconPath v-else/imageview classtext active v-ifcurrent index{{item.text}}/viewview classtext v-else{{item.text}}/view/view/viewview v-elseimage classimg modewidthFix :srcitem.selectedIconPath v-ifcurrent index/imageimage classimg modewidthFix :srcitem.iconPath v-else/imageview classtext active v-ifcurrent index{{item.text}}/viewview classtext v-else{{item.text}}/view/view/view/view
/templatestyle.tabbar {/* 1.5vh: 视口高度的1.5% */font-size: 1.5vh;position: fixed;left: 0;bottom: 0;z-index: 99;width: 100%;/* 6vh: 视口高度的6% */height: 6vh;display: flex;align-items: center;justify-content: space-around;background-color: #fff;padding: 20rpx 0;}.tabbar-item {height: 100%;padding: 0 20rpx;/* 根据tabbar个数的多少, 调整.tabbar-item样式中的padding即可 */display: flex;align-items: center;justify-content: center;}.select, {width: 10vh;height: 10vh;/* border-radius: 10vh; *//* margin-bottom: 4vh; *//* background-color: #086d5b; */position: relative;},.i-t {font-size: 1.5vh;padding: 2vw 2vh;position: absolute;bottom: 1vh;}.img ,{height: 3vh;width: 2.5vh;/* 4vw: 视口宽度的4% */margin: 0 4vw;},.imgactive, {height: 3.5vh;width: 3.2vh;margin: 0 2.2vw;}.text {,text-align: center;color: #CACACA;},.text, .active {color: #fff;}
/style
其次 - pages.json {pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: index}}, {path: pages/warn/index,style: {navigationBarTitleText: 告警,enablePullDownRefresh: false}}, {path: pages/my/index,style: {navigationBarTitleText: 我的,enablePullDownRefresh: false}}, {path: pages/user/index,style: {navigationBarTitleText: 其他,enablePullDownRefresh: false}}, {path: pages/sign/index,style: {navigationBarTitleText: 标签,enablePullDownRefresh: false}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},// 主要是这里的tabbar -------------------------------------------------------tabBar: {height: 0,// color: #7A7E83,// selectedColor: #55ffff,// backgroundColor: #55ff7f,list: [{pagePath: pages/index/index},{pagePath: pages/warn/index},{pagePath: pages/my/index},{pagePath: pages/user/index},{pagePath: pages/sign/index}]},uniIdRouter: {}}
再然后 - 在别的.vue组件中这样使用
BaseApp\pages\my.vue templatetext classtitle{{title}}/texttabbar :current2/tabbar
/templatescript setupimport {ref} from vueimport tabbar from ../../components/Tabbar.vuelet title ref(我的)
/scriptstyle/style
