公司展示型网站,烟台的网站建设,展会网站制作,建行企业银行官网我自己写的自定义的tabbar效果图 废话少说咱们直接上代码#xff0c;一步一步来
第一步#xff1a;
找到根目录下的 pages.json 文件#xff0c;在 tabBar 中把 custom 设置为 true#xff0c;默认值是 false。list 中设置自定义的相关信息#xff0c;
pagePath#x…我自己写的自定义的tabbar效果图 废话少说咱们直接上代码一步一步来
第一步
找到根目录下的 pages.json 文件在 tabBar 中把 custom 设置为 true默认值是 false。list 中设置自定义的相关信息
pagePath 页面路径 iconPath 点击前显示的图片 selectedIconPath 点击后显示的图片 text 底部导航的名称。
第二步
在根目录下创建 components 文件夹用来存放自定义tabBar组件小伙伴们可以自定义文件夹和文件的名称。记得命名要规范哦
第三步
咱也不截图了看了那么多的文章全他妈截图咱直接上代码方便有需要的小伙伴使用
templateview classtabbar-container flex items-center!-- isRound是中间凸出样式的标志用来判断当前子级是否是凸出样式的 --view :class!item.isRound ? square : is-square v-for(item, index) in tabbarList :keyindex clicktabbarChange(index, item)!-- 不是凸出的子级 --template v-if!item.isRoundview classitem-top flex justify-center flex-colu-image :srcactive index ? item.selectedIconPath : item.iconPath :widthitem.width:heightitem.height/u-image/viewview classitem-bottom :class{active: active index}text{{ item.text }}/text/view/template!-- 凸出的子级 --template v-elseview classflex flex-col justify-center items-center center-roundview classflex flex-col justify-center items-centeru-image :srcactive index ? item.selectedIconPath : item.iconPath :widthitem.width:heightitem.height/u-imagetext :class{round-active: active index}{{ item.text }}/text/view/view/template/view/view
/template
scriptexport default {name: Tabbar,props: {tabbarIndex: {type: Number,default: 0}},data() {return {// tabbar列表配置自定义用到的属性字段tabbarList: [{pagePath: /pages/homePage/index,iconPath: /static/images/tabbar/index.png,selectedIconPath: /static/images/tabbar/index-selected.png,text: 首页,width: 45rpx,height: 41rpx,isRound: false},{pagePath: /pages/information/index,iconPath: /static/images/tabbar/data.png,selectedIconPath: /static/images/tabbar/data-selected.png,text: 数据,width: 44rpx,height: 43rpx,isRound: false},{pagePath: /pages/aiRecommend/index,iconPath: /static/images/tabbar/ai-recommend.png,selectedIconPath: /static/images/tabbar/ai-recommend.png,text: 智能推荐,width: 120rpx,height: 120rpx,isRound: true},{pagePath: /pages/vip/index,iconPath: /static/images/tabbar/vip.png,selectedIconPath: /static/images/tabbar/vip-selected.png,text: 会员,width: 39rpx,height: 37rpx,isRound: false},{pagePath: /pages/center/index,iconPath: /static/images/tabbar/center.png,selectedIconPath: /static/images/tabbar/center-selected.png,text: 我的,width: 40rpx,height: 41rpx,isRound: false},],active: 0,isRound: false,}},mounted() {this.active this.tabbarIndex},methods: {tabbarChange(index, item) {this.$emit(updateTabbar, index)uni.switchTab({url: item.pagePath});}}}
/scriptstyle langscss scoped.tabbar-container {width: 100%;height: 132rpx;position: fixed;bottom: 0;.square {width: 100%;height: 130rpx;background: #FFFFFF;display: flex;flex-direction: column;align-items: center;justify-content: center;.round-active {color: #207BDB;}}.square .item-top {width: 45rpx;height: 45rpx;}.is-square {width: 100%;height: 130rpx;background: #FFFFFF;display: flex;flex-direction: column;align-items: center;justify-content: center;.round-active {color: #207BDB;}}.center-round {width: 203rpx;height: 130rpx;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMsAAAAlCAYAAADstR3BAAADx0lEQVR4nO3deajnUxjH8dc1Y2zDzFjGvkZkKcofpNGgTCl/oGRfyto0iJJQypa1KJT9H7KUJYSsDRFlGqQUyi4kDVe2y1wdnqmZ3HSv1vOOd/zrl/3d3/3j/s8p/n9zzPOc85Z2R8fFxjIGyHvbEXdsC28dkcrIeNMAM/4s8waDbWxk/4HSvwDT7HZ3gfbO9HujjzSx9IcR7IGDsRAHYpM/r8xvIOleAmvhMAaPaSJpXekqHAAjsCRETWGxW94EY/hcXxXwfgOnSaW6bMbTsGJ2CpD1LUeRr3xsxDGwqkiaW/8eMiCDnYEFBdnLe3ArvsjAnqJoYpkaqeAM0QyzDRruoxFinYdlhXsx0BpYpkcacZqCc7rc6EDFJqdgXeqMyvntPE8t/MDpFciLk5G9oDnsXFWF68J32iiWVi1oqi/UpsmaOBfWIlHsJFsY7TWI0mlnzfxTARm2AD5BVfjxnjfeTSxrMH8eDiOj0XFBp/EZMaTbSzSTe6zkikXKl15IQmlDVIbTlP4OGOpaMT0vXIkh6Gu3BIBrbkTupLuyDWaTpJVyNLih5n4N0mlEmTZgPvxlNdjTJdjCzzo/XjsAxsKZXvcToe7ZLTXYssi6I7twllemyMR3A71i/ZkanQFbHMxDV4BltkYE8tpFT2LezZBWe7kIZtjQcKa3gsjZ9DOPfX7GTtkWVBtG80ofSXlIrdh9tiZ2eV1CyWVICgM0ysKUrnI3nKmw2/ZsaxZL2mtyEOzArA3u6RtpG/WZsq66K2mqWeXgQh2ZgS9cZxXGxLlMFNUWWnWJPRhNKHmwY//Pr8WhWiJLmrp8vk0LZ8u10fZfNDWIZVe82gr57LkKl5bsQOlp2FF4rQmlCC6JdZg5pTpQamRJfDNODUDWxpT41OcFAcBFkWJkWVRdAs3oZTJ9ng5vuw2KMmDkiLLprgBJ2dgS6M3fIzF0bOXPSVEllmx6ejDJpTq2DGOYkpi2T1353KOLGmD1jG4HDtnYEjv/wRXReX5Xo2c65iOShOF9kvA1sagyVduXF91DSjOY19TmJZB8fi3LjHpNFtVsSRVLfg6xxGIgexpP0mpGstgLfmIBV5zLfGXfPrBzWIA1LLNvgcBwdF/20I5kakGrOJYpief1qHMGxqDEkmY99o1NWAvjqrhGYzr8EOs1S0M4ae3t136OaBLLvNVH52iWufGavqqVzrIYPO4LzEJZJdocqz9UO3G8EnP7Qfxiju3fwyZtbSc51qoDR5kN6nm9EmS3quZ2LdvwC4rEYTWev0AAAAABJRU5ErkJggg);background-position: center top;background-size: 100% 37rpx;background-repeat: no-repeat;position: absolute;margin-top: -72rpx;text {font-weight: 500;font-size: 20rpx;color: #555B66;position: absolute;top: 117rpx;}}.item-bottom {font-weight: 500;font-size: 20rpx;color: #555B66;margin-top: 14rpx;}.active {color: #207BDB;}}
/style注意小程序背景图无法使用本地图片要么转成base64要么把图片存到服务器上然后调用接口把图片路径返回。推荐第二种方法。 我写的有点繁琐中间凸起的样式应该为一整块可是ui只给了顶部的白色图片导致写的代码有点多。不过大体的思路差不多都是这样小伙伴们也可以参考其他博主写的文章的思路去编写自定义组件。 这是我用到的图片小伙伴们可以下载下来配合代码进行使用。
第四步
在需要的页面中引用自定义组件
templateTabbar :tabbar-indextabbarIndex updateTabbarupdateTabbar/Tabbar
/template
scriptimport Tabbar from /components/tabbar/tabbar.vuecomponents: { Tabbar },data() {return {tabbarIndex: 4,}},methods: {updateTabbar(e) {this.tabbarIndex e},}
/script有需求的小伙伴们可以试试我写的并不是很完美但是大体的思路是这样的小伙伴们可以根据自己项目的需求进行改动。此文章可作为参考使用希望能帮到有需求的小伙伴
如果有用的话就点击收藏起来吧
