移动端的底部导航

已于 2023-06-05 09:55:46 修改
阅读量695 收藏 3
点赞数
分类专栏： 前端 文章标签： vue.js 前端
于 2023-06-03 17:05:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63040701/article/details/131023064
版权

效果展示

我的代码

<template>
  <div class="nav-container">
    <!--    动态底部导航栏 start-->
    <div class="nav-content">
      <van-tabbar style="background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important;"
                  v-model="active">
        <van-tabbar-item v-for="(icon,index) in icons.list"  :key="index" :to="icon.path">
          <span>{{ icon.name }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive"/>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!--    动态底部导航栏 end-->
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
const active = ref(0);
const icons = reactive({
  list: [
    {
      path:'/',
      name: '首页',
      inactive: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAgdJREFUWEftlk1LG1EUht8zKUJddCG4qIXuCkJru1TajaIzyR3bZT+Q/gMVMROVrura5saC+g/6QXXZOjeZCHUhaJfVtrgUEQrtrpuCkDliAzbRmclMhiEIubvL+XrOC/fcQ2jxoRbXx+UEmB5Z79OIHoG0x/8UZHfNZf64uDG6F1XRyApkjfWHGlIrDL5ZW4xAhy4q4wVn9FMUiEgAWb04TsTLQQWYaaJQzqyEhQgNYBlqAcBMyMSvpCNmw/iGArB09QGEJ2ESnvkwVmVZPG0U0xDAMuwdgPobJfK28xfpmANBsb4Ak8K+1lGhfQDXmyt+FvXzOMW9S8r845XHEyBnlO4w3MhPKrhTrS/vpL+d97kAMKPbD1yirZhde4en+LZU5o/651tzeyHs7uMK/UqkeDXptnTEfV+A3IgaZA2fEwSAdESd6nWXNkBbgbYCl0mB72D8rpsXhC4w3wLR1aA5En8OEC/IkjnnVcQy1HsAzxIFIBdD+Q2x6VUka6iXBMw3DTA1rO5eSeFr4K8WB4D5ryybnb5/wanB0u0jEN3wg4ipwK50xL1AgKxeXCLiiSQAmGm5UM5MBgKcGnNptcqM6s5/7jSrABHW8iVxYa/0Xcly6eIYM54DLGoYDioahl4XxYEXXHWO0FuAe/7bSRHhTb6UeefZUJJ/f5jcDbfiMEni+LQc4AT3fdkh+RTEEQAAAABJRU5ErkJggg==',
      active: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAwZJREFUWEfFlztMU1EYx///CxaUoNHExBeJbg4ORh1cjJLQJy4ai4NxgIGYGAy2QAyLdWEA2mBw8JHg4GJoHIyhTwkaFgdjTBxYIZLoYEikELHQ+5l7W0rfva1QTro0Pef7/873PCUqXP2OqSPqhjJIsE2FtJAQCBcAmVHq1aGRQPvPSkyyks1uc+g2KUMCnNg8lzSgU4DAoggHvVHbK6N2DQE4nZN1LcvNwxS4jBgWwvd9f2zA7+9IlNtfFqDfGjonovoEvFzOWMoZgOg++UgqrpGw7UupcyUBXJZAlwLFJ5ADhsRzNhH8rUJ1+SKOiWLnCwJ4rsw0xkxrwwB6AK4DsqcaAAESBOoAjDfHGwc8H1rXcu3kAbjaAhehcJjApWpE885oCqJ/ZqHKgO+941PmniwAt3nqDshRgE2i5/Z2L1mFSJ832v40u4oAuCzBhwQ8EPwBsXe7pVP2/gJoEMDji9gfJQs4U3yHVAuZ3YSg2xI+D6ifa6idIaVcoNsSfAagW8uSHQh6uXs9p9sS+kbgjNZKa70IztFtDS5T0Fx7eb00V7QQrABoqvXtU3o6wByA07sAsApgnn3W4KQIbwCy/X2n1K2S8/sNXeagk8TkLngAKtVb7LEHGkwJ5g0JI0BM1W2lFUQiLgKTGovt092eCsN1QLTJVYu1ATDqjdgcqVYcvkmor2uhnB5CZPdo2PZCB3jQPntwfX1l6b8BjHRTEhABGhoPe9+1/kpnfjIMcg1gfdUgBgCS8ee05v70NEzmQahTRIo+nQxBGQBI2pF73ohjPAvg/tXp40o8vmhIqNgmgwAJBafGQvb5LADti9safEuBTQBTVSDlAMg4BGn35wG4rKG7FHlSlbjuWSMjfcv9eQC91tDROsFXQA4BqDwZSwNotb+UIM6OhW0/0uWYe9v027CaOJfxQOZbsCjAVmeEsxCD1n6Ltd6SvxH+0bC9I9dm0QnoNgcmQHZWnQ+ZB0VeeqOOrsIXKqGgT0qgF8RJAMcqgdH+KUNkQQUf+6J2f7Gz/wDdFRpuUYmTKAAAAABJRU5ErkJggg==',
    },
    {
      path:'/home/find',
      name: '发现',
      active: 'http://jkw.life:8020/icon/分类-01.png',
      inactive: 'http://jkw.life:8020/icon/分类-01-01.png',
    },
    {
      path:'/home/find',
      name: '资讯',
      active: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1BJREFUWEftV0t200AQrB6TDytyA8INcgPMIn4WLDAnsDmBBQnrOGviPPkEyCfAWYCCs8DcIEewb+Cs8kPTvBlL8kiZkZy8ZId29mhmSt3V1dW034h6DBwANCLBg6NTb4InfPYaP1uAaAPcIuCQ9hoRF+6bgimIby+HweTD/DGw+PXvW7W1520Q+wC2zTNtAJbrhFBIOfh69u78IUC+7P7YkUJ0wei49mcAGDghQH1xC8CL/AY6Bzjoj73hKkA+70YdIuoCvFN4/wLAiIEtAt6rtQyAysfR2OupcIm1zZYgdBh4XQAyZyCUggfBqTc11/xmtC0kdQnqa3krF2bgj2SE8vZqpNK65J0FQPHQZxIdViEkvMyBYUxIUMAsCUxdEOqF9RkRwr8CYRHsygDMA/ebUZ2lzqUlRdmbOsQkEJZV04MApFfYUkSFEFfxpBSAymVN4rc+pKIc9xuR1oyjsZcPf4JAg13fTHgBxAJvVDpKAZiLi3NozuBACgwtubQCcBEyJXp1BGJM7pBOY0EYEw5TIMUI6OgxDqx1z5jFNdQrI5DmT9cy0LMAmfbH3iv1XhHA3m40tVTLjIHe8ZkXpmffi4RKuwnkZ5rAmPXPPC2nZQAUMSHQs1VDJYCFkoHjm6uTtB8oWWUSLbOubSlQukEsR6l86z6wvqlVL1XSUgDJ5d9yBLy5GtgaU1kVLCuA/FQZmfFRpeIeAIyKLhDQlgL1XxkRVwKgDikhINJSsgG4W8LJBzByRKzkgFkJtqbUH3tkJWHBW6QKaVZAsi8xQRXNKCubZlSXEr5qoatEQLV2IRC4+kG1ECVSrFuvg4AuDuS66eNJsd0DuKrAJcVM/On419ugOgL/pdhIpDIikFCsXdizp5Lisrar7n2oFOdIqX0j2qq3JOp4QVbxWNGOVxmS9HKXPdeDSSafMfsgUp5vaclZ+4LQZcerACSK2i4Y1gswh3GNAuUNNADzUZss6medlmwAXFOQSxXvAMiFjYQapQwXTHMQj1JXZAJYNiFqGXOBdsmCZeCarpwAUiC6rW5sdEiSn3c7NFpOPnpyUkAXj2o+ggN5fR1WzZeVAMz0GLNBu5i65PewaiYo7rsXgCwqzWg7m5iUV3VMQA6Qub//AbeKD4limrMLAAAAAElFTkSuQmCC',
      inactive: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAqpJREFUWEfdl01oE1EQx/+z1WitFr16UigIFkEQEbWHCGbDW8WbF0HwA2sVK5hNcxIaD4KabCIVkfag4kGhnhSal2yE9qI3jxEKCrmIR0VEUdId2U0LcbNJNpuFYPeWvPn4zbzZ9/5L6PNDfc6PlgDJ4zLKCk4xsIcYW4KAMuEnActk4XX2jVjyiuEJoIvCXqxQJUjSlj4DPGpI7YN7vQlgUhQ2RVboPYBRMP8ClOvE/DEIDBONANYMiAYBVP4M8IEHUvvdGKsJIKnKKQbu2UaGKUKZEV2VbMcjIJU1RaYtgB6TiyBEGUjnTHErSOVun4QqpwlIg7FklMWx/w9AV+U4gFnf3SA8NUri/Jp9zx1IxORpIsz7BgDyhikSoQHYgexzwS+A+53vuQN+E7eyWx8Afd2CREyeI8KTLrZizjDF5dCGMMBbkDFMkQoNoIvKPU3XxxD20oWeO5BUS0OwrINuiNoGVO8XRbUTXM8AeqyggyjrkahqmGJ34/+OmKkpF0AYA/jQPz7M34yytqPr2zARkxoBU00ACqoel459Bwx7diUoQKcW2+s3YgVVISqt2lYIyMPCJ+c3YZqBKEGZzZbjE113wA+Arsp3AA67RYceLz4D81kwf94YsfbdWTj5NXSA1NFX21aGIt/twArzWKasvXVuULU4x+BLTkLGGaMsXriLadJ8QSTZqoRftIOv6UhdlTMAJuu5+WLO1B57ddIDYGECpDxqDNZpC9wAerxwF0zOUcxsXcuVTzxsFaMJ4Gp0futgZHgZ4J0A/QDzODG+tIfg/axQvl4t0o4AdYaPk0ZJM9r5esruhFo6QrCcffT12KLbFYnAN7OmdruTf0vdbx8oXFOuKMQjzNjcPhBtB6xd9arpOVl42epTrOMQdiIOez2UL59eoP4C7SmoMBnbuvgAAAAASUVORK5CYII=',
    },
    {
      path:'/home/center',
      name: '我的',
      active: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAu9JREFUWEfFlU9IFGEYxp93DIVS6VQUFFR0yeimRIEFtrM7u0R1WCMhsPAiZMHMFmGhq0Ed3FkpI8gOBVLZeigJZnZnLdJDkJ2iDklgkWB/TqISJO28sUvrv3ZndmYXnMvAfO/zPL/v/Yb3I6zxQ2ucD8cAbZJWXW4KTQBLAA7828BrgPQFwXzUp/tnnWyqYIBgMFa2faayG0TtlgHM179unO8YGmpMFQJSEIAiJuoB8wGAHYWYAvgMCM2q4R2zq7cFCCMszIp1nwi0085s+TqDJ6uN8d1hhE0rnS2A4ol3gbjDSfhiLVO3mvR1ugZok7SK8hT9BFDtCgCYXSjjTX26/3c+vWUHZI/eTIT7LsMzMmaciSal9P+T87EEUDz6ExAaiwEAI6YmpZPuAER9GsCWogCAb6ohbXULMAegsjgAmlcNX5VLAG0UoPoiAcZUw3fIFYAs6p0EhIsBYCAcNaQuVwAhMbGXYb4vBsA0zX29I4G8HvaDSIw/Bfi4GwgGhqOGZKm1B/DptTAx7gaAYO6PGIE3ridhVqh4tA4Q5T3HnAHM3WrSbzmG0zrbDmTNQ954EzM/tOsEA1+I0a4mpcd2tQUBhI7ohyMj0qslEO0cM50GULcqYJyIBiIJ3+3s9wsNw5tvvjj2w9URXDo4XJVaX34XhFMAeucq/lztf370V9ZMFhPbyDRrM/NeEN5GDe/U8iDZo8tEUAF6JqxLtfZoge+5QHIegSwmzhL4GsCLIzR9vwugKxFDGrTa0UVJ25VKUQ8BJ5bqaAaE82rCN7Ba+x+AIuo3AFy2CJkC6CMzJgipdwxhWiDUMGEPTNQg/QY25NLnGkorAEJi/A6DWwv5edzWrIZYBFDE+CDAea9Nt4F2ncgAyB49SIRYKUPsvAjcEDH8LzMAihgfBbjIW88ucuU6AVrEkAKkeOMtYL7nTF6aagJaSBH1WwDaSmPp2KWfQl49xoygY2lpBCPpDnwAUFMaP8cuk2kAdiwroeAvbb/75Sw2WN0AAAAASUVORK5CYII=',
      inactive: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAolJREFUWEftlU1oE1EUhc+d0ApaKi50pSCi0D9ERdGlSvOSF8WFaNeCbhQrmsSFqFjxZ2NmKlZ0o+DaigvRvOSloEtFURHbCoq4cKULsaiLlMyVSRpsSpr3MlkU0dkMzL3nvG/O+yMs8EMLPD7+ToBkVO0hcBdAGyoJ8msGvfMK8kGziTaVwKDMdraXnHsAR+sPRIVixN83ohJTtiDWACmZ7UGJxq2MI9zrqsSETa89gFBvAfTamAIYd7Xss+m1AkiJ7CBA12wM//TwMVcnRkwaO4CYegnGRpNZTZ3wys3LTSaNFUBaqJ8MLDaZza4T8Cuj5RKTxghwIpZb6zC/NxnVq/tE64bz8Q+NtGaA6KPNDjnPQwGwv2W4sOtFSwCVvU/fwwAUI7zUdCYYEwgGTovcBIO7m4Eg0GRGx3tMGluAGww+bDKrXYR0M6PjR0waK4Dj/Q+7I07kKYBOk+FMfarkl7ZdHds9aeq3ApiZhosMPm0yDOoEupTR8TN2vYautMjvZJQWuTqhkkKdI2CokYSBIU/L8ymRlczU4RXkaOhdkBb5PoavAKx0tSyndTKWi/vMZwFaD3BHxZx+APzGIbpwJR/PBV9SQnHwZsZAI4iGU5AW6jIDp6p/MNesfEMCmH3zJaNqPxHuVjVEGM3k5cB8KTQESAkVLKKuWjE9A+O+g5Keni5+Cmptbe2rfUQECHsB3jpnsM+ulqvCApRjbPWpTl89H1MC/zhAUqgvBCxvZQoY+OppuSLUGkgKdYuAgy0C3Pa0PBQKIN2vtrODx60AkI8dmTH5JBRAILI5/eYzr56KoU/CqjAZVQeIcBTAGgDLDIl8A/CRGde9grxjSs/6MjIZha3/B/gNNqzhIdHwUi8AAAAASUVORK5CYII=',
    },
  ]
})




</script>

<style scoped>
.van-tabbar-item--active{
  background: linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -o-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -ms-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -moz-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -webkit-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);


}
</style>

vant4的Tabbar 标签栏的使用

基本使用案例

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

自定义图标使用案例 

用<template #icon="props">插槽结合动态数据绑定达到图标的自定义效果

<van-tabbar v-model="active">
  <van-tabbar-item badge="3">
    <span>自定义</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    return {
      icon,
      active,
    };
  },
};

 代码详解

自定义导航栏背景色

style="background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important;"

自定义导航栏选中部分颜色

<style scoped>
.van-tabbar-item--active{
  background: linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -o-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -ms-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -moz-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);
  background: -webkit-linear-gradient(left , rgb(188, 123, 255) 23% , rgb(243, 168, 250) 81%);


}
</style>

绑定一个动态的active参数值

v-model="active"
import {reactive, ref} from "vue";
const active = ref(0);

 动态数据的设定

path为路由跳转路径，name为底部描述文字，active为选中时的图标，inactive为未选中时的图标

const icons = reactive({
  list: [
    {
      path:'/',
      name: '首页',
      inactive: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAgdJREFUWEftlk1LG1EUht8zKUJddCG4qIXuCkJru1TajaIzyR3bZT+Q/gMVMROVrura5saC+g/6QXXZOjeZCHUhaJfVtrgUEQrtrpuCkDliAzbRmclMhiEIubvL+XrOC/fcQ2jxoRbXx+UEmB5Z79OIHoG0x/8UZHfNZf64uDG6F1XRyApkjfWHGlIrDL5ZW4xAhy4q4wVn9FMUiEgAWb04TsTLQQWYaaJQzqyEhQgNYBlqAcBMyMSvpCNmw/iGArB09QGEJ2ESnvkwVmVZPG0U0xDAMuwdgPobJfK28xfpmANBsb4Ak8K+1lGhfQDXmyt+FvXzOMW9S8r845XHEyBnlO4w3MhPKrhTrS/vpL+d97kAMKPbD1yirZhde4en+LZU5o/651tzeyHs7uMK/UqkeDXptnTEfV+A3IgaZA2fEwSAdESd6nWXNkBbgbYCl0mB72D8rpsXhC4w3wLR1aA5En8OEC/IkjnnVcQy1HsAzxIFIBdD+Q2x6VUka6iXBMw3DTA1rO5eSeFr4K8WB4D5ryybnb5/wanB0u0jEN3wg4ipwK50xL1AgKxeXCLiiSQAmGm5UM5MBgKcGnNptcqM6s5/7jSrABHW8iVxYa/0Xcly6eIYM54DLGoYDioahl4XxYEXXHWO0FuAe/7bSRHhTb6UeefZUJJ/f5jcDbfiMEni+LQc4AT3fdkh+RTEEQAAAABJRU5ErkJggg==',
      active: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAwZJREFUWEfFlztMU1EYx///CxaUoNHExBeJbg4ORh1cjJLQJy4ai4NxgIGYGAy2QAyLdWEA2mBw8JHg4GJoHIyhTwkaFgdjTBxYIZLoYEikELHQ+5l7W0rfva1QTro0Pef7/873PCUqXP2OqSPqhjJIsE2FtJAQCBcAmVHq1aGRQPvPSkyyks1uc+g2KUMCnNg8lzSgU4DAoggHvVHbK6N2DQE4nZN1LcvNwxS4jBgWwvd9f2zA7+9IlNtfFqDfGjonovoEvFzOWMoZgOg++UgqrpGw7UupcyUBXJZAlwLFJ5ADhsRzNhH8rUJ1+SKOiWLnCwJ4rsw0xkxrwwB6AK4DsqcaAAESBOoAjDfHGwc8H1rXcu3kAbjaAhehcJjApWpE885oCqJ/ZqHKgO+941PmniwAt3nqDshRgE2i5/Z2L1mFSJ832v40u4oAuCzBhwQ8EPwBsXe7pVP2/gJoEMDji9gfJQs4U3yHVAuZ3YSg2xI+D6ifa6idIaVcoNsSfAagW8uSHQh6uXs9p9sS+kbgjNZKa70IztFtDS5T0Fx7eb00V7QQrABoqvXtU3o6wByA07sAsApgnn3W4KQIbwCy/X2n1K2S8/sNXeagk8TkLngAKtVb7LEHGkwJ5g0JI0BM1W2lFUQiLgKTGovt092eCsN1QLTJVYu1ATDqjdgcqVYcvkmor2uhnB5CZPdo2PZCB3jQPntwfX1l6b8BjHRTEhABGhoPe9+1/kpnfjIMcg1gfdUgBgCS8ee05v70NEzmQahTRIo+nQxBGQBI2pF73ohjPAvg/tXp40o8vmhIqNgmgwAJBafGQvb5LADti9safEuBTQBTVSDlAMg4BGn35wG4rKG7FHlSlbjuWSMjfcv9eQC91tDROsFXQA4BqDwZSwNotb+UIM6OhW0/0uWYe9v027CaOJfxQOZbsCjAVmeEsxCD1n6Ltd6SvxH+0bC9I9dm0QnoNgcmQHZWnQ+ZB0VeeqOOrsIXKqGgT0qgF8RJAMcqgdH+KUNkQQUf+6J2f7Gz/wDdFRpuUYmTKAAAAABJRU5ErkJggg==',
    },
    {
      path:'/home/find',
      name: '发现',
      active: 'http://jkw.life:8020/icon/分类-01.png',
      inactive: 'http://jkw.life:8020/icon/分类-01-01.png',
    },
    {
      path:'/home/find',
      name: '资讯',
      active: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1BJREFUWEftV0t200AQrB6TDytyA8INcgPMIn4WLDAnsDmBBQnrOGviPPkEyCfAWYCCs8DcIEewb+Cs8kPTvBlL8kiZkZy8ZId29mhmSt3V1dW034h6DBwANCLBg6NTb4InfPYaP1uAaAPcIuCQ9hoRF+6bgimIby+HweTD/DGw+PXvW7W1520Q+wC2zTNtAJbrhFBIOfh69u78IUC+7P7YkUJ0wei49mcAGDghQH1xC8CL/AY6Bzjoj73hKkA+70YdIuoCvFN4/wLAiIEtAt6rtQyAysfR2OupcIm1zZYgdBh4XQAyZyCUggfBqTc11/xmtC0kdQnqa3krF2bgj2SE8vZqpNK65J0FQPHQZxIdViEkvMyBYUxIUMAsCUxdEOqF9RkRwr8CYRHsygDMA/ebUZ2lzqUlRdmbOsQkEJZV04MApFfYUkSFEFfxpBSAymVN4rc+pKIc9xuR1oyjsZcPf4JAg13fTHgBxAJvVDpKAZiLi3NozuBACgwtubQCcBEyJXp1BGJM7pBOY0EYEw5TIMUI6OgxDqx1z5jFNdQrI5DmT9cy0LMAmfbH3iv1XhHA3m40tVTLjIHe8ZkXpmffi4RKuwnkZ5rAmPXPPC2nZQAUMSHQs1VDJYCFkoHjm6uTtB8oWWUSLbOubSlQukEsR6l86z6wvqlVL1XSUgDJ5d9yBLy5GtgaU1kVLCuA/FQZmfFRpeIeAIyKLhDQlgL1XxkRVwKgDikhINJSsgG4W8LJBzByRKzkgFkJtqbUH3tkJWHBW6QKaVZAsi8xQRXNKCubZlSXEr5qoatEQLV2IRC4+kG1ECVSrFuvg4AuDuS66eNJsd0DuKrAJcVM/On419ugOgL/pdhIpDIikFCsXdizp5Lisrar7n2oFOdIqX0j2qq3JOp4QVbxWNGOVxmS9HKXPdeDSSafMfsgUp5vaclZ+4LQZcerACSK2i4Y1gswh3GNAuUNNADzUZss6medlmwAXFOQSxXvAMiFjYQapQwXTHMQj1JXZAJYNiFqGXOBdsmCZeCarpwAUiC6rW5sdEiSn3c7NFpOPnpyUkAXj2o+ggN5fR1WzZeVAMz0GLNBu5i65PewaiYo7rsXgCwqzWg7m5iUV3VMQA6Qub//AbeKD4limrMLAAAAAElFTkSuQmCC',
      inactive: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAqpJREFUWEfdl01oE1EQx/+z1WitFr16UigIFkEQEbWHCGbDW8WbF0HwA2sVK5hNcxIaD4KabCIVkfag4kGhnhSal2yE9qI3jxEKCrmIR0VEUdId2U0LcbNJNpuFYPeWvPn4zbzZ9/5L6PNDfc6PlgDJ4zLKCk4xsIcYW4KAMuEnActk4XX2jVjyiuEJoIvCXqxQJUjSlj4DPGpI7YN7vQlgUhQ2RVboPYBRMP8ClOvE/DEIDBONANYMiAYBVP4M8IEHUvvdGKsJIKnKKQbu2UaGKUKZEV2VbMcjIJU1RaYtgB6TiyBEGUjnTHErSOVun4QqpwlIg7FklMWx/w9AV+U4gFnf3SA8NUri/Jp9zx1IxORpIsz7BgDyhikSoQHYgexzwS+A+53vuQN+E7eyWx8Afd2CREyeI8KTLrZizjDF5dCGMMBbkDFMkQoNoIvKPU3XxxD20oWeO5BUS0OwrINuiNoGVO8XRbUTXM8AeqyggyjrkahqmGJ34/+OmKkpF0AYA/jQPz7M34yytqPr2zARkxoBU00ACqoel459Bwx7diUoQKcW2+s3YgVVISqt2lYIyMPCJ+c3YZqBKEGZzZbjE113wA+Arsp3AA67RYceLz4D81kwf94YsfbdWTj5NXSA1NFX21aGIt/twArzWKasvXVuULU4x+BLTkLGGaMsXriLadJ8QSTZqoRftIOv6UhdlTMAJuu5+WLO1B57ddIDYGECpDxqDNZpC9wAerxwF0zOUcxsXcuVTzxsFaMJ4Gp0futgZHgZ4J0A/QDzODG+tIfg/axQvl4t0o4AdYaPk0ZJM9r5esruhFo6QrCcffT12KLbFYnAN7OmdruTf0vdbx8oXFOuKMQjzNjcPhBtB6xd9arpOVl42epTrOMQdiIOez2UL59eoP4C7SmoMBnbuvgAAAAASUVORK5CYII=',
    },
    {
      path:'/home/center',
      name: '我的',
      active: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAu9JREFUWEfFlU9IFGEYxp93DIVS6VQUFFR0yeimRIEFtrM7u0R1WCMhsPAiZMHMFmGhq0Ed3FkpI8gOBVLZeigJZnZnLdJDkJ2iDklgkWB/TqISJO28sUvrv3ZndmYXnMvAfO/zPL/v/Yb3I6zxQ2ucD8cAbZJWXW4KTQBLAA7828BrgPQFwXzUp/tnnWyqYIBgMFa2faayG0TtlgHM179unO8YGmpMFQJSEIAiJuoB8wGAHYWYAvgMCM2q4R2zq7cFCCMszIp1nwi0085s+TqDJ6uN8d1hhE0rnS2A4ol3gbjDSfhiLVO3mvR1ugZok7SK8hT9BFDtCgCYXSjjTX26/3c+vWUHZI/eTIT7LsMzMmaciSal9P+T87EEUDz6ExAaiwEAI6YmpZPuAER9GsCWogCAb6ohbXULMAegsjgAmlcNX5VLAG0UoPoiAcZUw3fIFYAs6p0EhIsBYCAcNaQuVwAhMbGXYb4vBsA0zX29I4G8HvaDSIw/Bfi4GwgGhqOGZKm1B/DptTAx7gaAYO6PGIE3ridhVqh4tA4Q5T3HnAHM3WrSbzmG0zrbDmTNQ954EzM/tOsEA1+I0a4mpcd2tQUBhI7ohyMj0qslEO0cM50GULcqYJyIBiIJ3+3s9wsNw5tvvjj2w9URXDo4XJVaX34XhFMAeucq/lztf370V9ZMFhPbyDRrM/NeEN5GDe/U8iDZo8tEUAF6JqxLtfZoge+5QHIegSwmzhL4GsCLIzR9vwugKxFDGrTa0UVJ25VKUQ8BJ5bqaAaE82rCN7Ba+x+AIuo3AFy2CJkC6CMzJgipdwxhWiDUMGEPTNQg/QY25NLnGkorAEJi/A6DWwv5edzWrIZYBFDE+CDAea9Nt4F2ncgAyB49SIRYKUPsvAjcEDH8LzMAihgfBbjIW88ucuU6AVrEkAKkeOMtYL7nTF6aagJaSBH1WwDaSmPp2KWfQl49xoygY2lpBCPpDnwAUFMaP8cuk2kAdiwroeAvbb/75Sw2WN0AAAAASUVORK5CYII=',
      inactive: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAolJREFUWEftlU1oE1EUhc+d0ApaKi50pSCi0D9ERdGlSvOSF8WFaNeCbhQrmsSFqFjxZ2NmKlZ0o+DaigvRvOSloEtFURHbCoq4cKULsaiLlMyVSRpsSpr3MlkU0dkMzL3nvG/O+yMs8EMLPD7+ToBkVO0hcBdAGyoJ8msGvfMK8kGziTaVwKDMdraXnHsAR+sPRIVixN83ohJTtiDWACmZ7UGJxq2MI9zrqsSETa89gFBvAfTamAIYd7Xss+m1AkiJ7CBA12wM//TwMVcnRkwaO4CYegnGRpNZTZ3wys3LTSaNFUBaqJ8MLDaZza4T8Cuj5RKTxghwIpZb6zC/NxnVq/tE64bz8Q+NtGaA6KPNDjnPQwGwv2W4sOtFSwCVvU/fwwAUI7zUdCYYEwgGTovcBIO7m4Eg0GRGx3tMGluAGww+bDKrXYR0M6PjR0waK4Dj/Q+7I07kKYBOk+FMfarkl7ZdHds9aeq3ApiZhosMPm0yDOoEupTR8TN2vYautMjvZJQWuTqhkkKdI2CokYSBIU/L8ymRlczU4RXkaOhdkBb5PoavAKx0tSyndTKWi/vMZwFaD3BHxZx+APzGIbpwJR/PBV9SQnHwZsZAI4iGU5AW6jIDp6p/MNesfEMCmH3zJaNqPxHuVjVEGM3k5cB8KTQESAkVLKKuWjE9A+O+g5Keni5+Cmptbe2rfUQECHsB3jpnsM+ulqvCApRjbPWpTl89H1MC/zhAUqgvBCxvZQoY+OppuSLUGkgKdYuAgy0C3Pa0PBQKIN2vtrODx60AkI8dmTH5JBRAILI5/eYzr56KoU/CqjAZVQeIcBTAGgDLDIl8A/CRGde9grxjSs/6MjIZha3/B/gNNqzhIdHwUi8AAAAASUVORK5CYII=',
    },
  ]
})

动态数据的绑定 以及遍历

 <van-tabbar-item v-for="(icon,index) in icons.list"  :key="index" :to="icon.path">
          <span>{{ icon.name }}</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive"/>
          </template>
        </van-tabbar-item>

icon图标的寻找

网址

阿里巴巴矢量库

 首先搜索想要的图标

 点击下载图标 （实际不用下载，这步是为了拿到图标的网址）

 

月木@
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue开发移动端底部导航条功能
10-15
在Vue.js中开发移动端底部导航条功能是一项常见的任务，它能提供用户友好的界面和流畅的导航体验。本文将深入探讨如何使用Vue实现这一功能，包括组件化设计、路由链接和样式布局。 首先，我们来看一下`app.vue`中的...
手机移动端底部导航菜单动画js特效
11-05
在这个“手机移动端底部导航菜单动画js特效”项目中，我们将探讨如何利用JavaScript（js）和CSS（css）技术来实现一个既美观又具有良好兼容性的动态底部导航菜单。 首先，JavaScript（js）在这里的作用是为底部导航...
CSS3：鼠标悬停效果
sunluyi的博客
12-17 2668
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello H5</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: #d6e5
使用 vant 的时候 #icon=““ 缩写插槽使用失效的解决办法。
KLW75
09-07 2687
使用vant 组件的时候，有可能会碰到#icon=""，这样的形式，这是vue中插槽的缩写形式。 <template #icon="props"> </template> 这样的写法失效的话。 很大的可能是引入的 vue 版本与 vant 的版本过低。 解决办法，使用最新版的 vant 和vue 的版本 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.cs.
【Android入门到项目实战-- 11.2】—— 实现底部导航栏（RadioGroup+Fragment）
张修宇的博客
05-20 4329
Android如何实现底部导航栏，使用RadioGroup+Fragment实现，如何实现不能左右滑动切换页面的导航栏？具体代码实现
移动端（uniapp）底部导航栏切换
Jon_Ronson的专栏
10-20 831
俗话说，“只工作不玩耍，聪明的孩子也变傻”。
css移动端设置底部导航栏(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
04-29 2296
css移动端设置底部导航栏(1+X Web前端开发初级 例题)
vant 将复选框修改为按钮样式
kurcp的博客
06-13 3706
vant 修改复选框为按钮样式
微信底部菜单，移动端底部导航菜单，超级牛叉底部固定菜单，H5移动端底部固定菜单栏目，4个打包
02-21
微信底部菜单，移动端底部导航菜单，超级牛叉底部固定菜单，样式非常绚丽，H5移动端底部固定菜单栏目，4个打包，需要的下载交流，
html5移动端底部固定菜单
06-12
下面我们将详细探讨如何实现一个HTML5移动端底部固定菜单。 首先，我们需要理解HTML5的基础结构，它通常包含`<!DOCTYPE html>`声明、`<html>`元素、`<head>`元素和`<body>`元素。在`<head>`中，我们会设置字符编码...
CSS3 SVG手机移动端底部图标导航栏特效
06-05
这是一款创意的CSS3 SVG手机移动端底部图标导航栏特效，点击加号功能图标滑动展开更多图标菜单选项。
手机端自适应底部导航条，带小图标的
02-26
这是一个手机端的自适应底部导航条，带小图标的，包括雪碧图。
手机端WAP底部悬浮快捷导航特效代码
07-29
手机端WAP底部悬浮快捷导航特效代码，默认三个图标居中显示，分别对应三个链接，离网页底部一端距离，懂代码人可以二次修改调整显示位置
Vue3＜script setup＞语法糖下，实现父子组件通信以及数据监听的三种方法。
薛定谔的猫的博客
10-14 2275
在Vue3的script setup语法糖中，没有办法通过Vue2的ref、props、parent、中央时间总线等等众多方法，通过this指针简单的实现父子组件的通信，网络上也很少有关于script setup语法糖的相关教程，所以决定自己写一个详细教程，方便以后学习查看并记录。
【vue3 vant 踩坑记录】
xh1506101064的博客
06-24 1411
起因：tab的active默认值为0，路由跳转到界面的值为2，使用的是setup语法糖，获取路由传参值之后，赋值给active，但是，发现active，没有被改变。 我们可以发现这个值是已经修改成功了的，但是视图并没有跟着变化，在视图中 active 的值依旧为0。以为是没有及时更新，但是使用的是ref应该不会存在这种情况。后来无意间调用了一下Tab的change事件，发现组件创建时，调用了tab的change事件，并且是最后才调用的。下面是我调用change是事件的代码，可以看出active 改为2之后，
移动端页面底部导航条固定方法
weixin_44805161的博客
04-15 4073
1.平时我们让导航栏不随页面滚动一般使用position:fixed进行固定,但这个方法在ios移动端有兼容性问题(当呼出键盘时底部就会被顶上去) 2.为解决这一问题,我们可以转变思路,让body和html不滚动,将屏幕分为两块区域,分别是导航栏和中间内容区域,然后中间内容区域设置over-flow:auto,让中间的内容区域自己滚动,从而达到页面滚动效果. 转载地址：https://www.ji...
必须要学会的修改第三方UI框架的样式
qq_53114797的博客
01-07 847
全面理解如何修改UI框架的内部样式，这边就以van3UI框架为例，其他的UI框架大同小异（antdesign有些许不同）
Vue3.2多页签导航来了：让你的应用更加灵活与强大！
最新发布
CRMEB小程序商城的博客
01-22 1005
tagList: [// 初始化默认展示【首页】标签导航meta: { title: '首页'}}),getters: {},actions: {},// 找出要删除的tag的索引值},// 持久化persist: {enabled: true, // 开启定义一个tag组件，从store中取出tagList并渲染;首页标签导航不可关闭，通过当前tag的path不等于首页的path来控制el-tag的closeable是否展示；
手机底部导航栏完整代码
u011927449的博客
07-06 4067
效果体验：http://hovertree.com/texiao/mobile/5.htm可以使用手机浏览器查看体验效果。以下是手机底部导航栏完整代码，HTML文件代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=devi.
vue移动端底部导航栏不使用第三方库代码并且可以点击切换
04-16
您可以使用 Vue Router 来实现一个底部导航栏，并使用路由来切换页面。您可以通过添加一个名为“active”的类来突出显示当前激活的导航栏项目。以下是一些示例代码的链接，供您参考： 1. Vue Mobile Bottom Navbar...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月木@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值