前端結(jié)構(gòu)和首頁布局構(gòu)建

1.頁面路由劃分

需求分析：小程序門戶至少需要三個頁面，首頁顯示出售商品，一個用戶信息頁面，一個購物車頁面。

需求實現(xiàn)：home、my、car

進入pages 文件夾下，對上述頁面進行拆分。

pages >
 car >
  car.vue
?home >
? home.vue
?my   >
? my.vue

參考文檔配置pages.json

{
??"pages": [{
  "path": "pages/home/home",
  "style": {
   "navigationBarTitleText": "強哥菜市場"
  }
 },
 {
  "path": "pages/car/car",
  "style": {
   "navigationBarTitleText": "購物車"
  }
 },
 {
  "path": "pages/my/my",
  "style": {
   "navigationBarTitleText": "個人中心"
  }
 }
 ],
}

重新編譯運行，查看頁面Title是否切換到 "強哥菜市場"

2.創(chuàng)建tabBar跳轉(zhuǎn)頁面

需求同上，需要實現(xiàn)3個按鈕進行頁面切換。使用tabBar進行控制。

字段分析：

字段名字段信息color默認顏色selectedColor選中顏色list按鈕列表pagePath跳轉(zhuǎn)地址text按鈕文本iconPath默認圖標地址selectedIconPath選中圖標地址

./pages.json

{
  "tabBar": {
  "color": "#8e8e8e", // 默認顏色
  "selectedColor": "#1296db",// 選中顏色
  "list": [
   {
    "pagePath": "pages/home/home",
    "text": "主頁",
    "iconPath": "static/home.png",
    "selectedIconPath": "static/select_home.png"
   },
   {
    "pagePath": "pages/car/car",
    "text": "購物車",
    "iconPath": "static/home.png",
    "selectedIconPath": "static/select_home.png"
   },
   {
    "pagePath": "pages/my/my",
    "text": "我的",
    "iconPath": "static/home.png",
    "selectedIconPath": "static/select_home.png"
   }
  ]
 }
}

重新編譯運行，查看跳轉(zhuǎn)按鈕是否正常

3.首頁布局構(gòu)建

首頁布局構(gòu)建主要知識點學習：塊元素樣式控制、組件庫快速使用根據(jù)需求進行調(diào)整。

??-學習組件：card 卡片 section 標題欄 grid 宮格

??-學習Vue3 語法糖 setup

./pages/home/home.vue

首要調(diào)整

<script setup>

</script>

<style lang="scss">

</style>

3.1 輪播圖展示區(qū)

需求：輪播圖為首頁頂部，且為了美觀，不能完全鋪滿。輪播圖替換有動畫效果。

<view class="home">
????<view class="uni-margin-wrap">
??????<swiper class="swiper" circular :indicator-dots="swiperOption.indicatorDots" :autoplay="swiperOption.autoplay" :interval="swiperOption.interval"
????????:duration="swiperOption.duration">
????????<swiper-item>
??????????<view class="swiper-item uni-bg-red">A</view>
????????</swiper-item>
????????<swiper-item>
??????????<view class="swiper-item uni-bg-green">B</view>
????????</swiper-item>
????????<swiper-item>
??????????<view class="swiper-item uni-bg-blue">C</view>
????????</swiper-item>
??????</swiper>
????</view>
</view>

<script setup>
import { reactive } from "vue";
 const swiperOption = reactive({
  indicatorDots:false, // 不顯示指示點
  autoplay:true,   // 自動播放
  interval:2000,   // 自動切換時間
  duration:500,   // 動畫時長
 })
</script>

<style lang="scss">
.uni-margin-wrap{
  padding: 8upx;
  .swiper{
   border-radius: 8upx; // 圓角邊框
   overflow: hidden;  // 移除隱藏
   .swiper-item{ // 完全填充塊
    width: 100%; 
    height: 100%;
   }
   .uni-bg-red{ // 背景色，方便調(diào)試
    background: red;
   }
   .uni-bg-green{
    background: green; 
   }
   .uni-bg-blue{
    background: blue; 
   }
  }
 }
</style>

3.2 商品分類區(qū)

4個商品大分類，位于輪播圖下方。

<view class="fish-grid">
??<uni-grid :column="4" :showBorder="false">
????<uni-grid-item>
??????<view class="grid-box">魚</view>
????</uni-grid-item>
????<uni-grid-item>
??????<view class="grid-box">肉</view>
????</uni-grid-item>
????<uni-grid-item>
??????<view class="grid-box">蔬</view>
????</uni-grid-item>
????<uni-grid-item>
??????<view class="grid-box">蛋</view>
????</uni-grid-item>
??</uni-grid>
</view>

<style lang="scss">
??.fish-grid{
?   margin-top: 12upx;
????.grid-box{
??????display: flex;
??????width: 100%;
??????height: 100%;
??????align-items: center;
??????justify-content: center;
???}
 }
</style>

3.3 商品簡介列表區(qū)

??-主要學習flex布局使用與控制。

<uni-section title="為你推薦" type="line" padding="">
??<view class="fish-card">
????<view class="fish-card-left">

????</view>
????<view class="fish-card-right">
??????<view class="top">
????????<text class="title">強哥魚檔</text>
????????<text class="integral">5.0</text>
??????</view>
??????<view class="middle">
????????<view class="">
??????????<text>最低銷價20$</text>
????????</view>
????????<view class="">
??????????<text>月售600</text>
??????????<text>人均20￥</text>
????????</view>
??????</view>
??????<view class="bottom">
????????<uni-tag text="內(nèi)有躺椅" type="warning" :inverted="true"></uni-tag>
??????</view>
????</view>
??</view>
</uni-section>

<style lang="scss">
 .fish-card{
  display: flex; // 彈性布局，主布局方式
  gap: 20upx;
  height: 240upx;
  padding: 20upx;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8upx;
  &-left{   // 塊左側(cè)劃分 圖片展示預留位置
   width: 200upx;
   height: 200upx;
   background: red;
   border-radius: 8upx;
  }
  &-right{  // 塊右側(cè)劃分 -上中下三層劃分
   flex:1;
   .top{  // 上側(cè)商品標題 和 評分
    .title{
     font-weight: 600;
    }
    .integral{
     color: #8e8e8e;
     font-size: 12px;
     margin-left: 20upx;
    }
   }
   .middle{ // 中間 售價 銷售量 范圍價展示
    margin-top: 30upx;
    display: flex;
    justify-content: space-between;
    color: #8e8e8e;
    font-size: 12px;
    text+text{
     margin-left: 20upx;
    }
   }
   .bottom{ // 底欄 商品Tag塊
    margin-top: 32upx;
   }
  }
 }

</style>

總結(jié)

本節(jié)課主要學習知識點：

組件布局：tabBar |pages.json配置|swiper 基礎(chǔ)輪播圖|Grid 宮格 section 標題欄

Vue3：setup

樣式布局：scss 、 flex 布局控制

相關(guān)閱讀

vue3

vue3新語法糖——setup script - 掘金 (juejin.cn)

scss

Sass教程 Sass中文文檔 | Sass中文網(wǎng)

Uni-app

pages.json頁面路由

uni-card 卡片組件

uni-section 標題欄

Github

piexlmax/fish: 舊廠街賣魚系統(tǒng) (github.com)