脚本之家

微信小程序如何居中布局?

上一篇
防止小程序多次点击跳转解决方案
下一篇
微信小程序通过api接口将json数据展现到小程序示例

前段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。 

flex布局有啥用呢,最大的作用便是快速实现你所需要的布局(水平居中、垂直居中、左右对齐等) 

flex布局的使用非常简单,在这我将几个常用的场景,其他更深入的可以去查资料了解(我才不会说是因为我懒)

首先是对布局容器设置display:flex; 

然后你就可以尽情利用两个属性(justify-content(水平方向)和align-items(垂直方向))进行放纵了 

例如众所周知最蛋疼的垂直居中

/* wxml */<view class="classname">
    <text>测试用小玩意儿</text>
</view>
/* wxss */view{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

将align-items改成justify-content

/* wxml */<view class="classname">
<text>测试用小玩意儿</text>
</view>
/* wxss */
view{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}

两个属性一起来

 

 常用场景不止居中布局,还有很多,但一讲起来篇幅难免太长,这里用文字带过,不懂可以留言问我,或者度娘/Google(推荐看阮一峰的教程)

flex-direction(改变轴线方向): row(水平轴线,默认) column(垂直轴线) //这里讲的是比较常用的布局 
(轴线举例:父级元素使用flex布局,默认布局下块级元素是会换行的,但设置了flex布局后默认就都水平排列了) 
justify-content: flex-start(居于轴线的开头) center(居于轴线的中间) flex-end(居于轴线的末端) space-around(将子元素按比例排列在轴线上) space-between(将子元素排列在轴线两端) 
align-items: 同justify-content 
flex-wrap(规定子元素溢出处理): nowrap(不换行) wrap(顺序换行) wrap-reverse(逆序换行)

flex-direction(改变轴线方向): row(水平轴线,默认) column(垂直轴线) //这里讲的是比较常用的布局 
(轴线举例:父级元素使用flex布局,默认布局下块级元素是会换行的,但设置了flex布局后默认就都水平排列了) 
justify-content: flex-start(居于轴线的开头) center(居于轴线的中间) flex-end(居于轴线的末端) space-around(将子元素按比例排列在轴线上) space-between(将子元素排列在轴线两端) 
align-items: 同justify-content 
flex-wrap(规定子元素溢出处理): nowrap(不换行) wrap(顺序换行) wrap-reverse(逆序换行)

以上就是微信小程序如何居中布局?的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

微信小程序如何居中布局? 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
防止小程序多次点击跳转解决方案
下一篇
微信小程序通过api接口将json数据展现到小程序示例

您可能感兴趣的小程序开发教程

小程序开发

微信小程序中将多个view居中显示的方法

我们在这里要实现的效果是这样的,在小程序中将多个view居中显示 先看一下效果图如下图效果所示:我们需要将“延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的

小程序开发

微信小程序如何居中布局?

前段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。 

小程序开发

防止小程序多次点击跳转解决方案

场景在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):解决办法然后从轻松理解JS函数节流和函..

小程序开发

微信小程序-事件

微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。接下来把文档copy过来,原文地址:https://mp.weixin.qq.com