微信小程式 wxapp導航 navigator詳解

這篇文章主要介紹了微信小程式wxapp導航navigator詳解的相關資料,並附簡單實例代碼，需要的朋友可以參考下

微信小程式wxapp導航navigator

最近微信小程式非常火，朋友圈，微博，論壇等地方都在刷屏，因為這是搞前端的春天，前端工程師可以賺一把了，所以業餘就學習了微信小程序的知識，這裡記錄下：

navigator

redirectBooleanfalse是否關閉目前頁面hover-classStringnavigator-hover指定點擊時的樣式類，hover-class="none"時，沒有點擊態navigator-hover預設為{background-color:rgba(0,0,0,0.1);opacity:0.7;},的子節點背景色應為透明色

屬性名稱	類型	預設值	說明
url
	範例程式碼：

/** 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>

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

更多微信小程式 wxapp導航 navigator詳解相關文章請關注PHP中文網！