1、导航布局案例

1.1、代码

wxml

<!--pages/dem_2/dem_2.wxml-->
<view class="box">
    <navigator url="/pages/dem_1/dem_1">
       <view class="bx">
            <icon type="success" class="ic"></icon>
            <view class="tx">文本样式</view>
            <image class="im" src="https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
       </view>
    </navigator>
    <navigator url="/pages/dem_0/dem_0">
       <view class="bx">
            <icon type="success" class="ic"></icon>
            <view class="tx">字体设置</view>
            <image class="im" src="https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
       </view>
    </navigator>
</view>

wxss

/* pages/dem_2/dem_2.wxss */
.bx{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 10rpx 5rpx;
}
.ic{
    margin-right: 10rpx;
}
.tx{
    flex-grow: 1;
    text-align: center;
}
.im{
    width: 30rpx;
    height: 30rpx;
   
}

app.wxss

/**app.wxss**/
.box{
  border: 1px solid silver;
  margin: 20rpx;
  padding: 20rpx 40rpx;
}

.title{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

1.2、结果

结果展示.jpg

1.3、代码知识总结

• margin格式：
  margin: 上下外边框距离 左右外边框距离
• padding格式：
  padding: 上下外边框距离 左右外边框距离
• navigator组件当中所有项要设置为flex布局需要在navigator里面第一层设置view
  正确代码：

<navigator url="/pages/dem_1/dem_1">
       <view class="bx">
            <icon type="success" class="ic"></icon>
            <view class="tx">文本样式</view>
            <image class="im" src="https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
       </view>
    </navigator>

错误代码：这样设置，wxss当中的bx设置不会引起页面改变

<view class="bx">
        <navigator url="/pages/dem_1/dem_1">
            <icon type="success" class="ic"></icon>
            <view class="tx">文本样式</view>
            <image class="im" src="https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
        </navigator>
</view>

错误结果.jpg

2、navigator组件属性

navigator组件属性.jpg

3、icon组件属性

icon组件的主要属性.jpg

4、navigator组件的open-type属性的合法值

open-type合法值.jpg