uniapp小程序实现上下固定中间滑动布局(附源码和实现过程讲解)

前言

上下固定，中间可以上下滑动是移动端中非常常见的布局，实现的过程在本篇记录一下

效果展示：

实现过程

在移动端中布局主要以flex布局为主，如果不太清楚可以去看看学习一下flex布局
要实现样式，我们先要学会分析布局：
上面是头部，中间是内容，最下面是尾部

要实现中间可上线滑动，官方给我们提供了scroll-view标签来实现
下面我将实现过程中的关键点和简化版代码附上：

1. 首先是最外层（头，中间，尾）要实现flex布局，从上往下
2. 其次是中间内容要实现flex布局，横向排列，自动换行
3. 然后就是中间部分要实现绝对定位和相对定位，不会对尾部造成影响

实现源码：复制到页面就能查看效果，底部的标签图片我就不放了

<template>
	<view class="body">
		<view class="head">
			头
		</view>
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
					<view class="course-card">
						<view>
							<image src="@/static/bg.jpg" mode="widthFix"></image>
						</view>
						<view>uniapp布局</view>
						<view>免费</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="tools">
			<view class="tools-item">
				<image src="@/static/icon/index-active.png" mode="widthFix"></image>
				<view>首页</view>
			</view>
			<view class="tools-item">
				<image src="@/static/icon/sort.png" mode="widthFix"></image>
				<view>分类</view>
			</view>
			<view class="tools-item">
				<image src="@/static/icon/cal.png" mode="widthFix"></image>
				<view>课表</view>
			</view>
			<view class="tools-item">
				<image src="@/static/icon/head.png" mode="widthFix"></image>
				<view>我的</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.body {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.head {
		text-align: center;
		margin-top: 10px;
	}
	.list-wrap {
		/* height: 500px; */
		flex-grow: 1;
		position: relative;
	}
	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.list-scroll-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 2vw;
		margin-right: 2vw;
	}
	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.course-card image {
		width: 100%;
		border-radius: 5px;
	}
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
	.tools-item image {
		width: 39px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161