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

实战开发商城APP和小程序（一）"/>

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><!-- 设置一个高度占位置，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轮播图组件，链接： --><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">