ミニ プログラムに Icon アイコンを実装する方法を簡単に分析します。
ミニプログラムにアイコンアイコンを実装するにはどうすればよいですか?次の記事では、ミニ プログラム アイコンの実装ソリューションをいくつか紹介します。お役に立てば幸いです。
#アイコンコンポーネント
アプレットによって提供されるプロパティネイティブ
| 属性 | タイプ | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| 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)
},
})ログイン後にコピー
使用例
デメリット<view>
<icon class="icon-close"></icon>
</view>ログイン後にコピー |
以上がミニ プログラムに Icon アイコンを実装する方法を簡単に分析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7546
15
1381
52
83
11
21
89
Python を使用して WeChat アプレットを開発する
Jun 17, 2023 pm 06:34 PM
モバイル インターネット技術とスマートフォンの普及により、WeChat は人々の生活に欠かせないアプリケーションになりました。 WeChat ミニ プログラムを使用すると、アプリケーションをダウンロードしてインストールすることなく、ミニ プログラムを直接使用して、いくつかの簡単なニーズを解決できます。この記事では、Python を使用して WeChat アプレットを開発する方法を紹介します。 1. 準備 Python を使用して WeChat アプレットを開発する前に、関連する Python ライブラリをインストールする必要があります。ここでは、wxpy と itchat の 2 つのライブラリを使用することをお勧めします。 wxpy は WeChat マシンです
小さなプログラムでも反応できますか?
Dec 29, 2022 am 11:06 AM
ミニプログラムはreactを利用することができます 使い方: 1. 「react-reconciler」に基づいてレンダラーを実装し、DSLを生成します; 2. DSLを解析してレンダリングするためのミニプログラムコンポーネントを作成します; 3. npmをインストールし、開発者ビルドを実行しますツール内の npm; 4. パッケージを独自のページに導入し、API を使用して開発を完了します。
WeChat ミニ プログラムにカードめくり効果を実装する
Nov 21, 2023 am 10:55 AM
WeChat ミニ プログラムでのカードめくり効果の実装 WeChat ミニ プログラムでは、カードめくり効果の実装は、ユーザー エクスペリエンスとインターフェイス インタラクションの魅力を向上させることができる一般的なアニメーション効果です。以下では、WeChat アプレットでカードめくりの特殊効果を実装する方法と、関連するコード例を詳しく紹介します。まず、ミニ プログラムのページ レイアウト ファイルに 2 つのカード要素を定義する必要があります。1 つは前面のコンテンツを表示するため、もう 1 つは背面のコンテンツを表示するためです。具体的なサンプル コードは次のとおりです: <!--index.wxml- ->&l
アリペイ、希少文字ライブラリを収集・補完する「漢字拾い-希少文字」ミニプログラムを開始
Oct 31, 2023 pm 09:25 PM
10月31日の当サイトのニュースによると、今年5月27日、アント・グループは「漢字拾いプロジェクト」の立ち上げを発表し、最近新たな進展を迎えた：アリペイが「漢字拾い-珍しい文字」ミニプログラムを開始協会からコレクションを収集する レア文字は、レア文字ライブラリを補完し、アリペイでのレア文字入力方法の改善に役立つように、レア文字に異なる入力エクスペリエンスを提供します。現在、ユーザーは「漢字ピックアップ」「珍文字」などのキーワードで検索することで「珍文字」アプレットに入ることができる。ミニプログラムでは、ユーザーがシステムで認識・入力されなかった珍しい文字の画像を送信し、確認後、Alipay のエンジニアがフォントライブラリに追加エントリを作成します。当サイトでは、発音が不明瞭な珍しい単語を対象とした最新の単語分割入力方法をミニプログラムで体験できることに注目しました。ユーザー解体
uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法
Oct 20, 2023 pm 02:12 PM
uniapp がミニ プログラムと H5 の間で迅速な変換を実現するには、具体的なコード例が必要ですが、近年、モバイル インターネットの発展とスマートフォンの普及に伴い、ミニ プログラムと H5 は不可欠なアプリケーション形式となっています。クロスプラットフォーム開発フレームワークとして、uniapp は一連のコードに基づいて小規模プログラムと H5 間の変換を迅速に実現し、開発効率を大幅に向上させます。この記事では、uniapp がミニ プログラムと H5 の間で迅速な変換を実現する方法と、具体的なコード例を紹介します。 1. uniapp uniaの紹介
Python で簡単なチャット プログラムを作成するためのチュートリアル
May 08, 2023 pm 06:37 PM
実装アイデア: チャット ルームのさまざまな機能を処理するために、スレッドのサーバー側を確立します。x02 クライアントの確立はサーバーよりもはるかに簡単です。クライアントの機能はメッセージの送受信と、特定の文字を特定の規則に従って入力するため、クライアント側では、メッセージ受信専用とメッセージ送信専用の 2 つのスレッドを使用するだけで、さまざまな機能を使用できます。使用しないでください。
ミニプログラム登録の操作方法
Sep 13, 2023 pm 04:36 PM
ミニ プログラムの登録操作手順: 1. 個人 ID カード、法人営業許可証、法人 ID カードおよびその他の提出資料のコピーを準備します; 2. ミニ プログラム管理のバックグラウンドにログインします; 3. ミニ プログラム設定ページに入ります; 4. 「基本設定」を選択; 5. 出願情報を入力; 6. 出願資料をアップロード; 7. 出願申請を送信; 8. 審査結果を待ちます。出願が不合格の場合は、理由に応じて修正してください9. 出願のフォローアップ操作は可能です。
WeChat ミニ プログラムのメンバーシップを取得する方法
May 07, 2024 am 10:24 AM
1. WeChat ミニ プログラムを開き、対応するミニ プログラム ページに入ります。 2. ミニ プログラム ページでメンバー関連の入り口を見つけます。通常、メンバーの入り口は下部のナビゲーション バーまたはパーソナル センターにあります。 3. メンバーシップポータルをクリックして、メンバーシップ申請ページに入ります。 4. 入会申込ページにて、携帯電話番号、氏名等の必要事項をご入力の上、送信してください。 5. ミニ プログラムは会員申請を審査します。審査に合格すると、ユーザーは WeChat ミニ プログラムの会員になることができます。 6. 会員になると、ユーザーはポイント、クーポン、会員限定アクティビティなど、より多くの会員権を享受できます。
