WeChat applet wxapp navigation navigator detailed explanation-Mini Program Development-php.cn

WeChat applet wxapp navigation navigator detailed explanation

高洛峰

Release： 2017-02-14 14:27:39

Original

2114 people have browsed it

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;
}

Copy after login

<!-- 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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!