WeChat applet wxapp navigation navigator detailed explanation

This article mainly introduces the relevant information about the detailed explanation of the WeChat applet wxapp navigation navigator, and attaches simple example code. Friends in need can refer to it

WeChat applet wxapp navigation navigator

WeChat mini programs have become very popular recently. Moments, Weibo, forums and other places are all popular. Because this is the spring of front-end development, front-end engineers can make a lot of money, so I learned the knowledge of WeChat mini programs in my spare time, which is recorded here. Next:

navigator

##Attribute nameTypeDefault valueDescription##urlredirecthover-class

String		Jump link within the application
Boolean	false	Whether to close the current page
String	navigator-hover	Specifies the style class when clicked. When hover-class="none", there is no click. Status effect

Note: navigator-hover defaults to {background-color:rgba(0,0,0,0.1);opacity:0.7;},< The background color of the child nodes of ;navigator/> should be transparent

Sample code:

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

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

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

For more WeChat applet wxapp navigation navigator detailed explanation related articles please pay attention to PHP Chinese website!