任务:点击某一栏目(文字或图片),跳转(打开)新的页面。
![](https://img-blog.csdnimg.cn/img_convert/30d79a9757e00ab6963365cdc0d5ced7.png)
过程:tap个人资料或箭头图片,触发事件,事件的方法名为info,在方法info()中执行原生方法(函数)即wx.navigateTo(url);url为新页面的路径,如:wx.navigateTo(url:'/pages/'detail/detail);新页面的名称为detail(这个页面名称必需在app.json中的“pages”选项中存在)。
在person.wxml中为
![](https://img-blog.csdnimg.cn/img_convert/d0c98c6c8ecb788767b44d1d29a3cb4f.png)
在person.wxss的2个class为.menu和.arrow
![](https://img-blog.csdnimg.cn/img_convert/7a89d476b56844c58d761f81f5dc519f.png)
![](https://img-blog.csdnimg.cn/img_convert/0e1c62f0c125121712623de5b5f9eaee.png)
注:box-sizing让内容显示为盒子形式,float让箭头图片浮动到右边
为这个盒子设定行高、只有下边框,写多一个CSS
![](https://img-blog.csdnimg.cn/img_convert/9c518e3e648629fbf23c433a7619b397.png)
在person.js中写事件方法info:
![](https://img-blog.csdnimg.cn/img_convert/f4f890c69f80e3b21d78735d56c0f128.png)
保存、编译后看效果,能跳转,明天再写新的页面detail。
剩余的几项,如下图,重复1-4。(方法名、路径肯定是不一样的)
![](https://img-blog.csdnimg.cn/img_convert/c664e56dfbc372a04c37aff25564f267.png)