我在工作中遇到小程序的布局问题

此篇完全就是笔记和总结。

1

我在工作中遇到小程序的布局问题

这种布局这样写。

.input{

flex:1    

}

2

遇到这样的布局(flex布局但是最后一行的个数要少点的情况)

我在工作中遇到小程序的布局问题

我在工作中遇到小程序的布局问题

一般你一行有几个就写几个空的view.(例如我这行有三个我就写三个空的view)

wxss如下

不是空的view

month-item {
width:30%;
height:76rpx;
justify-content:space-around;
align-items:center;
background-color:#fff;
border-radius:10rpx;
margin-top:20rpx;

}

空的view

monthempty-item {
width:30%;
height:0rpx;

}

3

我在工作中遇到小程序的布局问题

这种图片做背景的布局

wxml

<view class='bg'>
<image src='../../img/login-bg.png' ></image>
</view>

wxss

.bg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}

.bg image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

先这么多,后续会更新。