首页 > 其他分享 >Flex布局【实战】

Flex布局【实战】

时间:2023-09-27 19:56:10浏览次数:40  
标签:实战 Flex uniapp 100% 布局 width flex 免费

实战:使用 Flex 布局构建如下界面

分析:

  1. 竖向:使用 flex 布局将页面分为三部分,即头部、主体和底部。其中头部和底部需要固定高度,其余的高度分配给主体部分(使用 flex-direction=column;flex-grow: 1;
  2. 主体部分:使用 flex 布局排列多个卡片,这里可以使用 uniapp 提供的 scroll-view 滚动视图
  3. 底部:使用 flex 布局多个视图

一种实现:

<template>
	<view class="main-page">
		<view class="head-part">
			Coursa Is All your Need!
		</view>
		<view class="body-part">
			<scroll-view scroll-y="true" class="scroll-view-clz">
				<view class="list-scroll-views">
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
					<view class="view-item">
						<image src="../../static/course.png" mode="widthFix"></image>
						<view>uniapp实战</view>
						<view>免费</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottom-part">
			<view class="bottom-item">
				<image src="@/static/tools/add.png" mode="widthFix"></image>
				<view class="des">添加</view>
			</view>
			<view class="bottom-item">
				<image src="@/static/tools/done.png" mode="widthFix"></image>
				<view class="des">完成</view>
			</view>
			<view class="bottom-item">
				<image src="@/static/tools/store.png" mode="widthFix"></image>
				<view class="des">商店</view>
			</view>
			<view class="bottom-item">
				<image src="@/static/tools/message.png" mode="widthFix"></image>
				<view class="des">消息</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.main-page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.head-part {
		height: 5vh;
		line-height: 5vh;
		font-size: 30px;
		text-align: center;
		background-color: #f8f8f8;
	}

	.body-part {
		height: 100%;
		margin: 10px 0;
		background-color: #f8f8f8;
		flex-grow: 1;
		position: relative;
	}

	.scroll-view-clz {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.list-scroll-views {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.view-item {
		width: 43vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.view-item image {
		width: 100%;
		border-radius: 10px;
	}

	.bottom-part {
		width: 100%;
		background-color: #f8f8f8;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.bottom-item {
		width: 45px;
		font-size: 14px;
		text-align: center;
		padding: 10px 0;
	}

	.bottom-item image {
		width: 100%;
	}
</style>

标签:实战,Flex,uniapp,100%,布局,width,flex,免费
From: https://www.cnblogs.com/engure/p/17734179.html

相关文章

  • 腾讯云 Cloud Studio 实战训练营结营&活动获奖公示
    点击链接了解详情“腾讯云CloudStudio实战训练营”是由腾讯云联合CSDN推出的系列开发者技术实践活动,通过技术分享直播、动手实验项目、优秀代码评选、有奖征文活动等,让广大开发者沉浸式体验腾讯云开发者工具CloudStudio的同时,实现技术实战能力提升。本次实战训练营活......
  • flex 布局之左右边距对齐,换行左对齐2
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <styletype="text/css"> li{ list-style:none; } .List{ width:100%; box-sizing:borde......
  • 云计算实战手册(1)
    目录openflow概述历史概述openflow概述历史以美国为中心,从零开始重新构建网络的新一代网络技术研究。技术人员提出了各种新一代网络技术的方案,实现比以往互联网通信设备更精确的控制。OF的最初概念始于2008年的斯坦福大学。到2009年12月,OpenFlow交换规范1.0版发布。自成立以......
  • 五分钟k8s入门到实战-应用配置
    背景在前面三节中已经讲到如何将我们的应用部署到k8s集群并提供对外访问的能力,x现在可以满足基本的应用开发需求了。现在我们需要更进一步,使用k8s提供的一些其他对象来标准化我的应用开发。首先就是ConfigMap,从它的名字也可以看出这是用于管理配置的对象。ConfigMap不......
  • 5、SimGNN实战
    一、概述文献标题:SimGNN:ANeuralNetworkApproachtoFastGraphSimilarityComputation来源:WSDM2018(网络搜索和数据挖掘国际会议)论文链接:https://arxiv.org/abs/1808.05689代码链接:https://paperswithcode.com/paper/graph-edit-distance-computation-via-graph#code目的:......
  • 面向对象实战后的总结
    面向对象封装继承多态类对象(实例)方法消息面向对象编程:1.使用对象和对象之间的交互来设计系统,2.数据和相关的逻辑封装在一起什么是面向对象面向对象是:一种程序设计思想,它的核心概念是“对象”。“对象”是指具有特定属性和行为的实体,能够接收消息、处理消息并返回结果。......
  • 新手指引:前后端分离的springboot + mysql + vue实战案例
    案例说明:使用springboot+mysql+vue实现前后端分离的用户查询功能。1、mysql:创建test数据库->创建user数据表->创建模拟数据;2、springboot:配置mysql->使用mybatis操作mysql数据库->接口开发;3、vue:使用axios访问接口->user数据展示;1、mysql数据库1.1、安......
  • Websocket集群解决方案以及实战(附图文源码)
    最近在项目中在做一个消息推送的功能,比如客户下单之后通知给给对应的客户发送系统通知,这种消息推送需要使用到全双工的websocket推送消息。所谓的全双工表示客户端和服务端都能向对方发送消息。不使用同样是全双工的http是因为http只能由客户端主动发起请求,服务接收后返回消息。web......
  • Soul深度探索布局社交元宇宙,为行业发展提供新思路
    近年来,随着线上社交的高速发展,通过线上社交平台认识新朋友,成为Z世代群体的主流选择。数据显示,Z世代用户社交活跃占比高达83.6%,中国近70%的Z世代用户倾向线上社交。在此背景下,主打构建年轻人社交元宇宙的SoulApp,通过创新兴趣图谱建立关系和游戏化的产品设计,为用户打造一个......
  • 开源防火墙实战手册(4)-linux/unix基础(3)
    目录配置文件主机名主机名和IP地址的映射域名系统(DNS)解析器配置文件主机名[waterruby@localhost~]$cat/etc/hostnamewaterruby-server主机名和IP地址的映射[waterruby@localhost~]$cat/etc/hosts127.0.0.1localhostlocalhost.localdomainlocalhost4loca......