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

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

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

フローティング ボタンの実装方法を 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

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

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

概要

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

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

をご覧ください。 ！

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