uniapp uview引入阿里图标，u-dropdown自定义图标

最新推荐文章于 2024-05-29 11:43:47 发布
最新推荐文章于 2024-05-29 11:43:47 发布
阅读量3k 收藏 2
点赞数 3
分类专栏： 前端 文章标签： css vue uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43857653/article/details/113643690
版权

1.去阿里图标库下载所需图标

2.解压 把iconfont.css放到项目文件夹
在这里插入图片描述

在这里插入图片描述

3.修改iconfont文件 删除其他的url 只留一个
在这里插入图片描述

后面是使用额名称或是去阿里图标图编辑查看
在这里插入图片描述
在这里插入图片描述
需要在u-icon上加custom-prefix属性就可以使用了
在这里插入图片描述

修改uview的组件找到下拉的组件
把组价接收的menuicon变成数组形式，对应标题
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
效果：
在这里插入图片描述

葫芦娃y
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uView 扩展图标(使用阿里iconfont图标)
weixin_47218793的博客
09-29 3451
uView引用阿里图标 步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击 下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...
uniapp uView u-picker组件三级联动Demo
02-12
- 1、分2个入口：一个添加，一个编辑（编辑涉及到数据回显） - 2、添加的时候，展示的数据是默认的，是上一列第一行数据的详情（所有的年级（第一列），一年级对应的班（第二列），一班对应的学生（第三列）） ...
uView u-dropdown样式修改,去掉一个箭头icon
m0_58373910的博客
08-25 491
uView u-dropdown样式修改,去掉一个箭头icon
随后记： uniapp uview u-dropdown 下拉菜单固定高度滑动不生效
最新发布
weixin_63515766的博客
05-29 749
uniapp uview u-dropdown 下拉菜单固定高度滑动不生效
uni-app +uViewUI的u-dropdown遮罩和层级问题
HHHHH2187的博客
10-26 949
问题1：点击下拉菜单后出现多余的灰色遮罩，很影响外观，如下图所示。解决：找到node_modules/uview-ui/components/u-dropdown/u-dropdown.vue这个文件，找到这个u-dropdown__content__mask类名加上 opacity: 0;如下图示。
uniapp---uniapp使用iconfont
maidu_xbd的博客
11-03 412
uniapp使用iconfont步骤如下： （1）https://www.iconfont.cn/登录自己的账号; （2）搜索图标，加入购物车，全部图标加入购物车完毕后点击购物车，添加至相应的项目; （3）获取在线链接后在【App.vue】全局引入，注意在//at前面加入https: <style> /*每个页面公共css */ @import url("https://at.alicdn.com/t/font_2162736_ph4bw7qi47m.css") .
uniapp：mosowe-dropdown下拉菜单
mosowe
04-15 1054
另一个类型的下拉菜单，当列表长度大于50的时候自动开启虚拟滚动，兼容uniapp项目的V2/V3版本。
在uni-app中引入iconfont-阿里巴巴矢量图标库
weixin_44090040的博客
05-24 257
1、下载iconfont 2、在main.js中引入 import Vue from 'vue' import App from './App' //引入uView-ui组件库（注意这两行要放在 import Vue 之后） import uView from "uview-ui"; Vue.use(uView); import './static/iconfont/iconfont.css'; Vue.config.productionTip = false App.mpType = 'app'
uniApp+uView 实现 tabs标签+drop-down下拉组件
DevilAngelia的博客
07-05 3088
2.字段 字段 类型 默认值 可选值 说明 right Boolean false - 是否显示tabs右侧插槽 list Array [] - 标签数组，元素为对象，如[{name: ‘推荐’}] itemStyle String padding-left: 15px; padding-right: 15px; height: 40px; - 菜单item的样式 activeStyle Object { color: ‘#FB7299’, fontSize: ‘14px’ }
uview2.x u-picker省市区的数据js
06-01
uview2.x u-picker省市区的数据js
通过Hbuilder X创建uni-app项目并引入UView
08-18
首先，在项目的根目录下运行`npm install uview-ui --save`命令，这将下载并安装UView UI库。安装完成后，打开main.js文件，导入UView并注册全局组件： ```javascript import uView from 'uview-ui'; Vue.use(uView...
uni-app下拉框实现
12-18
uni-app下拉框实现，纯原生写法
uni-app下拉实例模板
04-04
uni-app的点击下拉实例模板，非常好用，可以放心使用。
uniapp-tailwind-uview-starter:利用uniapp + tailwindcss + uview构建的一套基础模板，可以使用Webstorm或者vscode开发
04-03
uniapp-tailwind-uview-starter利用uniapp + tailwindcss + uview构建的一套基础模板背景：之前用uniapp + uview开发了一大一小两个小程序， css方案用的原子风格的，发现用的还是挺爽的，就在想能不能用上tailwind...
uniapp使用uview组件实现省市区三级联动
06-29
npm i uview-ui -S ``` 安装完成后，在`main.js`文件中引入uView，并配置全局注册： ```javascript import uView from 'uview-ui'; import Vue from 'vue'; Vue.use(uView); ``` 接下来，我们来创建省市区三级...
uniapp中如何使用iconfont字体图标
cuilinlong的博客
12-23 353
uniapp中如何使用iconfont字体图标
uniapp Dropdown 下拉菜单无法滑动问题
weixin_43993613的博客
06-27 1369
uniappDropdown 下拉菜单无法滑动问题
uni-app：实现简易自定义下拉列表
weixin_46001736的博客
10-10 4127
uni-app：实现简易自定义下拉列表
uni-app 下拉刷新
刘骐毓的博客
07-19 5290
1.在pages.json中需要下拉的页面中设置style {"path": "pages/tabbar/tabbar-1/tabbar-1", "style": { "navigationBarTitleText": "文章", "enablePullDownRefresh": true, // 开启下拉 "backgroundTe...
uniapp uview正确使用u-scroll-list
07-12
1. 在uni-app项目中导入uview-ui组件库。你可以参考uview官方文档来进行导入：https://www.uviewui.com/components/quickstart.html 2. 在需要使用u-scroll-list的页面中，引入u-scroll-list组件。可以使用以下代码...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

葫芦娃y

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

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

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

打赏作者

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

抵扣说明：

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

余额充值