Home > WeChat Applet > Mini Program Development > WeChat Mini Program Development Component—Navigation

WeChat Mini Program Development Component—Navigation

黄舟
Release: 2017-02-06 14:54:43
Original
1967 people have browsed it

navigator

Page link.

Attribute name Type Default value Description
url String
In-app jump link
redirect Boolean false Whether to close the current page
hover-class String navigator- hover

Specify the style class when clicked,

When hover-class="none", there is no click state effect

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

Example Code:

/** wxss **//** 修改默认的navigator点击态 **/.navigator-hover {    color:blue;}/** 自定义其他点击态样式类 **/.other-navigator-hover {    color:red;}
Copy after login
<!-- sample.wxml -->
<view> 
<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> 
<navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
</view>
Copy after login
<!-- 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
              })  
                  }  
  })
Copy after login

The above is the content of the WeChat applet development component-navigation. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template