uniapp实战开发商城APP和小程序（一）
uniapp实战开发商城APP和小程序 - 首页页面布局，组件封装
- 底部 tabBar
- 首页
-
- 首页顶部导航
- 首页轮播图
- 首页服务分类和分类导航
- 首页广告
- 商品列表
- 首页布局完成，下一篇：首页数据获取（更新中）
底部 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>
<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>
<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>
swiper-item>
<swiper-item>
<view class="swiper-item">
<image src="./../static/image/banner3.jpg">image>
view>
swiper-item>
<swiper-item>
<view class="swiper-item">
<image src="./../static/image/banner4.jpg">image>
view>
swiper-item>
swiper>
template>
<script>
script>
<style>
.swiper{
width: 100%;
height: 390rpx;
}
.swiper-item image{
width: 100%;
height: 390rpx;
}
style>
2、index.vue页面: 导入indexSwiper.vue组件
<template>
<view class="content">
<view class="status">view>
<MyHeader>MyHeader>
<IndexSwiper>IndexSwiper>
view>
template>
<script>
import MyHeader from '../../components/header.vue'
import IndexSwiper from '../../components/indexSwiper.vue'
export default {
data() {
return {
title: 'Hello'
}
},
components:{
MyHeader,
IndexSwiper
}
}
script>
<style>
.status {
height: var(--status-bar-height);
width: 100%;
}
style>
实现效果图
首页服务分类和分类导航
1、indexService.vue页面
<template>
<view class="">
<view class="service">
<view class="serviceItem">
<image src="./../static/image/icon1.png" mode="">image>
魅族官网直供
view>
<view class="serviceItem">
<image src="./../static/image/icon2.png" mode="">image>
满80免运费
view>
<view class="serviceItem">
<image src="./../static/image/icon2.png" mode="">image>
7天无理由退货
view>
view>
<view class="shopNav">
<view class="shopNavItem">
<image src="./../static/image/recommend1.png" mode="">image>
<text>魅族 16S Protext>
view>
<view class="shopNavItem">
<image src="./../static/image/recommend2.png" mode="">image>
<text>魅族 16S Protext>
view>
<view class="shopNavItem">
<image src="./../static/image/recommend3.jpg" mode="">image>
<text>魅族 16S Protext>
view>
<view class="shopNavItem">
<image src="./../static/image/recommend4.jpg" mode="">image>
<text>魅族 16S Protext>
view>
view>
view>
template>
<script>
script>
<style>
.service {
display: flex;
height: 70rpx;
background: #f7f7f7;
align-items: center;
/* 垂直居中 */
justify-content: center;
/* 元素水平居中 */
}
.serviceItem {
font-size: 24rpx;
color: #a3a3a3;
display: flex;
align-items: center;
margin: 0 20rpx;
}
.serviceItem image {
width: 30rpx;
height: 35rpx;
margin-right: 10rpx;
}
.shopNav {
height: 225rpx;
display: flex;
justify-content: center;
}
.shopNavItem image{
width: 100rpx;
height: 100rpx;
margin-top: 30rpx;
}
.shopNavItem{
margin:0 10rpx;
}
.shopNavItem text{
display: block;
font-size: 24rpx;
color: #000000;
line-height: 100rpx;
}
style>
2、index.vue页面：导入indexService.vue组件
<template>
<view class="content">
<view class="status">view>
<MyHeader>MyHeader>
<IndexSwiper>IndexSwiper>
<IndexService>IndexService>
view>
template>
<script>
import MyHeader from '../../components/header.vue'
import IndexSwiper from '../../components/indexSwiper.vue'
import IndexService from '../../components/indexService.vue'
export default {
data() {
return {
title: 'Hello'
}
},
components: {
MyHeader,
IndexSwiper,
IndexService
}
}
script>
<style>
.status {
height: var(--status-bar-height);
width: 100%;
}
style>
实现效果图
首页广告
1、indexAD.vue页面
<template>
<view class="">
<view class="indexAD">
<view class="indexADleft">
<image src="./../static/image/ad1.jpg" mode="">image>
view>
<view class="indexADright">
<view class="indexADrightItem">
<image src="./../static/image/ad2.jpg" mode="">image>
view>
<view class="indexADrightItem">
<image src="./../static/image/ad3.png" mode="">image>
view>
view>
view>
view>
template>
<script>
script>
<style>
.indexAD{
display: flex;
margin-top: 20rpx;
/* 头部20rpx的线，或者设置背景颜色，使用 margin-top: 20rpx; */
/* border-top: 20rpx solid #f4f4f4; */
}
.indexADleft{
width: 50%;
height: 520rpx;
}
.indexADleft image{
width: 100%;
height: 520rpx;
}
.indexADright{
width: 50%;
}
.indexADright image{
width: 100%;
height: 260rpx;
}
.indexADrightItem{
height: 260rpx;
}
style>
2、index.vue页面：导入indexAD.vue组件
<template>
<view class="content">
<view class="status">view>
<MyHeader>MyHeader>
<IndexSwiper>IndexSwiper>
<IndexService>IndexService>
<IndexAD>IndexAD>
view>
template>
<script>
import MyHeader from '../../components/header.vue'
import IndexSwiper from '../../components/indexSwiper.vue'
import IndexService from '../../components/indexService.vue'
import IndexAD from '../../components/indexAD.vue'
export default {
data() {
return {
title: 'Hello'
}
},
components: {
MyHeader,
IndexSwiper,
IndexService,
IndexAD
}
}
script>
<style>
.status {
height: var(--status-bar-height);
width: 100%;
}
style>
实现效果图
商品列表
1、shopItem.vue组件封装商品列表
<template>
<view class="shopListItem">
<image class="shopImg" src="./../static/image/p1.png" mode="">image>
<view class="shopTitle">
魅族 16s Pro
view>
<view class="shopActive">
<view class="shopActiveLab">
免息
view>
<view class="shopActiveTxt">
4800W AI三摄 屏幕下方屏幕下方
view>
view>
<view class="shopPrice">
￥2999
view>
view>
template>
<script>
script>
<style>
.shopListItem{
width: 370rpx;
height: 550rpx;
background: #fff;
overflow: hidden;
margin-top: 10rpx;
}
.shopListItem .shopImg{
height: 316rpx;
width: 316rpx;
display: block;
margin: 40rpx auto 0;
/* padding-top: 40rpx; */
}
.shopListItem .shopTitle{
line-height: 50rpx;
height: 50rpx;
font-size: 14rpx;
text-align: center;
}
.shopListItem .shopActive{
height: 40rpx;
width: 346rpx;
margin: 0 auto;
border: 1rpx solid #d9000b;
display: flex; /* 内部布局同行显示 */
}
.shopActiveLab{
width: 70rpx;
background: #d9000b;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 40rpx;
}
.shopActiveTxt{
width: 276rpx;
font-size: 24rpx;
color: #d9000b;
overflow: hidden;
text-overflow: ellipsis; /* 这三行设置文字超出显示... */
white-space: nowrap;
line-height: 40rpx;
}
.shopPrice{
font-size: 28rpx;
color: #d9000b;
text-align: center;
line-height: 80rpx;
}
style>
2、楼层二头部的表格组件封装
indexTable.vue
<template>
<view class="floorTable">
<view class="tableItem">
<image src="./../static/image/cateRecommend1.jpg" mode="">image>
view>
<view class="tableItem" style="background: #7064ca;">
<view class="tableBigTitle">
MEIZU UR 高端定制耳机 预约
view>
<view class="tableSmallTitle">
MEIZU UR 高端定制耳机 预约MEIZU UR 高端定制耳机 预约MEIZU UR 高端定制耳机 预约
view>
<view class="tableLine">
view>
<view class="tablePrice">
￥2000
view>
view>
<view class="tableItem" style="background: #f65c5c;">
<view class="tableBigTitle">
MEIZU UR 高端定制耳机 预约
view>
<view class="tableSmallTitle">
MEIZU UR 高端定制耳机 预约MEIZU UR 高端定制耳机 预约MEIZU UR 高端定制耳机 预约
view>
<view class="tableLine">
view>
<view class="tablePrice">
￥2000
view>
view>
<view class="tableItem">
<image src="./../static/image/cateRecommend2.jpg" mode="">image>
view>
view>
template>
<script>
script>
<style>
.floorTable{
display: flex;
flex-wrap: wrap;
}
.tableItem{
width: 50%;
height: 330rpx;
}
.tableItem image{
width: 100%;
height: 330rpx;
}
.tableBigTitle{
font-size: 30rpx;
line-height: 46rpx;
color: #fff;
padding-top: 30rpx;
padding-left: 30rpx;
padding-right: 100rpx;
}
.tableSmallTitle{
line-height: 30rpx;
color: rgba(255,255,255, 0.8);
font-size: 11rpx;
padding-left: 30rpx;
padding-right: 40rpx;
padding-top: 15rpx;
/* 显示两行,多余的以...代替 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;//控制行数
-webkit-box-orient:vertical;
}
.tableLine{
width: 34rpx;
height: 5rpx;
background: #fff;
margin-left: 30rpx;
margin-top: 20rpx;
}
.tablePrice{
font-size: 36rpx;
line-height: 100rpx;
padding-left: 30rpx;
color: rgba(255,255,255, 0.8);
}
style>
3、在index.vue页面引入shopItem.vue商品列表组件和楼层二头部的表格组件 indexTable.vue
<template>
<view class="content">
<MyHeader :content="recommend_cate">MyHeader>
<IndexSwiper :content="banner">IndexSwiper>
<IndexService>IndexService>
<IndexAD>IndexAD>
<view class="floor">
<Title name="智能手机">Title>
<view class="adImg">
<image src="../../static/image/cate1Ad.jpg" mode="">image>
view>
<view class="shopList">
<ShopItem>ShopItem>
<ShopItem>ShopItem>
<ShopItem>ShopItem>
<ShopItem>ShopItem>
view>
<view class="floor">
<Title name="魅族声乐">Title>
<IndexTable>IndexTable>
<view class="shopList">
<ShopItem>ShopItem>
<ShopItem>ShopItem>
<ShopItem>ShopItem>
<ShopItem>ShopItem>
view>
view>
<view class="floor">
<Title name="魅族声乐">Title>
<IndexTable>IndexTable>
<view class="shopList">
<ShopItem>ShopItem>
<ShopItem>ShopItem>
<ShopItem>ShopItem>
<ShopItem>ShopItem>
view>
view>
view>
view>
template>
<script>
import MyHeader from '../../components/header.vue'
import IndexSwiper from '../../components/indexSwiper.vue'
import IndexService from '../../components/indexService.vue'
import IndexAD from '../../components/indexAD.vue'
import Title from '../../components/title.vue'
import ShopItem from '../../components/shopItem.vue'
import IndexTable from '../../components/indexTable.vue'
export default {
data() {
return {
title: 'Hello',
banner:[],//轮播图
recommend_cate:[]//顶部推荐分类
}
},
components: {
MyHeader,
IndexSwiper,
IndexService,
IndexAD,
Title,
ShopItem,
IndexTable
},
onLoad() {
this.getData();
},
methods:{
getData(){
uni.request({
url: 'http://www.mall.com/api/index',
success: (res) => {
console.log(res.data.data);
// this.text = 'request success';
var data=res.data.data;
this.recommend_cate=data.recommend_cate;
this.banner=data.banner;
console.log(this.recommend_cate,this.banner)
}
});
}
}
}
script>
<style>
page {
background: #f4f4f4;
}
.shopList{
display: flex; /* 并排显示 */
justify-content: space-between; /* 两边对齐(贴两边) */
flex-wrap: wrap; /* 由于flex布局默认不换行,所以flex-wrap: wrap;设置换行显示 */
}
.adImg{
height: 344rpx;
width: 100%;
}
.adImg image{
width: 100%;
height: 344rpx;
}
style>
实现效果图
商品列表：
楼层二头部的表格实现图：
