一个简单的商城

1，首先在src目录下创建一个名为pages的文件夹，然后

在该文件中创建一个名为index.vue的文件。

这是商城的首页

打开index.vue文件，编写如下代码：

<template>  
 <view class="container">  
   <view class="header">  
     <image class="logo" src="/static/logo.png" />  
     <text class="title">欢迎来到 uni-APP 商城</text>  
   </view>  
   <view class="categories">  
     <nav-bar  
       title="商品分类"  
       @scrolltolower="loadMore"  
       :loadMore="loadMore"  
     ></nav-bar>  
     <scroll-view class="category-list" scroll-y="true">  
       <block v-for="(category, index) in categories" :key="index">  
         <view class="category-item" @tap="navToCategory(category.id)">  
           <text class="category-name">{{ category.name }}</text>  
         </view>  
       </block>  
     </scroll-view>  
   </view>  
   <view class="products">  
     <nav-bar  
       title="商品展示"  
       @scrolltolower="loadMore"  
       :loadMore="loadMore"  
     ></nav-bar>  
     <scroll-view class="product-list" scroll-y="true">  
       <block v-for="(product, index) in products" :key="index">  
         <view class="product-item" @tap="navToProduct(product.id)">  
           <image :src="product.image" class="product-image" />  
           <text class="product-name">{{ product.name }}</text>  
           <text class="product-price">￥{{ product.price }}</text>  
         </view>  
       </block>  
     </scroll-view>  
   </view>  
 </view>  
</template>

<script>  
import NavBar from "@/components/NavBar";

export default {  
 components: {  
   NavBar,  
 },  
 data() {  
   return {  
     categories: [  
       { id: 1, name: "服装" },  
       { id: 2, name: "鞋子" },  
       { id: 3, name: "配饰" },  
     ],  
     products: [  
       {  
         id: 1,  
         name: "商品 1",  
         image: "/static/product1.jpg",  
         price: 100,  
       },  
       {  
         id: 2,  
         name: "商品 2",  
         image: "/static/product2.jpg",  
         price: 200,  
       },  
       {  
         id: 3,  
         name: "商品 3",  
         image: "/static/product3.jpg",  
         price: 300,  
       },  
     ],  
   };  
 },  
 onLoad() {  
   this.loadMore();  
 },  
 methods: {  
   loadMore() {  
     setTimeout(() => {  
       this.products.push({  
         id: this.products.length + 1,  
         name: "新商品",  
         image: `/static/product${this.products.length}.jpg`,  
         price: 50,  
       });  
     }, 1000);  
   },  
   navToCategory(id) {  
     console.log("导航到分类", id);  
     // 跳转到分类页面  
   },  
   navToProduct(id) {  
     console.log("导航到产品", id);  
     // 跳转到产品详情页面  
   },  
 },  
};  
</script>

<style>  
.container {  
 display: flex;  
 flex-direction: column;  
 height: 100%;  
}
.header {  
 display: flex;  
 justify-content: space-between;  
 align-items: center;  
 padding: 10px;  
 background-color: #f8f8f8;  
 color: #333;

以上是商城的一个简单制作首页。