CSS 疑似クラス: 空っぽだと光る (サンプルコード)

CSS 疑似クラス: 空っぽだと光る (サンプルコード)

最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その中で多くの興味深いことやいくつかの「奇妙なアイデア」に遭遇したことをご存知でしょう。この記事の背景は、ある朝、wxml ファイル内にhidden一連のwx:if/elseを見ていて、突然イライラしたことです。wx:if によってパフォーマンスの問題が発生するだけでなく、タグも冗長でした。

前回の記事[WeChatアプレットカスタムコンポーネントライブラリのyPickerコンポーネントの分析と省、市、地区間の3レベルリンクの実装]に続いて、省、市、地区間の3レベルリンクのカスタム実装という例を分析しました。詳細なコードが含まれているため、ここではこれ以上説明しません。呼び出し方法について説明します。

当時の私の考えはこうです。一方では「JavaScript で書きすぎない」という配慮から、他方では、それぞれ 3 つの変数を使用して、province、city、district を実装したため、JavaScript ではこの 3 つの変数のみに注意が向けられ、その間にあるスペースなどはすべて wxml ファイルに取り込まれてしまう、というものでした。このような:

<view class="部門の場所" bindtap="fixedshow">
  <view class="depart_title">場所</view>
  <view wx:if="{{provinces&&citys&&areas}}" class="placeholder decent_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="placeholder decent_content befselect" wx:else>現在の場所を選択してください</view>
  <view class="desc">変更がある場合は、修正して再度送信してください</view>
</ビュー>

(呼び出しにはその後の変更が含まれるため、ポップアップ ウィンドウの [確認] ボタンをクリックするのは、イベントのこのコードに表示される 3 つの変数に 3 つの変数を割り当てるときだけです。それ以外の場合、変更が行われると、[キャンセル] をクリックしても [確認] をクリックしても、変更は既に行われており、これは適切ではありません。)

レイアウトは次のとおりです。

.部門{
  幅: 100%;
  高さ: 96rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  フォントサイズ: 36rpx;
  フォントの太さ: 347;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
}
。位置{
  位置: 相対的;
  下境界線: 1rpx実線rgba(0,0,0,.009);
  ディスプレイ: フレックス;
  align-items:flex-start;
  パディングトップ: 20rpx;
}

.desc{
  位置: 絶対;
  右: 19rpx;
  下部: 4rpx;
  色: rgb(63,142,255);
  フォントサイズ: 23rpx;
}
.部門 .depart_title{
  幅: 20%;
}
.部門 .depart_content{
  左マージン: 10%;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
}
.部門.プレースホルダー{
  幅: 69%;
  テキストオーバーフロー: 省略記号;
  オーバーフロー: 非表示;
  空白: ラップなし;
} 

位置

ここで wx:if を置き換えることを決定したら、まず何に置き換えるかを考える必要があります。
wx:ifの機能は、存在するかどうかを判定することです。存在しない場合 (条件が満たされていない場合) は、 wx:elseまたはwx:elifのロジックに切り替わります。

さて、これを考えると、CSS 疑似クラス: :emptyを思いつくはずです。これは、私たちが望んでいることを実行します。要素 (コンテンツ) が空の場合...
私はすぐにコードに次の変更を加えました:

<view class="部門の場所" bindtap="fixedshow">
  <view class="depart_title">場所</view>
  <view class="placeholder decent_content">{{provinces}} {{citys}} {{areas}}</view>
  <view class="desc">変更がある場合は、修正して再度送信してください</view>
</ビュー>

次に、この疑似クラスをクラス - decent_content に追加します。

.placeholder:empty::before{
  内容: 「現在の場所を選択してください」;
  色: rgba(0,0,0,.6);
} 

ワックス

空白です!

情報を確認した後: :empty疑似クラスは、タグ コンテンツが空の場合、コンテンツ領域にスペースがあると一致しないことを意味します。

タグを記述するときは、タグ内にスペースや改行があるかどうかに必ず注意してください。 (改行はスペースとして解釈されることが多いです。)
単一でないタグに遭遇したときは、必ず終了タグに注意してください。

最終的な解決策は、js 内で 3 つの変数をスペースで接続し、ページにレンダリングすることです。

wx位置

(実際、これはカスタム セレクターであり、自動配置は Amap にリクエストを送信して、州、市、地区のフィールドを取得するだけです。コードは書きません...)


この時点で、1 つのことがわかります。上記では、空の疑似クラスだけでなく、before 疑似要素も使用していました。

実際、これは非常に一般的です。結局のところ、空要素だけがコンテンツを追加できるのです(CSS 全体を通して、before や after などの疑似要素だけが、テキストであれ画像であれ、ページにコンテンツを追加できるようです)。

もっと注意を払うべき領域が 2 つあると思います。

  • 疑似要素では位置が使用されていません。一般的に、要素(コンテンツを含む)の場合、「前」/「後」のスタイルを設定するには、配置、つまり表示される場所の指定が必要です。そうしないと、疑似要素内のテキストは表示されない可能性が高くなります。この記事の空白部分から、元のコンテンツによって覆われていると推測できます。
  • 最初の点から、 :beforeおよび:after疑似要素を使用してタグにコンテンツとグラフィックを挿入しても、空の疑似クラスの一致には影響しないという結論に達することができます。

この機能は非常に便利です。


上記から、この疑似クラスの最大の用途は「フィールド不足プロンプト」であることがわかります。これは非常に実用的です。さらに、このタスクを CSS に任せることで、「(レイアウト) の負担」を大幅に軽減し、エクスペリエンスを向上させ、メンテナンスを容易にすることもできます。

たとえば、プロジェクトを最適化するときに、要求されたすべてのフィールドに統一されたクラス名を追加しました。

.ym-empty:empty::before{
	内容:「データがありません。もう一度お試しください」
	表示: ブロック;
	テキスト配置: 中央;
	色: rgba(0,0,0,.6);
	/** その他の配置とフォント変更操作*/
}

これで、私の目を引いた CSS 疑似クラス: empty に関する記事は終わりです。CSS 疑似クラス empty の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  SpringBoot プロジェクトの Docker クイック デプロイメントの紹介

>>:  ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

推薦する

ロンボク実装 JSR-269

序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...

複数の古いプレーヤーの埋め込みコード

ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...

NodeサイトのForever+nginx導入方法例

私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...

JavaScript 組み込みの日付と時刻の書式設定のサンプル コード

1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...

GoogleとFacebookがDockerを使わない理由

この記事を書いた理由は、修正した分散 PyTorch プログラムを Facebook のクラスター上...

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...

Nginxはリバースプロキシを使用して負荷分散プロセス分析を実装します

導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...

VC6.0をWIN10にインストールすると使用できない問題の解決方法

VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...

Nginx/Httpd ロードバランシング Tomcat 設定チュートリアル

前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...

MySQLのint主キーの自己増分の問題を解決する

導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...

CentOS7 に YUM 経由で MySQL 5.7 をインストールする詳細な手順

1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...

Prometheus+Grafanaによるnginxの監視方法を分析する

目次1. ダウンロード2. nginxとnginx-vts-exporterをインストールする3. ...

MySQL で GTID モードをオンラインで有効または無効にする

目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...

MySQL における単一テーブルと複数テーブル、およびビューと一時テーブルに対する Update と Select の違い

1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...

MySQL 1対多関連クエリのページングエラー問題の解決方法

XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...