ミニ プログラムでフローティング ボタンを実装する方法を段階的に説明します (コード例)

ミニ プログラムにフローティング ボタンを実装するにはどうすればよいですか?ミニプログラムでフローティングボタン機能を実装する方法については、以下の記事で紹介していますので、ご参考になれば幸いです。

日々の小規模なプログラム開発では、記事の詳細ページなど、ページがスライドするときにボタンを一時停止し、位置を変更しないようにする必要がある場合があります。共有ボタンをフローティングにしたり、ホームページにフローティング ボタンを設置して、美しくて便利なスケーラブルな機能を実装したいと考えています。

フローティング ボタンの実装方法を 2 つから説明します1 つはピクチャ ボタンを実装する方法、もう 1 つはボタンをフローティングする方法です。 [関連する学習の推奨事項: ミニ プログラム開発チュートリアル ]

画像ボタンの実装

ミニ プログラムが提供するボタン コンポーネントには、画像を個別に設定する機能はありません。ミニ プログラムには自然なコンポーネントのサポートはありませんが、この効果は自分で実現できます

最初のコード

ページ コード

<!--pages/content-detail/content-detail.wxml-->
<button plain=&#39;true&#39;   class="circle">
  <image mode=&#39;aspectFill&#39; src=&#39;/images/icon/collect.png&#39; class=&#39;image&#39;></image>
</button>

css スタイルコード

.circle[plain] {
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

.image {
  width: 64rpx;
  height: 64rpx;
}

circle はボタンのクラス、image はピクチャのクラスです

コードは非常に単純です。Xiaodan が上記のコードを全員に説明します

• ##ボタンの表示を非表示にする
  画像を表示したいのですが、ボタンは画像とともにパッケージ化されているため、ボタンを非表示にする必要があります。

  plain='true' この属性達成することができます。

• ボタンの境界線を非表示にする
  ボタンを非表示にすることに加えて、その境界線も非表示にする必要があります。対応する CSS スタイルは次のとおりです:

  border: none 、ここで [plain]

  を CSS クラスに追加する必要があることに注意してください。たとえば、

  .circle[plain]、それ以外の場合はボーダーです。消えないかもしれない。

• 画像とボタンの配置
  画像のサイズはボタンのサイズと一致する必要があります。配置を実現するには、ボタンを設定する必要があります

  padding: 0

フローティング ボタンの実装

画像ボタンを設定した後、フローティングにする必要があります。フローティング効果、ボタンを移動するだけで済みます スタイルの位置は、fixed

.circle[plain] {
  display: flex;
  margin-right: 40rpx;
  right: 0;
  position: fixed;
  bottom: 15%;
  padding: 0;
  border: none;
  width: 64rpx;
  height: 64rpx;
}

に設定できます。position は、さまざまな値を持つ、position 属性です。fixed# の公式の定義を見てみましょう。

## は要素ではありません。スペースを残す代わりに、画面のビューポートを基準とした相対位置を指定することで要素の位置を指定します。画面がスクロールしても要素の位置は変わりません。印刷時、要素は各ページの固定位置に表示されます。固定属性は、新しいスタッキング コンテキストを作成します。要素の祖先のtransform属性がnone以外の場合、コンテナはビューポートからその祖先に変更されます。

フローティング ボタンのコードを完全に実装しました。具体的な効果を見てみましょう

概要

実際のところ、フローティング ボタンを実装するためのコードの量はそれほど多くありません。重要なのは、CSS についてのより深い知識を持っていることです。実装はそれほど難しくありません。フローティング ボタンの実装は単なるおかずです。 。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上がミニ プログラムでフローティング ボタンを実装する方法を段階的に説明します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。