小程序制作（超详解！！！）第七节 导航与布局

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;/*上边距*/
}

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的颜色