2018-07-10  566 views 6

ASP.NET WebAPI 开发小程序(列表页)开发实例之如何进行布局(二)

 标签:      

 

ASP.NET API 开发小程序之列表页开发实例(一) 中讲了小程序的基本目录结构和作用,更多的需要查看官方文档或度娘其他内容(建议开发遇到问题再查,如果你的开发习惯是把基础全部撸通了再来,那建议你从头到尾过一遍官方的开发文档)

本系列教程的结构如下:

 1 )小程序基础知识(常用且浅显)

2)小程序基础布局知识

3)小程序列表页布局实例

 4)ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例

5)小程序请求ASP.NET WebAPI数据并在前端实现数据绑定实例

6)小程序数据提交Post的使用

本篇主要讲一下小程序的布局

小程序布局主要使用flex布局,不过这种布局方式对于低端机不太友好,贵在开发方便。

在传统的html中我们布局通常是使用div + css布局,而布局过程中用的最多的就是float浮动样式属性,flex有异曲同工之妙,并且更加方便。

本文简单举例几个常见的布局问题作讲解:

1、小程序的单位

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

以下为不同设备的具体换算,参考下即可,实际开发过程中基本上可以把屏幕看作750px的宽度去划分,即1500rpx。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

2、左右布局

小程序中的左右布局通常使用flex去实现。

1)不设置宽度实现左右布局

wxml:

<view class="container">
  <text class="left">左</text>
  <text class="right">右</text>
</view>

wxss:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.left,.right{
  padding:20rpx;
  border: 1px solid #ddd;
}
.left {
  font-family: "微软雅黑";
  color: #888;
  font-size: 40rpx;
}

.right {
  font-family: "宋体";
  color: #888;
  font-size: 80rpx;
}

 

2)设置宽度左右布局

wxml不需要变更,跟上面一样。

wxss:

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.left,.right{
  padding:20rpx;
  border: 1px solid #ddd;
}
.left {
  font-family: "微软雅黑";
  width: 1200rpx;
  color: #888;
  font-size: 40rpx;
}

.right {
  font-family: "宋体";
  width: 300rpx;
  color: #888;
  font-size: 80rpx;
}

记得外层的flex-direction一定要设置成row,这样才是横排布局(对应.container中的flex-direction属性)。其中align-item:center 可以设置内容的垂直居中,但是前提需要使用flex布局,justify-content属性设置内容在主轴(横轴)的对齐方式,具体属性上w3c查即可。

3、垂直居中

在内以前的HTML DIV+CSS的布局中垂直居中比较头疼,但是在小程序中,垂直居中使用flex后异常方便。

只要设置所在区块的布局为flex布局,即display:flex;并设置alien-item为center即可,无论是父层还是子层都建议设置高度。

以下示例图为内层相对外层垂直居中,内层内容相对内层垂直居中的效果:

wxml:

<view class="container">
  <view class='verAlign'>
    这里是要居中的内容
  </view>
</view>

wxss:

.container {
  display: flex;
  align-items: center;
  height: 400px;
  border: 1px solid #ccc;
}
.verAlign{
  display: flex;
  align-items: center;
  height: 200rpx;
  border: 1px solid #ccc;
}

 

以上只是基本的布局操作,还有很多常用的操作需要在摸索中发现,如有遇到问题可以度娘或查看官方文档。

后续系列教程将包含:小程序布局 + 后端开发 + 前端数据绑定

系列教程未完,待续。。。

 

6 条留言  访客:0 条  博主:0 条   引用: 6 条

来自外部的引用: 6 条

  • ASP.NET API 开发小程序(列表页)开发之列表布局实例(三) | 落雨信息
  • | 落雨信息
  • ASP.NET API 开发小程序(列表页)开发之列表布局实例(四) | 落雨信息
  • ASP.NET WebAPI 开发小程序(列表页)开发之前端绑定列表页数据实例(五) | 落雨信息
  • ASP.NET WebAPI 开发小程序(列表页)开发之获取列表页数据WebAPI编写实例(四) | 落雨信息
  • ASP.NET API 开发小程序(列表页)开发实例 知识基础(一) | 落雨信息

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: