一、页面布局
小程序的首页大致可以分为3个部分，页头、页身、页脚。
从简单的构造上看就是这么多
比如这个简单的小程序，它就是这样构造。那么如果每张页面都要这样创建，肯定会有重复的部分，所以可以把重复的部分抽取出来封装成组件。需要使用的时候引用就行。这里先不介绍组件的封装。等基础夯实在写。
二、这些部分承担着什么内容？
页头的承担责任很少。一般都是返回上一级，或者是一个搜索框，再或者是一个tabs的分页。
页身承担的责任其实也不算多。主要是展示的列表，提交的表单或者其他一些个性操作
页脚比较固定。一般都是做tabs，列如QQ的页脚，微信的页脚。就是一些简单的操作。又比如一些非法的小网站。它的设计也基本上就是这些内容。
三、怎么设计这种页面。
首先先明确主要需求是什么，其次在有UI找UI,没UI找纸笔。直接简明扼要明确对方（自己）要什么。把页面先画出来。不要觉得这个功能好难啊，被功能吓到。跟盖房子一样。如果你不把毛坯房建好，剩下的人怎么去装修啊？
最后，举一个例子
上代码
<template>
<view class="page">
<view class="status_bar"></view>
<view class="header">
<view :class="{'search-header':true,ipx:false}">
<view class="search-wrap">
<view class="icon"></view>
<view class="text">请输入商家名或菜品</view>
</view>
</view>
</view>
<view class="shop-main">
<view class="shop-list">
<view class="shop-wrap">
<view class="image">
<image src="XXXXXXX.jpg"></image>
</view>
<view class="shop-info">
<view class="shop-name">XXXXXXX</view>
<view class="distance">1.5km</view>
<view class="address">XXXXXX</view>
<view class="pack-btn">自提</view>
</view>
</view>
</view>
<view class="shop-list">
<view class="shop-wrap">
<view class="image">
<image src="XXXXXXX.jpg"></image>
</view>
<view class="shop-info">
<view class="shop-name">XXXXXXX</view>
<view class="distance">1.5km</view>
<view class="address">XXXXXX</view>
<view class="pack-btn">自提</view>
</view>
</view>
</view>
<view class="shop-list">
<view class="shop-wrap">
<view class="image">
<image src="XXXXXXX.jpg"></image>
</view>
<view class="shop-info">
<view class="shop-name">XXXXXXX</view>
<view class="distance">1.5km</view>
<view class="address">XXXXXX</view>
<view class="pack-btn">自提</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style scoped>
.page {
width: 100%;
min-height: 100vh;
orverflow: hidden;
}
.header {
width: 100%;
background-color: #eb1625;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
z-index: 90;
}
.header .search-header {
width: 100%;
height: 170rpx;
margin-top: 40rpx;
padding-bottom: 20rpx;
display: flex;
justify-content: center;
align-items: flex-end;
}
.header .search-header.ipx {
height: 210rpx;
}
.header .search-wrap {
width: 80%;
height: 52rpx;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 5px;
display: flex;
align-items: center;
}
.header .icon {
width: 44rpx;
height: 44rpx;
background-image: url("@/static/images/main/search_icon.png");
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
margin: 0 20rpx;
}
.header .text {
color: #999999;
font-size: 28rpx;
}
.shop-main {
width: 100%;
margin-top: 220rpx;
}
.shop-main .shop-list {
width: 100%;
border-bottom: 1px solid #EFEFEF;
box-sizing: border-box;
padding: 20rpx 0;
}
.shop-main .shop-list .shop-wrap {
width: 92%;
margin: 0 auto;
display: flex;
}
.shop-main .shop-list .shop-wrap .image {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
}
.shop-main .shop-list .shop-wrap .image image {
width: 100%;
height: 100%;
border-radius: 5px;
}
.shop-main .shop-list .shop-info {
width: 72%;
clear: both;
}
.shop-main .shop-list .shop-info .shop-name {
width: 100%;
height: 44rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 32rpx;
font-weight: bold;
}
.shop-main .shop-list .shop-info .distance {
font-size: 28rpx;
margin-top: 10rpx;
color: #666666
}
.shop-main .shop-list .shop-info .address {
font-size: 28rpx;
margin-top: 10rpx;
color: #666666;
width: 100%;
height: 44rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.shop-main .shop-list .shop-info .pack-btn {
padding: 10rpx 20rpx;
background-color: #eb1625;
font-size: 28rpx;
color: #FFFFFF;
display: table;
border-radius: 5px;
float: right;
margin-top: 10rpx;
}
</style>
这是一个xxx.vue页面，用HBuilderX创建的。
借用这个页面的内容解释上面文字的意思。
首先整个页面都是在一个<view class="page"></view>里面
然后是头部
头部这里只有一个搜索框的图标和一个搜索框。
然后是身体
就和下面的这个图片是对应的
这个页面没有页脚，而且这个是静态页面。所以就没写js，然后在调整一下css样式就行了。
本文含有隐藏内容，请 开通VIP 后查看