navigator:导航

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

navigator 组件可以创建小程序里面的页面与页面之间的链接 .. 在这个视图页面添加一组 navigator .. 里面可以包装一个文字 ..

这个 navigator 有几个类型,我们先看一下 switchTab .. 添加一个 open-type 属性,设置一下打开页面的类型 .. 先把它设置成 switchTab .. 它可以切换标签 ..

再添加一个 url 属性,它的值就是页面的地址 .. 这里应该是一个标签页面的地址 .. 比如 /pages/index/index ..

到开发者工具上试一下 .. 按一下页面上的 demo .. 页面会切换到 首页 这个标签 .. 因为这个页面的地址就是 pages/index/index

我们可以再添加一个页面 .. 打开 编辑 .. 先新建一个目录 .. 名字是 demo .. 在这个目录的下面,再新建一个 Page .. 名字也可以是 demo

回到视图页面 .. 把这个 open-type 设置成 navigate .. 这种链接可以保留当前页面,然后打开新的页面 ..

这个页面的地址就是刚才我们创建的 pages/demo/demo ..

再按一下页面上的 demo .. 这样会打开一个新的页面 .. 就是这个 demo 页面 .. 这里有个返回按钮,用户还可以返回到这前打开的页面 ..

再试一下 redirect 类型的 navigator .. 把 open-type 的值换成 redirect

然后再按一下页面上的 demo .. 这回小程序会关掉当前打开的页面,然后打开新的页面 ..

这里我们再把它换成 navigate ..

在打开页面的时候,我们可以给页面传递参数 .. 在页面地址里面,添加一个问号 .. 然后是参数的名字 .. 比如 id .. 等号右边的东西是参数的值 .. 随便输入一个数字 ..

在打开 demo 页面的主逻辑文件 .. 在它的 onLoad 生命周期里面,它的 options 参数里会包含传递过来的参数 .. 我们把这个 options 输出到控制台可以检查一下 ..

再按一下 demo .. 在控制台上输出的对象里面,会有一个 id .. 这就是我们传递给页面的参数 ..

navigator:导航《 微信小程序:组件 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点