uniapp学习（二）

最新推荐文章于 2023-08-05 20:26:49 发布
最新推荐文章于 2023-08-05 20:26:49 发布
阅读量200 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43288747/article/details/106943966
版权

uniapp自定义导航的按钮
在这里插入图片描述
首先是路由配置，fontSrc是图片路径，它不支持其他格式，完成项目时，UI设计给的图标不符合，我自己去的阿里图标库找的，你可以登录阿里图标库，找到自己要用的图标，加到购物车而不是直接下载，然后点击购物车，会出现
在这里插入图片描述
点击添加至项目，没有项目新建成功后进入
在这里插入图片描述
记住代码e69f，下载至本地，成功后将ttf的文件添加到自己的项目里，引用的时候代码前加\u

weixin_43288747
关注
专栏目录
Uniapp学习心得体会
m0_66085294的博客
06-24 325
比如，我们可以使用微信开发者工具来调试Uniapp中的小程序，在H5端上，我们也需要了解不同的浏览器调试工具。如前所述，Uniapp自带一些基本的UI组件，但是，针对某些应用需求，我们可能需要更丰富的UI组件。在Uniapp中，我们可以使用flexbox和grid来实现不同的布局，并使用不同的CSS样式来加强应用程序的可视化效果。通过不断地学习和实践，我们可以更好地掌握Uniapp的使用，构建出高质量的应用程序。Uniapp的学习需要不断地实践，这能够帮助我们更好地掌握Uniapp的基本用法。
uniapp学习笔记之知识点大总结
Qiuxuntao的博客
08-24 1873
uniapp学习笔记之知识点大总结
uniapp引入字体文件
weixin_44860425的博客
06-18 2776
转换地址点我进去 将下载好的字体放进项目中 static里面 文件大于40kb需要转成base64格式 转换完之后把代码复制下来 新创建一个css 然后copy进去 @font-face { font-family:'itemfont'; src: url(data:application/font-ttf;charset=utf-8;base64,我所在的位置把转换后的代码全部copy进来 } App.vue引入css <style lang="scss"> @im
uniapp中 安卓头部使用 iconfont 是报错
hjh15827475896的博客
08-05 692
在使用uni-app时，使用 style app-plus buttons 时是可以使用iconfont的，文档没有说 fontSrc 的写法，今天试了一下 ，fontSrc是要写绝对路径的。不然会报错 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style":{ "app-plus":{ ..
uniapp引入inconfont自定义导航栏
qq_55272229的博客
08-05 1814
2.将css文件复制粘贴项目的公共css目录和ttf文件导入static目录。2.下载到本地解压后,将其中的ttf文件,放在static静态目录下。3.在page.json中对全局文件进行配置tabBar(导航图标)4.此时就可以在list对导航item添加iconfont属性。1.同上下载到本地,但是需要在项目设置中把base64码下载。uniapp本身的全局设置中有个iconfontsrc属性。1.iconfont将需要的icon添加至项目。4.app.vue进行全局css样式导入。
使用uniapp开发APP，自定义导航栏按钮
WeiflR10的博客
03-02 5003
先上效果图 首先要在page.json中配置app-plus 官方文档:uni-app官网 { "path": "pages/index/index", "style": { "navigationBarTitleText": "个人信息", "app-plus": { "titleNView": { "buttons": [{ "text": "保存", "fontSrc": "/static/icon/ic
uniapp 导航栏自定义图标
偷喝汽水的博客
11-10 2281
导航栏右上角的图标 自定义 一、阿里图标库找到需要的图标 加入购物车 二、打开购物车 下载代码到项目里 static 文件夹下 三、下载完成后，有一些文件 四、page.json titleNView中 fontSrc 是上面下载文件中 后缀 ttf 图片的本地路径，text 是 .json 文件中的unicode ，格式改为 ‘\u’ 加上unicode 的值 { "path": "pages/index/value", "style...
uniapp 二级联动.zip
06-19
本项目"uniapp 二级联动.zip"显然是一个关于使用uniapp进行二级联动功能开发的实践案例，这在很多数据筛选、地区选择等场景中非常常见。下面，我们将深入探讨uniapp二级联动的实现原理和相关知识点。 首先，理解...
uniapp学习视频
01-13
### uniapp学习视频知识点概述 #### 一、UniApp简介 UniApp是一种使用Vue.js开发所有前端应用的框架，它采用一套代码可以编译到多个平台（如H5、小程序、APP等）。UniApp不仅支持各类主流的小程序平台（如微信小...
Uniapp-学习项目
01-03
这个“Uniapp-学习项目”正是针对这个强大的框架的学习资源，旨在帮助开发者快速掌握Uniapp的使用技巧和最佳实践。 一、Uniapp框架概述 Uniapp的核心理念是“一次编写，多端发布”，它将Vue.js的组件化思想与原生...
在 uniapp 中使用 fontawesome
BlackParade的博客
07-20 1954
在 uniapp 中使用 fontawesome 包括导航栏和页面上
uni-app引入字体图标库以及关于原生页面顶部按钮图标的设置
memedadexixaofeifei的博客
02-22 861
将iconfont.css文件导入， 去掉： src: url('iconfont.eot?t=1582357420622'); /* IE9 */ src: url('iconfont.eot?t=1582357420622#iefix') format('embedded-opentype'), /* IE6-IE8 */ , url('iconfont.woff?t=1...
uni-app 导航栏使用iconfont 字体图标（unicode引用方式）
weixin_44433499的博客
01-28 3154
unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件 ，新建一个专门存放文件夹。 复制 &#xe73b 设置导航栏字体图标： "text": "\ue73f", "fontSrc":"/static/iconfont/iconfont.ttf" 效果图如下： ...
Uni-App - 使用 iconfont 图标或者自定义图标
热门推荐
牧码的博客
03-14 2万+
一、阿里巴巴图标矢量库 注意事项： 1、修改项目内的图标字体名称（iconfont 是 uni 的关键字暂不能用）。 2、使用网络字体。 二、项目使用 1、拷贝iconfont.css 文档到项目中，并修改引入的字体路径 @font-face {font-family: "eosfont"; src: url('https://at.alicdn.com/t/font_9...
如何在uni-app中引入iconfont图标
shika233的博客
03-19 1万+
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标，这里和vue其他地方引用的步骤一致，如果是第一次使用iconfont请自行百度使用方法，因为我一直使用的在线链接方式引入，所以这里也只介绍这种方式引入uni-app step2 把下面的代码放在app.vue里面 /* icon图标 */ @font-face { font-family...
uni-app添加外部Iconfont图标-过程很坎坷
qq_1905369638
08-20 1万+
uni-app添加外部Iconfont图标-过程很坎坷 第一次用Markdown写博客，有点不习惯，但总归要习惯的，哈哈。 昨天在uniapp用到图标，发现阿里的图标不错，想拿来用一下，出现了问题就是样式没引用成功，在微信开发者工具上只看到一个小正方形，不管样式是放在App.vue进行全局引用，还是在页面的style里面引用，发现对应的图标就是完全不显示，下面来说说大概过程。。。 其实在style...
关于uni-app App-plus中iconfont图标的引入没效果，博主踩过的坑
梦之所以
05-19 5191
在做项目的时候，我们可能习惯性的会选择font-class类型 然后在线拷贝css文件，添加到项目文件中，结果到了app-plus时，发现还缺少ttf文件的引入 "buttons": [{ "fontSrc": "/static/iconfont.ttf", "text": "\ue66e", "fontSize": "26", "color": "#fff", "float": "left", "backgr
[每天进步一点点~] uni-app colorUi使用教程
DarlingYL的博客
11-12 1335
1.导入插件及配置 #从uni-app插件市场搜索colorUi，下载地址????https://ext.dcloud.net.cn/plugin?id=239 导入插件到项目中或者下载插件压缩包 下载插件压缩包的，将压缩包解压后的colorui文件夹复制到项目根目录下；导入插件不用进行此步操作。 App.vue 引入关键Css main.css icon.css &l...
Uni使用iconfont图标或者自定义图标
well2049的博客
12-01 7915
首先到阿里巴巴图标矢量库里面掉选自己喜欢的图标收藏到自己项目里面的。 注意事项： 1，修改项目内的图标字体名称（iconfont是uni的关键字暂不能用）。 2，使用网络字体。 项目使用 1，拷贝iconfont.css 文档到项目中，并修改引入的字体路径： @font-face {font-family: "eosfont"; src: url('https://at.alicdn.com...
uniapp将二进制文件转为视频文件
最新发布
06-03
UniApp是一个跨平台的开发框架，它本身并不提供将二进制文件转为视频文件的功能。...建议你先学习一下FFmpeg的基本使用和UniApp中插件的开发方法。如果需要更详细的帮助，可以提出具体的问题，我会尽力回答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值