vue开发移动端底部导航条功能

url('../fonts/iconfont.ttf?t=1522237704791') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg?t=1522237704791#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-backtop:before {
content: "e689";
}

.icon-personal:before {
content: "e610";
}

.icon-scan:before {
content: "e609";
}

.icon-clear:before {
content: "e622";
}

.icon-msg:before {
content: "e7a8";
}

.icon-category:before {
content: "e7f9";
}

.icon-search:before {
content: "e616";
}

.icon-delete:before {
content: "e6ac";
}

.icon-service:before {
content: "e643";
}

.icon-setting:before {
content: "e64c";
}

.icon-back:before {
content: "e60f";
}

.icon-shop:before {
content: "e624";
}

.icon-close:before {
content: "e60c";
}

.icon-more:before {
content: "e85c";
}

.icon-home:before {
content: "e699";
}

.icon-collect:before {
content: "e78c";
}

.icon-cart:before {
content: "e635";
}

src/assets/scss/index.scss

@import 'icons';
*{
  margin:0;
  padding:0;
}
html,body{
  // 必须设置，否则内容滚动效果无法实现
  width:100%;
  height:100%;
}

总结

到此这篇关于vue开发移动端底部导航条功能的文章就介绍到这了,更多相关vue 移动端底部导航条内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！