首页 > 微信 > 详细

微信小程序——自定义图标组件

时间:2018-10-10 11:49:48      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:oba   便在   head   库项目   using   sans   dex   padding   prope   

字体图标在网页中非常常见了。为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件。

自定义图标组件的代码如下:

下面的代码是icon文件夹下面的4个文件

技术分享图片

 

index.wxml:
<view
  class="custom-class ss-font ss-icon-{{ name }}"
  style="{{ color ? ‘color: ‘ + color : ‘‘ }}; {{ size ? ‘font-size: ‘ + size : ‘‘ }}"
  bind:tap="onClick"
>
  <view wx:if="{{ info !== null }}" class="ss-icon__info">{{ info }}</view>
</view>

上面的  ss-font  和 ss-icon  是根据你在阿里巴巴图标库项目中自定义的,我的如下图:

技术分享图片

 

index.js:

Component({
  options: {
    addGlobalClass: true
  },

  externalClasses: [‘custom-class‘],

  properties: {
    info: null,
    name: String,
    size: String,
    color: String
  },

  methods: {
    onClick() {
      this.triggerEvent(‘click‘);
    }
  }
});

上面如果理解有困难的可以先看一下小程序组件介绍大概了解一些基本概念。

 

index.json:

{
  "component": true
}

 

index.wxss:

/**
这里放你的所有图标的代码
在阿里巴巴矢量库,选择 Unicode 模式,下载解压后的iconfont.css里面的代码,下面有截图可供参考
**/
.ss-icon__info {
  color: #fff;
  left: 100%;
  top: -.5em;
  font-size: 0.5em;
  padding: 0 0.3em;
  text-align: center;
  min-width: 1.2em;
  line-height: 1.2;
  position: absolute;
  border-radius: 0.6em;
  box-sizing: border-box;
  background-color: #f44;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}

 

技术分享图片

技术分享图片

 

API:

参数说明类型默认值
name 图标名称 String -
info 图标右上角文字提示 String | Number -
color 图标颜色 String inherit
size 图标大小,如 16px1em String inherit
custom-style 自定义样式 String -

 

使用方法:

在index.json引入该组件:

"usingComponents": {
  "ss-icon": "/components/icon/index"
}

 

设置name属性为对应的图标名称即可。

<ss-icon name="tel" />

 这些图标就是你自己定义的。像我下面的电话图标:

技术分享图片

像什么颜色,大小的配置可以查看上面的API表格。这里就不一一赘述了~

 

 

 

微信小程序——自定义图标组件

标签:oba   便在   head   库项目   using   sans   dex   padding   prope   

原文:https://www.cnblogs.com/sese/p/9765344.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号