一、導航與佈局

<!--index.wxml-->
<view class="box">
  <view class="title">框架案例</view>
  <navigator url="HelloWechat/index">
    <view class="waikuang">
      <icon type="success" class="myleft"></icon>
      <view class="mycenter">HelloWechat</view>
      <image src='/image/right-arrow.png' class="myright"></image>
    </view>
  </navigator>
</view>
 

navigator元件能夠實現頁面導航

　　navigator元件屬性　　

　　open-type 的合法值

icon元件顯示一個圖示

　　Icon圖示元件的主要屬性

/**index.wxss**/
navigator{
  margin: 5px;
  font-size: 20px;
}

/*
navigator對所有的navigator元件都啟作用，
邊距，上下左右5px，
字型大小20px
*/

.waikuang{
  display:flex;
  flex-direction: row;
  margin: 5px 0px;
  padding:5px 0px;
}

/*
flex佈局，
 
佈局方向，水平佈局，
邊距，上下5，左右0
內邊距，上下5，左右0
*/

.myleft{ 
  margin-right: 10px; 
} 

/*
右外邊距10px，
flex預設左對齊
*/

.mycenter{ 
　flex: 1; 
} 

/*
，只有一個，相當於flex-grow，分配整個剩餘的父空間*/

.myright{ 
  width: 40rpx; 
  height: 40rpx; 
  margin-top: 5px; 
}

/*
寬度
高度
上邊距5px
*/

app.json中新增頁面路徑

點選導航區域，可跳轉到新頁面