uniapp项目-购物商城【无接口，下载改appid即可使用】

潜意识起点

已于 2024-08-09 19:15:07 修改

阅读量934

点赞数 26

分类专栏：项目源码文章标签： uni-app 微信小程序小程序前端 npm css

于 2024-08-09 19:13:53 首次发布

本文链接：https://blog.csdn.net/weixin_73355603/article/details/141069084

版权

项目源码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

代码为我自己原创，即使有部分版型和页面看似是雷同但是代码绝对不雷同！

不能把这个项目直接用于商业。粉丝的话适当更改可以用于商业活动，在此声明！

代码在上面直接下载把appid改成你自己的就可以开源使用了，如果你不知道appid是什么，那么这个项目恐怕对你帮助不是很大，可以留下你的关注然后去找下一个项目了！

一.效果图欣赏

💎1.1 首页1效果图

🧡1.2 首页2效果图

❤️1.3 分类界面效果图

💙1.4 我的界面效果图

💎二 .首页代码及讲解

注意：下面的代码所有都是省略掉css中的代码的，需要完整代码在上面进行免费下载！

🧡2.1 首页轮播图

轮播图非常简单的，就是通过swiper和swiper-item进行包裹就有轮播图的效果了

要深度了解轮播图的话，我有一篇文章讲的很详细，请移步：深度了解轮播图

	<!-- 轮播图 -->
		<view class="banner">
			<swiper indicator-dots indicator-color="#8fcfc9" indicator-active-color="#fdfcfe" autoplay circular>
				<swiper-item>
					<image src="../../common/wallpaper/ban1.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/wallpaper/ban2.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/wallpaper/ban3.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

❤️2.2 首页滚动广告

广告本质还是轮播图swiper，只是横向纵向有区别。基本上都是一样的操作，如果有需要

请移步：深度了解轮播图

<!-- 滚动广告 -->
		<view class="ads">
			<swiper class="swiperbox" autoplay circular vertical="true">
				<swiper-item  class="swiperitembox" v-for="item in 3">
					<view class="left">
						<uni-icons type="sound-filled" size="16" color="#C00000"></uni-icons>
						<view class="text1">广告</view>
					</view>
					<view class="center">
						<view class="text2">海绵宝宝最新版本的壁纸上线啦！</view>
					</view>
					<view class="right">
						<uni-icons type="forward" size="16" color="#C00000"></uni-icons>
					</view>
				</swiper-item>
			</swiper>
		</view>

💙2.3 首页每日推荐

每日推荐这里 common-title 是一个子组件，这里就没有展示出来了，建议下载文件后进行了解

	<!-- 每日推荐 -->
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="25" color="#C00000"></uni-icons>
						<view class="text3">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
					</view>
				</template>
			</common-title>
			<scroll-view scroll-x>
				<view class="box" v-for="item in 10">
					<image src="../../common/wallpaper/preview_small.jpg"></image>
				</view>
			</scroll-view>
		</view>

💛2.4 首页专题精选

同样的进行子组件的复用，可以看看源代码进行交流学习。

<!-- 专题精选 -->
		<!-- common-title是一个子组件 -->
		<common-title>
			<template #name>专题精选</template>
			<template #custom>
				<view class="text4">More+</view>
			</template>
		</common-title>
		<!-- 专题精选下面的磨砂图 -->
		<view class="Select">
			<theme-item v-for="item in 9"></theme-item>
		</view>
	</view>