現在來說說頂部導航欄的程式碼，先來看看簡單的頂部導航欄的截圖：

可以從上面的圖片看到有寫著[簡介]和[試看]的導航欄內容，下面來記錄下程式碼過程：
wxml

<!--導航條--> 
<view class="navbar"> 
 <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> 
</view> 
 
<!--首頁--> 
<view hidden="{{currentTab!==0}}"> 
<view class='topic7'>
<text class='tp1'>藥屋少女的呢喃</text>
<text class='tp1_1'>《藥屋少女的呢喃》，是小說家 日向 夏 著作，插畫家 しのとうこ負責插畫，連載於日本web小說網站「成為小說家吧」的輕小說，2014年書籍化，所屬HERO文庫。2017年漫畫化，漫畫家 ねこクラゲ 作畫。</text>
</view>
</view> 
 
<!--試看--> 
<view hidden="{{currentTab!==1}}"> 
 <image src='http://thyrsi.com/t6/378/1538308974x-1566688526.jpg'class='tupian1'></image>
</view> 

 

上述程式碼中
1.wx:for="{{navbar}}“表示在元件上使用 wx:for 控制屬性繫結一個數組“navbar”，即可使用陣列中各項的資料重複渲染該元件。
2.data-idx=”{{index}}"表示預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為item。
3.class="item {{currentTab==index ? ‘active’ : ‘’}}“這個沒大看懂，有知道的人請幫忙說明下，感謝~
4.wx:key=“unique”——如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態，
當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。（這個unique沒看懂~有知道的請幫幫忙解釋下，感謝！）
5.bindtap=“navbarTap”，當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件"navbarTap"處理函式。
6. hidden=”{{currentTab!==0}}"表示顯示和隱藏的意思，當事件currentTab不等於0時，包含hidden的元件內容被隱藏，等於0時，顯示內容。

wxss

page{ 
 display: flex;    //flex佈局方式
 flex-direction: column;            //column：主軸為垂直方向，起點在上沿。
 height: 100%; 
} 
.navbar{ 
 flex: none;     //flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫， none (0 0 auto)。
 display: flex; 
 background: #fff; 
} 
.navbar .item{ 
 position: relative;     /相對定位
 flex: auto;        //flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，auto (1 1 auto)。
 text-align: center; 
 line-height: 80rpx; 
} 
.navbar .item.active{        //當用戶點選時，文字顏色變化
 color: #FFCC00; 
} 
.navbar .item.active:after{    //當用戶點選導航欄中的一個專案時，邊框下面會出現類似指示行線的線
 content: ""; 
 display: block;    //盒模型
 position: absolute;      //絕對定位
 bottom: 0; 
 left: 0; 
 right: 0; 
 height: 4rpx; 
 background: rgb(255, 0, 34); 
} 
 

js

var app = getApp()
Page({
  data: {
    navbar: ['簡介', '試看'],     /*可以新增多個item*/
    currentTab: 0                      /*初始顯示的頁面*/
  },
  navbarTap: function (e) {           /*上述中所說的觸發事件*/
    this.setData({
      currentTab: e.currentTarget.dataset.idx       /*用來獲取值，（不過還是有些不大清楚，能夠解釋的大佬們請幫忙講講，感謝~）*/
    })
  }
}) 

以上就是完整的頂部導航欄的程式碼，由於初次接觸有很多不太明白的地方，可能也有理解錯的地方，請多擔待和指出，謝謝~