微信小程序学习笔记之页面布局

本次主要学习页面的一些基本布局

本次页面布局分成三段，第一段，屏幕上的滑动页面
（原谅我电脑上没有正常图片hiahiahia）

<view class="selection">
<swiper indicator-dots="true" 
       autoplay="true" interval="3000" duration="1000">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item > <image src="2077.png"></image> </swiper-item>  
<swiper-item > <image src="timg.jpg"></image> </swiper-item>
<swiper-item > <image src="首杀.jpg"></image> </swiper-item> 
</block>
</swiper>
</view>

.selection{  border-bottom: 2px solid #ddd;}

需要注意的是，wx：for这个条件渲染，并不是必须使用的，因为教程里用了，所以我也使用了，我对条件渲染这个内容还不是特别精通。
如有错误，还请指正。
以上，滑动页面就做好了
如果需要设置更多关于swiper的属性，可以自行去官网查看。
下面来看第二块布局
（我就全部用一张图片了，电脑里图片实在不多）
代码

<view class="selection">
<view class="header"><text>精品推荐</text>
<text class="text-all">全部精品</text></view>
<view class="content">
<view class="content-item"><image src="2077.png"></image><view>  <text class="content-item-text">赛博朋克2077</text> </view></view>
<view class="content-item"><image src="2077.png"></image><view>  <text class="content-item-text">赛博朋克2077</text> </view></view>
<view class="content-item"><image src="2077.png"></image><view>  <text class="content-item-text">赛博朋克2077</text> </view></view>
<view class="content-item"><image src="2077.png"></image><view>  <text class="content-item-text">赛博朋克2077</text> </view></view>
</view>
</view>

css

.header{  border-left-width: 2px;
  border-left-style: solid;
    border-left-color: limegreen;
      display: flex;
        justify-content: space-between;
          align-items: center;
          }，
          .text-all{  color: greenyellow;  font-size: 10px;}，
          .content{  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: center;}
          .content-item{height: 250rpx;width: 45%;margin: 2px;position: relative;}
          .content-item image{  width: 100%;  height: 100%;}
          .content-item-text{  position: absolute;  bottom: 0px;color: white;font-size: 10px;background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));height: 125px;width:98%;display: flex;flex-direction: column;justify-content: flex-end;padding-left: 1%;padding-right: 1%;padding-bottom: 1%;}
          

以上，第二块实现，这里到没什么需要特别注意的，好好调整页面颜色，让他看起来更顺眼一点。
第三块

还是熟悉的图片

<view class="selection">
<view class="header"><text>热门评测</text><text class="text-all">全部评测</text></view>
<view class="list-item">
<view class="list-item-images">
<image src="2077.png" ></image><image src="timg.jpg" class="avater"></image>
</view>
<view class="list-item-text" >
<view class="list-item-text-title"> <text>标题</text> </view><view class="list-item-text-content"> <text>内容赛博朋克2077</text> </view>
</view>
</view>
</view>

css

.list-item{  height: 500rpx;  width: 100%;}
.list-item-image{  height: 300rpx;  width: 100%;  position: relative;}
.list-item-image image{  height: 100%;  width: 100%;  }
.list-item-text{  height: 200rpx;  width: 96%;margin-top: 20rpx;padding-left: 2%;padding-right: 2%;}
.avater{  width: 100rpx;  height: 100rpx;  border-radius: 50%;  position: absolute;  bottom: -50rpx;  right: 30px;  top: 630px;}
.list-item-text-content{  font-size: 10px;  color: #999;  margin-top: 20rpx;}

以上，第三块布局完成。
需要注意的是，相对布局和绝对布局，两者相辅相成。
相对布局要注意的是，与之相称的是哪一块绝对布局。
到此，三块布局完成，剩下就是需要微调了。
新人初学，如有错误，请多多指正。