既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
小程序的页面导航分为两种,声明式导航和编程式导航,话不多说,我们现在正式开始。
1.1 声明式导航
声明式导航就是利用小程序的<navigator>
实现的,其中有url
属性,在效果上就类似浏览器的a
超链接标签。
1.1.1 导航到tarBar页面
还记得我们之前学到的tarBar
是啥不,底部的导航栏,点击后可以跳转到相对应的页面,而用<navigator>
也可以实现。
我们需要设置两个属性在navigator
组件中,url
和open-type
。
url
:设置需要跳转的页面所处的位置(页面地址),并且前面必须由/
开头,比如——url = '/pages/content/conten'
最后一个content不需要加文件后缀。open-type
:设置navigator
的跳转方式,这里选择值为switchTab
,表示跳转的页面是被配置到tarBar
中的。
tarBar
页面配置:
在app.json
文件中
这样我们就实现了点击跳转到tarBar
设置的页面中啦。
<navigator url="/pages/list/list">点击跳转</navigator>
你还可以在里面嵌套其他组件,比如嵌套一个button
。
1.1.2 导航到非tarBar页面
非tarBar
页面就是你在page
文件夹已经定义的页面,但是没有在app.json
中的tarBar
配置。
在实际开发中,这种场景也是非常多见了,一个比较复杂的小程序都会有比较多的页面,而这么多页面又不会都在tarBar
中配置,所有这么页面的跳转就得靠这个方法来实现啦。
与上文一样,也是需要url
和open-type
两个属性,url
的写法不变,有变化的是open-type
的值需要该为navigate
。
<navigator url="/pages/list/list" open-type='navigate'>
</navigator>
1.1.3 后退导航
<navigator>
还可以实现页面后退功能。
这时候我们就不用设置url
属性了,需要更改的是,设置open-type
的值为navigateBack
。
我们可以通过设置delta
设置回退的层级,如果不设置,那么默认值将会为1。
<navigator open-type="navigateBack" delta='1'></navigator>
1.2 编程式导航
编程式导航是利用微信小程序顶级对象wx
下面的几个方法来实现,接下来我们来一一讲解。
1.2.1 导航到tarBar页面
我们将使用wx
下的switchTab(obj)
方法,其中obj
为对象。
对象中有四个属性,url
、success
、fail
、complete
。
其中`
url
是需要跳转的页面地址success
是接口调用成功执行的回调函数fail
是接口调用失败执行的回调函数complete
是完成调用执行的回调函数,无论成功与否,都会执行。
wx.swithTab({
url : '/pages/list/list',
...
)}
1.2.2 导航到非tarBar页面
实现该功能我们需要调用wx
下的navigateTo(obj)
方法。
对象中的参数类型与1.2.1一致。
wx.navigateTo({
url : '/page/list/list',
![img](https://img-blog.csdnimg.cn/img_convert/fceeb02fea4d9f149f15ade8dd0e38eb.png)
![img](https://img-blog.csdnimg.cn/img_convert/73925978cde872b6f1eedd013b56d80d.png)
![img](https://img-blog.csdnimg.cn/img_convert/2ae7ef980bef4ffcab3beb5edb8f6930.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**