uniapp实战开发商城APP和小程序（一）

最新推荐文章于 2024-07-12 00:05:03 发布

乾坤未定，你我皆是黑马...

最新推荐文章于 2024-07-12 00:05:03 发布

阅读量2.4k

点赞数 1

分类专栏： uniapp实战文章标签： vue.js uni-app

本文链接：https://blog.csdn.net/qq_42345501/article/details/109880070

版权

本文详细介绍了使用uni-app开发商城应用的过程，从底部tabBar配置开始，逐步构建首页的各个部分，包括首页顶部导航、轮播图、服务分类、广告以及商品列表的布局和组件实现，最后展示了首页的完整布局，为后续的数据获取打下基础。

摘要由CSDN通过智能技术生成

底部 tabBar

pages.json
tabBar：点击进入

"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#00b4ff",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/tabbar1.png",
	        "selectedIconPath": "./static/tabbar1-1.png",
	        "text": "首页"
	    }, {
	        "pagePath": "pages/API/index",
	        "iconPath": "static/tabbar2.png",
	        "selectedIconPath": "static/tabbar2-1.png",
	        "text": "分类"
	    },{
	        "pagePath": "pages/API/index",
	        "iconPath": "static/tabbar3.png",
	        "selectedIconPath": "static/tabbar3-1.png",
	        "text": "购物车"
	    },{
	        "pagePath": "pages/API/index",
	        "iconPath": "static/tabbar4.png",
	        "selectedIconPath": "static/tabbar4-1.png",
	        "text": "我的"
	    }]
	}

首页

目录：在这里插入图片描述

首页顶部导航

1、 header.vue页面

<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="search">
					<image src="./../static/image/search.png"></image>
				</view>
				<view class="logo">
					<image src="./../static/image/logo.png"></image>
				</view>
				<view class="cart">
					<image src="./../static/image/trolley.png"></image>
				</view>
			</view>
		
			<view class="menuTab">
				<view class="menuTabItem  menuActive">
					推荐
				</view>
				<view class="menuTabItem">
					手机
				</view>
				<view class="menuTabItem">
					声学
				</view>
				<view class="menuTabItem">
					配件
				</view>
				<view class="menuTabItem">
					生活
				</view>
		
			</view>
		</view>
		
		<!-- 设置一个高度占位置，menuTab下的元素不往上去 -->
		<view class="headerEmpty"></view>
	</view>
</template>

<script>
</script>

<style>
	.header {
    
		height: 180rpx;
		position: fixed;
		width: 100%;
		background: #fff;
		z-index: 9;
	}
	
	.navbar {
    
		height: 110rpx;
		display: flex;
		margin: 0 20rpx;
		align-items: center;
		justify-content: space-between;
	}
	
	.navbar .search image,
	.navbar .cart image {
    
		width: 30rpx;
		height: 30rpx;
	}
	
	.navbar .logo image {
    
		width: 140rpx;
		height: 30rpx;
	}
	
	
	.menuTab {
    
		height: 70rpx;
		display: flex;
		margin: 0 20rpx;
		justify-content: space-between;  /* 分开两边布局 */
	}
	
	.menuTab .menuTabItem {
    
		font-size: 28rpx;
		color: #000000;
		width: 60rpx;
		height: 55rpx;
		line-height: 55rpx;
	}
	
	.menuTab .menuTabItem.menuActive {
    
		color: #000bef;
		border-bottom: 1rpx solid #000bef;  /* 选中时的下划线:推荐  手机 */
	}
	
	.headerEmpty {
    
		height: 180rpx;
		background-color: #000000;
	}
</style>

实现效果图
在这里插入图片描述

2、index.vue页面：导入header.vue组件

<template>
	<view class="content">
		<view class="status"></view>
		<MyHeader></MyHeader>
	</view>
</template>

<script>
	import MyHeader from '../../components/header.vue'
	export default {
    
		data() {
    
			return {
    
				title: 'Hello'
			}
		},
		components:{
    
			MyHeader
		}
	}
</script>

<style>	
</style>

首页轮播图

1、indexSwiper.vue页面

swiper轮播图组件，点击进入

<template>
	<!-- :indicator-dots="true" ：控制轮播图下的小黑点的显示（true）与隐藏（false) -->
	<!-- :autoplay="true"  :控制轮播图是否自动播放 -->
	<!-- 轮播图是使用的uniapp中的swiper轮播图组件，链接：https://uniapp.dcloud.io/component/swiper -->
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image src="./../static/image/banner1.jpg"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image src="./../static/image/banner2.jpg"></image>
			</view>