"tabBar":{ "iconfontSrc":"static/iconfont/iconfont.ttf", "list":[{ "pagePath":"pages/index/index", "iconfont":{ "text":"\ue7d3", "selectedColor":"#409EFF" }, "text":"组件" },{ "pagePath":"pages/user/user", "iconfont":{ "text":"\ue63e", "selectedColor":"#409EFF" },...
用的是uni-ui开发,用 HBuilderX 创建的项目,想使用 自带的 uni-icon 作为底部的图标,看了网上的,都基本没说怎么用,都是导入外部字体。没办法,只能在 static 下新建了个目录,把 uniicons.css 和 uniicons.ttf 拷贝进去,希望能有大佬指导下方法。 401a542a2e340de03c79f9f7f84ee3c.png "tabBar": { "col...
在app的实际开发中涉及到,字体图标可使用比较多。一些小知识点,记录一下。 "pages": [ // pages数组中第一项表示应用启动页 { "path" : "pages/tabBar/main/main", "style" : { "navigationBarTitleText": "首页", "enablePullDownRefresh": true, "app-plus": { "bounce": "vertical", "...
1、思路:参照原来导航栏的写法,延用原来TabBar的样式布局,在每个栏目的首页添加自定义导航栏,并使用固定定位放在底部,自定义组件的具体代码: <!-- @时间:2020-03-16 @描述:自定义底部导航栏 @使用: 在main.js全部引入: import tabBar from "@/pages/common/tabBar.vue" Vue.component('tabBar', tabBar) 在...
在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,无法通过一套代码来做通用平台的适配。比如说中间按钮凸起,动态隐藏某个tab(不同角色展示不同功能),使用字体图标,数字角标等,这些功能不是所有平台都支持。今天我们就用一套代码来实现这些功能全...
uniapp tabBar使用icon图标 效果图 使用步骤 1、【阿里巴巴图标库】https://www.iconfont.cn/ 下载 图标字库,不会下载的可以看这个视频教程 https://www.bilibili.com/video/BV1F64y1b7nv 2、将下载好的图标字库放在static下 3、在app.vue引入 1 2
}/*这里引入字体图标,如果使用字体图标的话*/@import'@/common/font/iconfont.css';.tabbar{position: fixed;z-index:99;width:100%;height:100rpx;background-color:#ffffff;bottom:0;left:0;box-shadow:0rpx4rpx8rpx0rpxrgba(0,0,0,0.5);border-radius:0px0px0px0px;opacity...
(1)打开阿里巴巴矢量图标库(Iconfont) (2)找到合适的图标加入购物车 (3)选择合适的颜色和格式下载即可 第三步:在pages.json文件下配置tabBar { "pages":[ ... ],"tabBar": { "color":"#8a8a8a","selectedColor":"#00aa00","borderStyle":"black","backgroundColor":"#ffffff","list": [ ...
底部导航:tabBar 开发记录: 1、查看uni.ttf字体图标对应的Unicode编码:使用软件fontcreator,打开字体文件,就可以看到图标对应的Unicode编码。 2、使用字体图标: CSS中:.test{font-family: uniicons;}.test::before{font-size: 60rpx;content: "\e563";} ...
"tabBar": {"color": "#bfbfbf","selectedColor": "#515151","borderStyle":"black","backgroundColor":"#ffffff","list": [{"pagePath":"pages/index/index", //页面路径"text":"首页", //tab字体显示"iconPath":"static/tabBarIco/index.png", //未选中tab图标路径"selectedIconPath":"static/tabB...