最近私の記事を読んだ人なら誰でも、私が現在WeChatミニプログラムプロジェクトを担当しており、その中で多くの興味深いことやいくつかの「奇妙なアイデア」に遭遇したことをご存知でしょう。この記事の背景は、ある朝、wxml ファイル内に 前回の記事[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 を置き換えることを決定したら、まず何に置き換えるかを考える必要があります。 さて、これを考えると、CSS 疑似クラス: <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); } 空白です! 情報を確認した後:
最終的な解決策は、js 内で 3 つの変数をスペースで接続し、ページにレンダリングすることです。 (実際、これはカスタム セレクターであり、自動配置は Amap にリクエストを送信して、州、市、地区のフィールドを取得するだけです。コードは書きません...) この時点で、1 つのことがわかります。上記では、空の疑似クラスだけでなく、before 疑似要素も使用していました。 実際、これは非常に一般的です。結局のところ、空要素だけがコンテンツを追加できるのです(CSS 全体を通して、before や after などの疑似要素だけが、テキストであれ画像であれ、ページにコンテンツを追加できるようです)。 もっと注意を払うべき領域が 2 つあると思います。
この機能は非常に便利です。 上記から、この疑似クラスの最大の用途は「フィールド不足プロンプト」であることがわかります。これは非常に実用的です。さらに、このタスクを CSS に任せることで、「(レイアウト) の負担」を大幅に軽減し、エクスペリエンスを向上させ、メンテナンスを容易にすることもできます。 たとえば、プロジェクトを最適化するときに、要求されたすべてのフィールドに統一されたクラス名を追加しました。 .ym-empty:empty::before{ 内容:「データがありません。もう一度お試しください」 表示: ブロック; テキスト配置: 中央; 色: rgba(0,0,0,.6); /** その他の配置とフォント変更操作*/ } これで、私の目を引いた CSS 疑似クラス: empty に関する記事は終わりです。CSS 疑似クラス empty の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: SpringBoot プロジェクトの Docker クイック デプロイメントの紹介
>>: ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します
序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...
ウェブページに表示されるプレーヤーは、WMP/RealPlayer/Flash Player に過ぎ...
私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...
1. 基礎知識(日付オブジェクトのメソッド) 😜 getFullYear() は年を表す4桁の数字を...
この記事を書いた理由は、修正した分散 PyTorch プログラムを Facebook のクラスター上...
Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...
VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...
前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...
導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...
1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...
目次1. ダウンロード2. nginxとnginx-vts-exporterをインストールする3. ...
目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...
1. テーブルAのデータを使用してMySQLのテーブルBの内容を更新するたとえば、データ テーブル内...
XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...