WeChat アプレット wxapp ナビゲーション ナビゲーターの詳細な説明

この記事は主にWeChatミニプログラムwxappナビゲーションナビゲーターの関連情報を詳細に紹介し、必要な友達が参照できるように簡単なサンプルコードを添付します

WeChatミニプログラムwxappナビゲーションナビゲーター

WeChatミニプログラムは最近非常に人気があります。 、友達の輪、Weibo、フォーラム、その他の場所はすべて忙しいです。これはフロントエンド開発の春であり、フロントエンドエンジニアはたくさんのお金を稼ぐことができるため、私はWeChatミニプログラムの知識を私の中で学びました。空き時間、ここに記録:

navigator

属性名	タイプ	デフォルト値	説明
url	文字列		アプリ内ジャンプリンク
redirect	Boolean	false	現在のページを閉じるかどうか
hover-class	String	navigator-hover	hover-class="nの場合。 1つ"、クリック状態の効果はありません

注: navigator-hover のデフォルト値は {background-color:rgba(0,0,0,0.1);opacity:0.7;} であり、背景色は の子ノードは透明である必要があります

サンプルコード:

/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover{
  color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover{
  color:red;
}

<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>
</navigator>

<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>

りー

りー

読んでいただきありがとうございます。このサイトを応援していただきありがとうございます。

WeChat アプレット wxapp ナビゲーション ナビゲーターの詳細な説明と関連記事については、PHP 中国語 Web サイトに注目してください。