uni-app商城（一）创建项目

R·ZORO

已于 2023-05-27 23:48:09 修改

阅读量406

点赞数 1

分类专栏： uni-app 文章标签： uni-app javascript

于 2023-05-21 21:35:09 首次发布

本文链接：https://blog.csdn.net/qq_46029887/article/details/130796825

版权

uni-app 专栏收录该内容

11 篇文章 4 订阅

订阅专栏

1. 新建项目uni-app

在这里插入图片描述

2. 项目文件

在这里插入图片描述

3. 添加4个页面，使用scss

在这里插入图片描述

4. pages.json页面配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/cate/cate",
			"style": {
				"navigationBarTitleText": "分类",
				"enablePullDownRefresh": false
			}
		}, {
			"path": "pages/cart/cart",
			"style": {
				"navigationBarTitleText": "购物车",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的",
				"enablePullDownRefresh": false
			}
		}
	],
	"tabBar": {
		"list": [{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "static/tabBar_icons/home.png",
				"selectedIconPath": "static/tabBar_icons/home-active.png"
			},
			{
				"pagePath": "pages/cate/cate",
				"text": "分类",
				"iconPath": "static/tabBar_icons/cate.png",
				"selectedIconPath": "static/tabBar_icons/cate-active.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/tabBar_icons/cart.png",
				"selectedIconPath": "static/tabBar_icons/cart-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tabBar_icons/my.png",
				"selectedIconPath": "static/tabBar_icons/my-active.png"
			}
		]
	},
    ...
}

5.home.vue页面

<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in swiperList" :key="i">
				<view class="swiper-item">
					<image :src="item.imageSrc" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: "http://localhost:5771",
				swiperList: []
			};
		},
		onLoad() {
			this.getSwiperList()
		},
		methods: {
			getSwiperList() {
				uni.request({
						url: this.baseUrl+"/api/Product/GetProduct",
					})
					.then((res) => {
						// console.log(res.data.data);
						this.swiperList = res.data.data;
					});
			}
		}
	}
</script>
<style lang="scss">
	swiper {
		width: 100%;
		.swiper-item image {
			width: 100%;
		}
	}
</style>