实战开发商城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">
更多推荐
uniapp实战开发商城APP和小程序(一)
发布评论