WeChatウィジェットbuttonコンポーネントカスタムスタイル

背景色

wxmlコード

<button class='btn' bindtap='sumbit' > button>

wxssコード

.btn {
  width: 90%;
  margin-top: 30rpx;
  background-color: #FFCC00;
  color: #FFF;
}

background-colorプロパティは背景色を変更し、colorはフォント色を変更します.ここで注意してください.コンポーネントにtype='....'と書くと、次のコードなど、背景色の変更は無効です.

<button class='btn' bindtap='sumbit' type='primary'> button>

ボタン外枠除去

ウィジェットで提供されるbuttonコンポーネントのデフォルトには枠線があり、ボタンの枠線を削除するにはwxssスタイルコードに追加する必要があります.

.btn::after {
  border: 0;
}

ボタンクリック時の背景色

wxmlコード

<button class='btn' bindtap='sumbit' hover-class='btn_hover'> button>

wxssコード

.btn_hover {
  background-color: pink;
}

ここで、hover-classがポイントです.このプロパティは、ウィジェットドキュメントで説明されています.
タイプ:Stringデフォルト:button-hover説明:ボタンを押すスタイルクラスを指定します.hover-class='none'の場合、クリック効果はありません
作者:座れないプログラマー
リンク:https://www.jianshu.com/p/80f9d8271d24
出典:簡書
著作権は作者の所有である.商業転載は著者に連絡して許可を得てください.非商業転載は出典を明記してください.