Detailed Explanation of wxapp Navigator in WeChat Mini Program

WeChat Mini Program wxapp navigation navigator

WeChat Mini Program is very popular recently, WeChat Moments, Weibo, forums and other places are all screen, because this is the spring of front-end, front-end engineers can make a fortune, so I learned about WeChat Mini Program knowledge in my spare time, here I record it down :

navigator

Attribute name	Type	Default value	Description
url	String		Internal jump link in the app
redirect	Boolean	false	Whether to close the current page
hover-class	String	navigator-hover	Specify the click style class, when hover-class="none" when there is no click state effect

Note: navigator-hover default is {background-color:rgba(0,0,0,0.1);opacity:0.7;},<navigator/> background color of the child node should be transparent

Example code:

/** wxss **/
/** Modify the default navigator click state **/
.navigator-hover{
  color:blue;
}
/** Custom other click state style class **/
.other-navigator-hover{
  color:red;
}

!-- sample.wxml -->
<view class="btn-area">
  <navigator url="navigate?title=navigate" hover-class="navigator-hover">Jump to a new page</navigator>
  <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">Open in the current page</navigator>
</view>
</navigator>

!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> Click the upper left corner to return to the previous page </view>

!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> Click the upper left corner to return to the upper page </view>

// redirect.js navigator.js
Page({
 onLoad: function(options) {
  this.setData({
   title: options.title
  }
 }
}

Thank you for reading, I hope it can help everyone, thank you for your support to this site!

Basic Tutorial