移动端开发uniapp小步伐自界说中心凸起样式底部tabbar

饭宝发表于前天 08:58

uniapp小步伐自界说中心凸起样式底部tabbar

我自己写的自界说的tabbar结果图https://i-blog.csdnimg.cn/direct/7b12959a85fb4b029b0987da76f51124.jpeg#pic_center
废话少说咱们直接上代码，一步一步来
第一步：

找到根目次下的 pages.json 文件，在 tabBar 中把 custom 设置为 true，默认值是 false。list 中设置自界说的相关信息，
pagePath：页面路径；
iconPath：点击前显示的图片；
selectedIconPath：点击后显示的图片；
text：底部导航的名称。
https://i-blog.csdnimg.cn/direct/aa4ec4c26b9d434dac39ff2cea83dcd9.jpeg#pic_center
第二步

在根目次下创建 components 文件夹用来存放自界说tabBar组件，小伙伴们可以自界说文件夹和文件的名称。记得命名要规范哦！！！
https://i-blog.csdnimg.cn/direct/5d42d082846148a08de80a35f09e93eb.jpeg#pic_center
第三步

咱也不截图了，看了那么多的文章全他妈截图，咱直接上代码方便有必要的小伙伴利用！！！！
<template>
<view class="tabbar-container flex items-center">

<view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index" @click="tabbarChange(index, item)">

<template v-if="!item.isRound">
<view class="item-top flex justify-center flex-col">
<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
:height="item.height"></u-image>
</view>
<view class="item-bottom" :class="{'active': active === index}">
<text>{{ item.text }}</text>
</view>
</template>

<template v-else>
<view class="flex flex-col justify-center items-center center-round">
<view class="flex flex-col justify-center items-center">
<u-image :src="active == index ? item.selectedIconPath : item.iconPath" :width="item.width"
:height="item.height"></u-image>
<text :class="{'round-active': active === index}">{{ item.text }}</text>
</view>
</view>
</template>
</view>
</view>
</template>
<script>
export 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
});
}
}
}
</script>

<style lang="scss" 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/oGRfyto0iJJQypa1KJT9H7KUJYSsDRFlGqQUyi4kDVe2y1wdnqmZ3HSv+1vOOd/zrl/3d3/3j/s8p+/n9zzPOc85Z2R8fFxjIGyHvbEXdsC28dkcrIeNMAM/4s8waDbWxk/4HSvwDT7HZ3gfb+O9+HujjzSx9IcR7IGDsRAHYpM+/r8xvIOleAmvhMAaPaSJpXekqHAAjsCRETWGxW94EY/hcXxXwfgOnSaW6bMbTsGJ2CpD+1LUeRr3xs+xDGwqkiaW/8eMiCDnYEFBdn+Le3ArvsjAnqJoYpkaqeA+M0QyzDRruoxFinYdlhXsx0BpYpkcacZqCc7rc6E+DFJqdgXeqMyvntPE8t/MDpFciLk5G9oDnsXFWF68J32iiWVi1oqi/UpsmaOBfWIlHsJFsY7TWI0mln+zfxTA++Rm2AD5BVfjxnjfeTSxrMH8eDiOj0XFBp/EZMaTbSz+STe6zkikXKl15IQmlDVIbTlP4OGOpaMT0vXIkh6Gu3BIBrbkTupLuyDWaTpJVyNLih5n4N0mlEmTZgPvxlNdjTJdjCzzo/XjsAxsKZXvcToe7ZLTXYssi6I7twllemyMR3A71i/ZkanQFbHMxDV4BltkYE8tpFT2LezZBWe7kIZtjQcKa3gsjZ9DOPfX7GTtkWVBtG80ofSXlIrdh9tiZ2eV1CyWVIC+gM0ysKUrnI3nKmw2/ZsaxZL2mtyEOzArA3u6RtpG/WZsq66K2mqWeXgQh2ZgS9cZxXGxLlMFNUWWnWJPRhNKHmwY+//Pr8WhWiJLmrp8vk0LZ8u10fZfNDWIZVe82gr57LkKl5bsQOlp2FF4rQmlCC6JdZg5pTpQamRJ+fDNODUDWxpT41OcFAcBFkWJkWVRdAs3oZTJ9ng5vuw2KMmDkiLLprgBJ2dgS6M3fIzF0bOXPSVEllmx6ejDJpTq2DGOYkpi2T1353KOLGmD1jG4HDtnYE+jv/wRXReX5Xo2c65iOShOF9kvA1sagyVduXF91DSjOY19TmJZB8fi3LjHpNFtVsSRVLfg6xxGIgexpP0mp+GstgLfmIBV5zLfGXfPrBzWIA1LLNvgcBwdF/20I5kak+GrOJYpief1qHMGxqDEkmY99o1NWAvjqrhGYzr8EOs1S0M4ae3t136OaBLLvNV+H52iWufGavqqVzrIYPO4LzEJZJdocqz9UO3G8EnP7Qfx+iju3fwyZtbSc51qoDR5kN6nm9EmS3quZ2LdvwC4r+EYTWev0AAAAABJRU5ErkJggg==');
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只给了顶部的白色图片导致写的代码有点多。不外大要的思绪差不多都是这样，小伙伴们也可以参考其他博主写的文章的思绪去编写自界说组件。
https://i-blog.csdnimg.cn/direct/8d07bb8791d9450baa35c7452ab73f4d.jpeg#pic_center
这是我用到的图片，小伙伴们可以下载下来共同代码进行利用。
https://i-blog.csdnimg.cn/direct/fa3861676c0b4c449b901e3d36dbb658.png#pic_center
https://i-blog.csdnimg.cn/direct/d6038cf4fc1a467cb509dba587a11589.png#pic_center
https://i-blog.csdnimg.cn/direct/6adeeb9ec57d41c7af56550d50921588.png#pic_center
https://i-blog.csdnimg.cn/direct/284c81201cfc491f953120c4cc468159.png#pic_center
https://i-blog.csdnimg.cn/direct/24b39d7b389843dab40a116dac4704be.png#pic_center
https://i-blog.csdnimg.cn/direct/84637b0fd28f4ebda7206bc7304072ae.png#pic_center
https://i-blog.csdnimg.cn/direct/f277cb75fc354c5bb6e64cdf4bd120a0.png#pic_center
https://i-blog.csdnimg.cn/direct/86c5a15fc25e417f8d098362959dbcab.png#pic_center
https://i-blog.csdnimg.cn/direct/0bda3b12db0147b6911d30516b6ba1df.png#pic_center
https://i-blog.csdnimg.cn/direct/b15c7a6353cf4fd5b1a525062aff049c.png#pic_center
第四步

在必要的页面中引用自界说组件
<template>
<Tabbar :tabbar-index="tabbarIndex" @updateTabbar="updateTabbar"></Tabbar>
</template>
<script>
import Tabbar from "@/components/tabbar/tabbar.vue"
components: { Tabbar },
data() {
return {
tabbarIndex: 4,
}
},
methods: {
updateTabbar(e) {
this.tabbarIndex = e
},
}
</script>
有需求的小伙伴们可以试试，我写的并不是很完美但是大要的思绪是这样的，小伙伴们可以根据自己项目的需求进行改动。此文章可作为参考利用，希望能帮到有需求的小伙伴！！！！
假如有效的话就点击收藏起来吧！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

uniapp小步伐自界说中心凸起样式底部tabbar