nav.wxss code
.nav-item{
background: #fafafa;
box-shadow: 1px 2px 8px rgb(0 0 0 / 0.1);
text-align: center;
}nav.wxml code
<navigator url="/pages/index/index">index page</navigator>
<navigator url="/pages/hello/hello" class="nav-item">hello page</navigator>
<navigator url="/pages/bindevent/bindevent" >
<text style="color: red;">跳转事件绑定</text>
<!-- <navigator url="/pages/bindevent/bindevent" >跳转事件绑定</navigator> -->
</navigator>
<ul>
<li><button bindtap="goto" data-url="/pages/hello/hello">go home</button></li>
<li><button bindtap="goto" data-url="/pages/index/index">go index</button></li>
<li><button bindtap="goto" data-url="/pages/bindevent/bindevent">go bindevent</button></li>
</ul>
<ul>The green section is an unordered list ( ) code containing three buttons . Each button is bound to an bindtapevent and a data-urlcustom data property.
It should be noted that when implementing page jump for existing tags, the navigator must be placed in the outer layer (i.e. the red and blue parts)
navigator | WeChat open document (qq.com)
The method of placing inner layers worked before and will display normally. If you put it in the inner layer now, no error will be reported, but it will not be displayed.
The main purpose of placing the navigator in the outer layer is to enable page jumps by clicking on any range of text in the text box. If placed in the inner layer, it is equivalent to setting a page jump for the access where the words "jump event binding" are located. At this time, clicking on the area in the text except for these words will not enable the jump.
For example, suppose that the page jump is currently set to be the index page, and the range of the text box to which it belongs is the row where it is located (you can modify the color or something to see the range of the text box). Then when it is placed externally, you can jump by clicking on this line (any area in the text box); when it is placed internally, you can jump only by clicking on the string index page.
nav.jscode
Page({
goto(e){
console.log(e)
wx.navigateTo({
url:e.target.dataset.url
})
}
})
According to the framework provided by the document, do not change ur, otherwise the jump will fail.
Router | WeChat Open Document (qq.com)
running result
