步骤

TODO：logo文件的选择、网络模块的封装还没学、新接口？、与github的连接

  1. 划分目录结构
  2. css文件的引入
  3. 配置editorconfig
  4. tabbar项目-》路由映射关系
  5. 图标修改

  6. navbar项目-》各种插槽

  7. 请求数据

界面的设计

  • 何时使用slot？如果只是文字不一样，不用slot
  • 停留效果
  1. position: sticky;
  2. top: 100px;

界面设计练习

  • 仿【多抓鱼】

    整体构成

    whole.jpg

各部分名称及内容：

root

  • QR code
  • 执照、许可和备案号

    nav

  1. <div class="jsx-1935097258 Nav">
  2.   <div class="jsx-2950709477">
  3.     <ul class="jsx-1935097258 Nav-items">
  4.       <li class="jsx-1935097258 Nav-item">
  5.         <a class="Nav-link is-active" aria-current="page" href="/">
  6.           <svg viewBox="0 0 46 46" class="Nav-svg">
  7.           </svg>
  8.           <div class="jsx-1935097258 Nav-text">我的
  9.           </div>
  10.         </a>
  11.       </li>
  12.     </ul>
  13.   </div>
  14. </div>
  • ul: nav-items
  • li * 4: nav-item
  • a href
  • svg: nav-svg + div: nav-text

    home

  1. <div class="home">
  2.   <section>Search
  3.   </section>
  4.   <div class="HorizontalScroll">List
  5.   </div>
  6.   <div class="root">
  7.     <div>
  8.       <div class="category_book_item">
  9.         <a>
  10.           <div class="wrap">
  11.             <div class="img" style="background-image: url()">
  12.             </div>
  13.             <div class="text">
  14.             </div>
  15.           </div>
  16.         </a>
  17.       </div>
  18.     </div>
  19.   </div>
  20. </div>

home

detail

mine

review

点击查看【undefined】