vue+webpack app项目(5)

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 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>

• 第三部分的tab键点击进去的详情还是用路由实现，下面这一部分可以用组件封装，路由不用加replace=true参数，第三部分是有滚动条的，用法可参考sui官网的滚动条http://m.sui.taobao.org/components/#scroller

Paste_Image.png

• 返回按钮链接个人中心的路由，详细内容无非就是下拉列表，大致跟首页一样，可以看step1-step8

Paste_Image.png Paste_Image.png
https://github.com/sally2015/vue-project

• 同步最新代码，如果你觉得有帮助，不求打赏只求github给个小星星，拜托拜托