ミニプログラムにアイコンアイコンを実装するにはどうすればよいですか?次の記事では、ミニ プログラム アイコンの実装ソリューションをいくつか紹介します。お役に立てば幸いです。
#アイコンコンポーネント
アプレットによって提供されるプロパティネイティブ
| 属性 | タイプ | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| string |
## は |
アイコンのタイプです、有効な値: success、success_no_circle、info、warn、waiting、cancel、download、search、clear | size | |
| 23 | いいえ | #アイコンのサイズ | 色 | |
| いいえ |
アイコンの色はcssの色と同じです |
説明コンポーネント サイズ属性の長さの単位はデフォルトで px になり、入力単位は 2.4.0## 以降でサポートされます。 # ( rpx/px)
コンポーネントの color プロパティは、アイコンのすべてのピクセルの色を変更します。FAQアイコンとテキスト関数を同じ行に置きますか?はい、アイコン自体は、レイアウトを改善し、使いやすくするために生まれました。コードは次のとおりです。<view style="font-size: 17px;margin-top: 20px;">
我是一行文字，<icon type="success" size="15"></icon>我里面包含了图标！
</view>
実機ではアイコンが空白で表示される場合がありますまず第一に、この問題は、フォント ファイルのリンクが正しくないことが原因ではありません。ミニ プログラムの安全なドメイン名を追加し、WXSS で画像とフォントを読み込むと、外部ドメインが許可されます。アイコンがカスタム実装されている場合は、モデルと埋め込まれたフォント ファイルの種類を確認してください。互換性が原因である可能性があります。ミニ プログラムでは TTF および WOFF 形式のフォントを使用することをお勧めします。これら 2 つのフォントを使用していて状況が解決しない場合は、SVG 形式でのデータ埋め込みへの変更を検討できます。weui コンポーネント ライブラリのアイコン コンポーネントのアイコンを取り出してローカルに保存するにはどうすればよいですか?weui 公式 Web サイト (https://weui.io/) を直接開き、ブラウザーの開発者ツールでソース コードを表示し、リソース アドレスを見つけてダウンロードできます。または、WeChat の公式ドキュメント (https://developers.weixin.qq.com/miniprogram/design/#icon) からダウンロードします。利点箱から出してすぐに機能します。欠点success、success_no_circle、info、warn、waiting、cancel、download、search、clear タイプのみをサポートしており、開発ニーズを満たすには程遠いです。カスタム実装アイコン画像を直接使用利点シンプル粗雑ですが、各アイコンは画像に対応しています。欠点
スプライトとは、重複せず最小限に分散された方法で 1 つの画像に配置された一連の連続する画像です。使用するたびに、開始座標と縦横に表示される領域サイズを使用して、動的な切り替え効果を実現します。
スプライトによる爆発エフェクトを実現します。画像サイズは (650x650) ピクセルであるため、各小さなアイコンのサイズは (130x130) ピクセルです。これが、CSS スタイル設定の幅と高さが 130 ピクセルである理由であり、JS コードの移動ステップが 130 ピクセルである理由でもあります。 130に設定します。 jsのleftとtopはどちらも負の数ですが、これはここで表示されているアイコンの座標ではなく、背景画像が左上まで移動する距離を表しているためです。注: wxss で使用できるのはネットワーク イメージのみです。ローカル イメージは使用できません。コードは次のとおりです。 <!--icon.wxml-->
<view>
<icon class="sprite scale" style="background-position: {{left}} {{top}};"></icon>
</view>/* icon.wxss */
.sprite{
display: block;
width: 130px;
height: 130px;
background: url("https://i.loli.net/2021/11/15/7BH5gdkbLynrfM3.png") no-repeat;
}
.scale{
transform-origin: 0 0 0;
transform: scale(2,2);
}// icon.js
Page({
/**
* 页面的初始数据
*/
data: {
left:'0px',
top:'0px',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
var left = 0;
var top = 0;
const step = 130;
const stop = (650-130);
var i = setInterval(function() {
if (left >= stop && top >=stop) {
clearInterval(i)
} else {
left += step;
if(left >= 650){
left = 0;
top += step;
}
that.setData({
left: '-' + left +'px',
top: '-' + top +'px'
})
}
}, 100)
},
})利点
使用例
デメリット |
以上がミニ プログラムに Icon アイコンを実装する方法を簡単に分析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
WebStorm Mac版
便利なJavaScript開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
メモ帳++7.3.1
使いやすく無料のコードエディター
