【Kevin Learn 小程序】--＞ navigator

效果图

属性

参考：navigator

实例

app

app.js

App({onLaunch: function () {console.log('App Launch')},onShow: function () {console.log('App Show')},onHide: function () {console.log('App Hide')},globalData: {hasLogin: false}
})

app.json

{"pages": ["pages/pageA/navigator","pages/pageB/navigate","pages/pageC/redirect","pages/pageD/pageD"],"tabBar": {"list": [{"pagePath": "pages/pageA/navigator","text": "页面A"},{"pagePath": "pages/pageD/pageD","text": "页面D"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"}
}

app.wxss

{"description": "项目配置文件","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": true,"postcss": true,"minified": true,"newFeature": true,"autoAudits": false,"coverView": true,"showShadowRootInWxmlPanel": true,"scopeDataCheck": false},"compileType": "miniprogram","libVersion": "2.10.2","appid": "wx8c507272cc079a6a","projectname": "navigator","debugOptions": {"hidedInDevtools": []},"isGameTourist": false,"simulatorType": "wechat","simulatorPluginLibVersion": {},"condition": {"search": {"current": -1,"list": []},"conversation": {"current": -1,"list": []},"game": {"currentL": -1,"list": []},"miniprogram": {"current": -1,"list": []}}
}

pageA

navigator.js

Page({})

navigator.json

{"navigationBarTitleText": "navigator"
}

navigator.wxml

<view class="container"><view class="page-body"><view class="btn-area"><navigator url="../pageB/navigate?title=navigate" hover-class="navigator-hover"><button type="default">跳转到新页面</button></navigator><navigator url="../pageC/redirect?title=redirect" redirect hover-class="other-navigator-hover"><button type="default">在当前页打开</button></navigator><navigator url="../pageD/pageD" open-type="switchTab"><button type="default">切换tab页面</button></navigator><navigator url="/pages/pageA/navigator" open-type="reLaunch"><button type="default">重加载页面</button></navigator></view></view>
</view>

navigator.wxss

.navigator-hover button{background-color: #DEDEDE;
}
.other-navigator-hover button{background-color: #DEDEDE;
}

pageB

navigate.js

Page({onLoad: function (options) {console.log(options)}
})

navigate.json

{"navigationBarTitleText": "navigate页面"
}

navigate.wxml

<view class="container"><view>新的navigate页面</view><navigator open-type="navigateBack"><button type="default">返回页面A</button></navigator>
</view>

pageC

redirect.js

Page({onLoad: function (options) {console.log(options)}
})

redirect.json

{"navigationBarTitleText": "redirect页面"
}

redirect.wxml

<view class="container"><view>重定向页面</view>
</view>

pageD

navigator.js

Page({})

navigator.wxml

<!--pages/pageD/pageD.wxml-->
<view class="container"><view>页面D</view>
</view>

【Kevin Learn 小程序】--＞ navigator相关推荐

【Kevin Learn 小程序】--＞ dialog
效果图实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: function () {c ...
【Kevin Learn 小程序】--＞List
效果图代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: function () {c ...
【Kevin Learn 小程序】--＞video
效果图属性参考:video 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: fu ...
【Kevin Learn 小程序】--＞camera
效果图属性参考:camera 实例 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: f ...
【Kevin Learn 小程序】--＞picker
效果图属性参考:picker 代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onShow: f ...
【Kevin Learn 小程序】--＞picker-view
效果图属性参考:picker-view 代码 app.js //app.js App({onLaunch: function () {console.log('App Launch')},onSh ...
小程序 navigator 无法跳转 tabBar上的页面
小程序 navigator 无法跳转 tabBar上的页面解决方法一: navigator 的 open-type 设置为 switchTab 解决方法二: 使用 wx.switchTab({ ur ...
小程序navigator跳转路径url写法
小程序navigator跳转路径url要写要跳转的的页面文件夹相对于当前页面的页面文件夹的位置,即相对路径. 比如我当前页面跳转到同级目录下的另一个页面如下: <navigator url= ...
微信小程序 navigator 用来实现页面跳转功能
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,navigator 用来实现页面路由功能,比如 A页面中点击页面打开B页面 1 navigator 默认方式打开 ...
微信小程序 navigator 导航
然后如图: ,属性如下: 属性类型默认值必填说明最低版本 target string self 否在哪个目标上发生跳转,默认当前小程序 2.0.7 url string 否当前小程序 ...

【Kevin Learn 小程序】--＞ navigator

效果图

属性

实例

app

pageA

pageB

pageC

pageD

【Kevin Learn 小程序】--＞ navigator相关推荐

最新文章

热门文章