1.项目描述
设计一个实现导航功能的小程序。导航页面包含多行导航内容,每行导航内容包括1个图标、1个说明文本和1个图片,图标在最左侧、文本在图标右侧图片在最右侧。当点击某一行导航内容时都能进入相应的页面。
2.index.wxml
<view class="box">
<view class="title">框架案例</view>
<navigator url="HelloWechat/index"><!--点击对应HelloWechat文件夹下的index文件-->
<view class="waikuang"><!--外框布局-->
<icon type="success" class="myleft"></icon><!--绿色对勾-->
<view class="mycenter">HelloWechat</view><!--绿色对勾后显示的文本-->
<image src="/图片/箭头.png" class="myright"></image><!--箭头图案(自己下载之后保存到图片中)-->
</view>
</navigator>
<navigator url="FontStyle/index">
<view class="waikuang">
<icon type="success" class="myleft"></icon>
<view class="mycenter">FontStyle</view>
<image src="/图片/箭头.png" class="myright"></image>
</view>
</navigator>
<navigator url="TextStyle/index">
<view class="waikuang">
<icon type="success" class="myleft"></icon>
<view class="mycenter">TextStyle</view>
<image src="/图片/箭头.png" class="myright"></image>
</view>
</navigator>
</view>
3.index.wxss
navigator{
margin:5px;/*边距*/
font-size: 20px;/*字体大小*/
}
.waikuang{
display: flex;/*布局方式flex*/
flex-direction: row;/*水平布局*/
margin: 5px 0px;/*外边距上下5 左右0*/
padding: 5px 0px;/*内边距上下5 左右0*/
}
.myleft{
margin-right: 10px;
}
.mycenter{
flex: 1;
}
.myright{
width: 40rpx;
height: 40rpx;
margin-top: 5px;/*上边距*/
}
![](https://i-blog.csdnimg.cn/blog_migrate/e99717a6746dd9463084637b7e510231.png)
4.总结
1.navigator组件能够实现页面导航
属性 | 说明 |
target | 在哪个目标上发生跳转,其合法值为self和miniProgram,默认值为self |
url | 当前小程序内的跳转地址 |
open-type | 跳转方式 |
delta | 当open-type为'navigateBack'时有效,表示回退的层数 |
app-id | 当target="miniProgram"时有效,要打开的小程序appID |
path | 当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 |
2.open-type的合法值
值 | 说明 |
navigate | 保留当前页面,跳转到应用内的某个页面 |
redirect | 关闭当前页面,跳转到应用内的某个页面 |
switchTab | 跳转到tabBar页面,关闭其他所有非tabBar页面 |
reLaunch | 关闭所有页面,打开应用内的某个页面 |
navigateBack | 关闭当前页面,返回上一页面或多级页面 |
exit | 退出小程序,target="miniProgram"时生效 |
3.icon组件显示一个图标
属性名 | 说明 |
type | icon的类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear |
size | icon的大小 |
color | icon的颜色 |