《深潜》电视剧,成在线人免费视频,亚洲a∨无码一区二区三区

step9 個人中心布局##

前面step1到step8已經將首頁和基本菜單欄完成，現在先做個人中心頁也就是底部菜單中‘我’這個tab*
首頁點擊去看詳情和寫新動態加到列表中放到后面再完成
總體預覽

Paste_Image.png

之前做過一個HeaderTab的組件，現在可以拿來用了

Paste_Image.png

- 如果你遇到底部切換頁面可以正常顯示，但是直接刷新瀏覽器卻不起作用，那么你看看是不是沒有$init()

第二部分是圖片，sui中1rem等于20px
第三部分是個人信息，為了模擬以后從后臺獲取數據，將這部分抽離出來定義一個UserDetail組件并將數據存儲在一個數據中，這個數組存放在me.vue中

Paste_Image.png

子父之間的通信：雖然之前也有提到過，但是之前都是在父組件上傳遞一個字符串，當時的栗子是這樣的

Paste_Image.png

然后在子組件的props中注冊status就可以直接用了，但是今天要傳遞的是一個數組data 如果直接寫成data="userData" vue是不能識別你這個是字符串還是變量數組的
所以這里要用v-bind:user-data='userData'，這里還有一個坑，如果你寫的是v-bind:userData='userData'就會報錯了。

Paste_Image.png

組件中的樣式我定義的比較隨便，直接用標簽來定義樣式，因為這里加了scope只作用在當前組件，vue會自動處理加一串標記數字，這樣再也不用為命名擔心了

Paste_Image.png

Paste_Image.png

第三部分的tab與第二部分類似，也是抽離一個組件，這里定義數組將內容與結構分離，用v-for循環輸出結構，如果要改內容直接改數組，不用在一大堆的html結構里面去找文字了

//這里之所以數組套數組是因為考慮到sui的.row樣式結構需要
//path就是路由的路徑了，都要添加到router.js文件中
lists :[
          [{
            title:'動態',
            icon:'icon-app',
            path:'/me/moment'
          },
          {
            title:'訪客',
            icon:'icon-friends',
            path:'/me/friends'  
          }],
          [{
            title:'文章',
            icon:'icon-menu',
            path:'/me/articles'  
          },
          {
            title:'最佳實現',
            icon:'icon-browser',
            path:'/me/practice'  
          }],
          [{
            title:'閱讀',
            icon:'icon-code',
            path:'/me/read'  
          },
          {
            title:'收藏列表',
            icon:'icon-star',
            path:'/me/love'  
          }]
      ]

   <user-refer v-bind:lists='lists'>
      
   </user-refer>
    <div v-for="list in lists" class="row">
           <div class="col-50">
             <a class="tab-item" v-link="{ path: list[0].path}">
            <!-- 這里不同于首頁的tab標簽切換，所以不需要replace這個參數，讓路由可以后退 -->
              <span class="icon"  v-bind:class="list[0].icon"></span><br>
              <span class="tab-label">{{list[0].title}}</span>
            </a>
          </div>
          <div class="col-50">
             <a class="tab-item" v-link="{ path: list[1].path}">
              <span class="icon"  v-bind:class="list[1].icon"></span><br>
              <span class="tab-label">{{list[1].title}}</span>
            </a>
          </div>
        </div> 
    </div>