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;
以上是商城的一个简单制作首页。