精华内容
下载资源
问答
  • 小程序图表
    万次阅读
    2020-03-24 18:01:57

    先上效果图

    实现原理就是一个view控件设置成类似于图中的样式,然后再固定在图标的右上方,原理比较简单, 下面贴上需要的代码。

    wxml:

              <form bindsubmit="这是图标点击事件" report-submit="true">                
                    <button class="iconBtn" form-type="submit">
                        <view class="remind-num" ">
                            12
                        </view>
                        <image class="icon-img" src="{{这是图标图片的url}}">
                        </image>
                        <view class="icon-text-view">这是图标</view>
                    </button>
               </form>

    wcss:

    iconBtn{
        width: 100%;
        height: 130rpx;
        background: rgba(155, 155, 155, 0);
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    
    }
    .iconBtn::after{
        border: none;
    }
    .remind-num{
    	border-radius: 40%;
    	position: absolute;
    	top: 2rpx;
    	right: 2rpx;
    	font-size: 20rpx;
    	/*padding: 4rpx 15rpx;*/
    	/*align-items: center;*/
    	text-align: center;
    
    	width: 50rpx;
    	line-height: 30rpx;
    	height: 30rpx;
    	color: var(--white);
    	z-index: 100;
    	background-color: rgba(221, 81, 76, 0.77);
    }
    .icon-img{
        margin-top: 10rpx;
        width: 65rpx;
        height: 65rpx;
    }

     

     

    更多相关内容
  • 小程序开发常用的ICO 打包下载,内有5000个ICO。图标图标很多,样式也很多。
  • APP小程序开发需要的图标素材,各个行业图标都已经分好类了,全行业覆盖;开发者必备素材。
  • 微信小程序图标——修改
  • 小程序开发常用的 1600 个 图标图标 小程序 开发 常用
  • uniapp小程序tabbar图标

    2022-07-25 11:33:45
    uniapp小程序tabbar整套图标,包含选中和非选择的
  • 微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。 只有9个类型的图标往往是不够的,需要拓展更多的icon组件图标。 第一种方法 直接使用...

    关于图标icon

    在这里插入图片描述

    微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。
    只有9个类型的图标往往是不够的,需要拓展更多的icon组件图标。

    第一种方案 直接使用图片(简单粗暴)

    缺点:

    1. 图片在文本里面不方便布局;
    2. 图片不方便修改颜色;
    3. 图片不能伸缩,放大之后会变模糊,不美观;
    4. 图片需要在本地或者网络上存储,使用起来不如图标一个名称方便;
    5. 如果图标太多,产生大量大HTTP请求;

    第二种方案 使用精灵图Sprite

    精灵图是以非重叠、最小化分布的方式排列成一张图片,加载的时候只加载一次,减少HTTP请求

    第三种方案 使用CSS样式绘制

    缺点

    1. 工作量大;
    2. 绘制时,需要统一一个中心点,否则控制位置比较麻烦;
    3. 不方便控制大小、颜色;

    第四种方案 使用矢量字体(最简单有效)

    矢量字体分为三类

    • Adobe 的 Type1
    • Apple 和 Microsoft 主导的 TrueType
    • Adobe Apple Microsoft 共同主导的开源字体 OpenType

    阿里巴巴的图标网站 : Iconfont-阿里巴巴矢量图标库
    提供常用图标下载,还提供自定义矢量图标字体的生成与下载

    第五种方案 使用矢量SVG文件

    SVG(Scalable Vector Graphics)是基于 XML 的一种矢量图形格式,它即可以作为单独的图形文件使用也可以嵌入到网页中并由 JavaScript 来操作,非常方便和灵活。

    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
    • SVG 用来定义用于网络的基于矢量的图形
    • SVG 使用XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
    • SVG 是万维网联盟的标准
    • SVG 与诸如 DOM 和XSL 之类的 W3C 标准是一个整体
    展开全文
  • 网页、app、小程序图标素材PNG格式

    千次阅读 2019-04-10 19:05:14
    我们在做自己的网页,app或者小程序(仅仅是个人练习的小demo)的时候,好多时候都会遇到找不到好看的图标的困扰。我自己写一些小东西的时候被图标困扰过,所以从网上搜集了大约1500多个小图标,全部是png格式的,...

    我们在做自己的网页,app或者小程序(仅仅是个人练习的小demo)的时候,好多时候都会遇到找不到好看的图标的困扰。我自己写一些小东西的时候被图标困扰过,所以从网上搜集了大约1500多个小图标,全部是png格式的,方便应用于自己的小demo中。减轻搜集素材的负担,投入更多的时间写代码。

    感谢那些提供素材的好心人,为我平时的学习提供了便利。我也向他们学习分享一下我收集的资源。践行开源精神 Open Source !!!

    下面是其中的一些:

     


    图标素材地址:点击访问我的百度网盘         提取码:3gfx (永久有效)

    也可以扫描下方二维码获得

     

    展开全文
  • uniapp 小程序 图标不显示

    千次阅读 2021-02-24 10:04:26
    不要把icon写在text里面 不然小程序显示不了, H5可以显示

    不要把icon写在text里面 不然小程序显示不了, H5可以显示

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 公众号小程序微商城导航图标素材同城小图标(全品彩色类5000个).rar
  • 微信小程序图标

    千次阅读 2017-03-30 21:28:35
    欢迎使用Markdown编辑器写博客小程序上线后,我们会发现手机微信里没有出现小程序的图标,我们可以通过以下方式让小程序图标显示出来:打开微信->发现->搜索->输入“小程序示例”->点击官方提供的小程序demo->推出小...
  • 主要介绍了微信小程序实现自定义加载图标功能,非常不错具有一定的参考借鉴价值,需要的朋友参考下吧
  • 在微信小程序里,希望出现点击图标图标先变色然后跳转到指定页面。 首先需要准备两张图标的图片,一张是未点击状态,一张是点击后的状态。 index.wxml &amp;amp;lt;view&amp;amp;gt; &amp;amp;...
  • 微信小程序icon图标使用详解

    千次阅读 2021-12-03 14:48:04
    icon 在微信小程序中用来显示图标
  • 微信小程序常用图标大全1

    千次阅读 2022-05-22 12:46:44
    微信小程序常用图标大全1
  • 微信小程序开发常用的1600个PNG图标 微信小程序开发常用的1600个PNG图标
  • 小程序各行业UI图标合集
  • 在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
  • 图标提取小程序

    2017-08-18 13:25:48
    程序图标提取小程序
  • tabBer图标固定尺寸是80*80 原图标设置之后 图标显示不协调 解决方法: 自己用PS改透视图 画布大小80*80 (单位注意改成像素!) 设置之后拖入使用的图标,调整到合适大小,然后隐藏背景保存即可 ...
  • 微信小程序如何引入图标

    千次阅读 2021-09-26 17:27:23
    微信小程序如何引入iconfont库的图标 学习微信小程序过程中需要引用iconfont库的图标,这里做个总结【从引入到使用】; 网址:上iconfont官网后自行注册个账号; 搜索自己需要的图标,加入到购物车,并自行创建一个...
  • 标签自带size属性,也可以通过css调整样式(使用过程中,在电脑上打开微信小程序,样式会有偏)。不过不影响手机端使用。 使用步骤 1.微信小程序开发工具,项目的根目录,鼠标右键,打开终端,输入 npm init -y...
  • 微信小程序添加icon图标教程

    千次阅读 2021-12-22 20:02:40
    1 官方自带 ... <icon type="success"&...阿里巴巴矢量图标库 地址 https://www.iconfont.cn/ 2.1 使用 比如:我搜索 爱心 选择点击 购物车 点击右上方的 购物车 添加至项目 我随便选择 一个 demo项目,然后点确认
  • 微信小程序tabBar图标大小64 * 64

    千次阅读 2020-07-20 16:15:55
    使用原生tabBar,图标过大过都会变形。 原生tabBar中icon的标准大小是 64 * 64.
  • 微信小程序中给button加入点击图标

    千次阅读 2022-04-19 13:44:34
    有上述的9种,分别为: success, success_no_circle, info, warn, waiting, cancel, download, search, ... } 效果图: 至于开头所说的图标样式,这里用的是type=“search”,所以是放大镜,你们根据需求改就好勒!
  • 最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的...
  • 主要介绍了微信小程序开发之tabbar图标和颜色的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序获取外部图标iconfont

    千次阅读 2020-04-07 11:23:39
    选择图标–>添加到购物车 随后转到图标管理–>我的项目/我的图标–>font class–>打开下面的链接,把链接打开后出现的代码复制下来,用一个wxss文件进行保存, 在其他的wxml文件当中通过class="icon-...
  • 如何在微信小程序中使用字体图标

    千次阅读 2020-10-14 09:19:24
     打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代码:  第二步,转换iconfont.ttf文件为base64格式:  然后将下载的包解压,你会看到一个格式为ttf的文件,注意,我们转换的...
  • 【微信小程序】引入Base64 图标

    千次阅读 2022-04-13 16:36:27
    小程序icon图标需要使用base64编码后的icon,不使用png、jpg等格式的图片 解决方法 1.进入阿里图标库 https://www.iconfont.cn/ 2. 创建一个项目 项目管理 ------》 我的项目 新建一个项目 勾选 彩色 Base64 再...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 270,462
精华内容 108,184
关键字:

小程序图表