站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 微信小程序 flexbox layout快速实现基本布局的解决
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

微信小程序 flexbox layout快速实现基本布局的解决方案

来源: 易采站长站

问题描述

flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很繁琐了。所以使用 flexbox layout 对小程序页面内容进行整体封装布局,这样既方便又快捷。那么如何使用弹性盒子快速实现小程序的基本布局呢?

传统的布局方式对布局目标的实现属性赋值非常的分散,严重依赖内容的大小和页面的结构,这样操作起来非常的麻烦。而弹性盒子就比较灵活、统一,可以对整个页面的布局进行总体把控设置。弹性盒子就是将页面的内容整体放进一个容器里面进行整体的有结构的布局设置让页面更加和谐。

解决方案

首先,对 flexbox layout 的使用方法进行简单介绍。

先将所需封装的内容放在一个 view 容器里面,再对该 view 容器定义一个 class 。然后需要在 wxss 里面对 class 进行设置布局。

在 wxss 中首先用 display : flex 将 view 容器变成一个弹性盒子,但是弹性盒子默认的主轴方向是从左往右所以每个元素都是从左往右的放置。根据自己的需要修改主轴的方向。

这里以从上往下的主轴方向,垂直方向上均匀分布,元素在水平方向上居中显示为例。在 wxss 用 flex-direction : column 来实现从上到下的布局。但是会发现段与段之间太紧促了,这个时候就需要让段落均匀分布,用 justify-content : space-around 来实现。(注意:在使用 justify-content 的时候我们需要根据自己设置的布局方向对页面的高度(宽度)进行适配,小程序会根据你所设置的对段落间的空间进行调整。)。最后让元素在水平方向上居中显示,需要用 align-items : center 来实现。

下面是用两个弹性盒子(一个是垂直方向,另一个是水平方向)布局的案例代码:

表 3.1.wxml 代码

<view>
<image src="/pages/img/ 宣传图 2.jpg"></image>
<text> 从我做起 </text>
<text> 不信谣!不传谣! </text>
<text> 相信政府!相信国家! </text>
</view>
<view>
<text> 戴口罩,勤洗手 </text>
<text> 不扎堆,拒聚餐 </text>
<text> 吃熟食,禁野味 </text>
<text> 常通风,勿恐慌 </text>
<text> 早就医,莫轻视 </text> 
</view>

表 3.2.wxss 代码

.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}
            
最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -