微信小程序布局

开始我们的入门后,接下来就可以开始创建我们的第一个demo页面了。按照官网的步骤,在pages模块下新建我们自己的模块demo,添加好对应的文件,然后在app.json文件里面配置好路由

快速建立模块的方法,在app.json里面直接配好路由,然后保存编译后,就会它就会在pages下面自动创建好模块。

图片.png

然后在index.wxml里面添加一个路由跳转的入口。

<view class="btn-area">  
   <navigator url="../demo/demo" hover-class="navigator-hover">跳转demo页面</navigator>  
</view>  

在移动端布局相对pc 其实更简单一些。最常用的也最推荐的就属于flex布局了(flex容器)

先了解下flex的属性

在弹性布局下(display:flex),元素我们可以设置以下属性,如果不是弹性盒对象的元素,则以下属性不起作用。

flex-basis: number|auto|initial|inherit;
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
flex-flow: flex-direction flex-wrap|initial|inherit;
flex-grow: number|initial|inherit;
flex-shrink: number|initial|inherit;
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

flex-directions属性规定灵活的项目方向,row代表水平方向(行),row-reverse同行,不过以相反的顺序。column代表垂直方向(列),column-reverse同列,不过以相反的顺序。initial默认值,inherit继承。

flex-wrap 属性规定灵活项目是否拆行或拆列。nowrap规定灵活的项目不拆行或不拆列。wrap规定灵活的项目在必要的时候拆行或拆列。wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺,initial默认值,inherit继承。

flex-basis 属性用于设置或检索弹性盒伸缩基准值(宽度值),number 一个长度单位或者一个百分比,规定灵活项目的初始长度。auto自动撑开,根据内容决定。initial默认值,inherit继承。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式,是 flex-direction 和 flex-wrap性的复合属性。

flex-grow 属性用于设置或检索弹性盒子的扩展比率。number一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

实战操作

水平方向,纵向布局

图片.png
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view style="display:flex;flex-direction:row;">
    <view class="flex-item">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view style="display:flex;flex-direction:row;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>

居上,局下,居左,居右

justify-conent 定义子元素在主轴上面的对齐方式
align-items 定义子元素在侧轴上对齐的方式
  • flex-start 主轴起点对齐(默认值)
  • flex-end 主轴结束点对齐
  • center 在主轴中居中对齐
  • space-between 两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
  • space-around 每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同。
图片.png
<view class="section__title bold">对齐方式</view>
<view >justify-content:flex-start</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:flex-start;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: flex-end</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:flex-end;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: center</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:center;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: space-between</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:space-between;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
<view>flex-direction: space-around</view>
<view class="bg_gray">
  <view style="display:flex;justify-content:space-around;">
    <view class="flex-item ">1</view>
    <view class="flex-item">2</view>
    <view class="flex-item ">3</view>
  </view>
</view>
图片.png
<view>align-items: stretch</view>
<view >
  <view class="bg_gray b_height" style="display:flex;align-items: stretch">
    <view class="flex-item2 ">1</view>
    <view class="flex-item2">2</view>
    <view class="flex-item2 ">3</view>
  </view>
</view>
<view>align-items: flex-start</view>
 <view class="bg_gray b_height" style="display:flex;align-items:flex-start;">
    <view class="flex-item2 ">1</view>
    <view class="flex-item2">2</view>
    <view class="flex-item2 ">3</view>
  </view>
<view>align-items: flex-end</view>
<view class="bg_gray b_height" style="display:flex;align-items:flex-end;">
  <view class="flex-item2 ">1</view>
  <view class="flex-item2">2</view>
  <view class="flex-item2 ">3</view>
</view>
<view>align-items: center</view>
 <view class="bg_gray b_height" style="display:flex;align-items:center;">
    <view class="flex-item2 ">1</view>
    <view class="flex-item2">2</view>
    <view class="flex-item2 ">3</view>
  </view>
<view>align-items: baseline</view>
<view class="bg_gray b_height" style="display:flex;align-items:baseline;">
    <view class="flex-item2 " style="height: 30px;padding-top:20px">1</view>
    <view class="flex-item2" style="height:50px">2</view>
    <view class="flex-item2 " style="height:40px;">3</view>
</view>

按钮悬浮底部

  position:fixed ;
  bottom:0 

下一章了解布局的适配(rpx,px,vm,vh)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吉浦迅科技

关于在Jetson TX2跑的那些深度学习的例子

Lady我总结了NVIDIA官方论坛推荐的几个在Jetson TX2跑的例子/教程,供各小主儿们学习。

1093
来自专栏专知

【论文推荐】最新七篇图像分割相关论文—半监督学习、多源域适应、多器官分割、知识全卷积网络、Quickshift++

2305
来自专栏专知

【论文推荐】最新七篇强化学习相关论文—逻辑约束、综述、多任务深度强化学习、参数服务器、事件抽取、分层强化学习、过拟合研究

1721
来自专栏生信宝典

WGCNA分析,简单全面的最新教程

3152
来自专栏图形学与OpenGL

机械版CG 实验6 简单光照明模型实现

Phong光照明模型是由物体表面上一点P反射到视点的光强I为环境光的反射光强Ie、理想漫反射光强Id、和镜面反射光Is的总和,即

731
来自专栏养码场

如何用小200行Python代码做了一个换脸程序?

今日不同往常,每周干货日,场主送出的不是成套的各类编程教学视频,而是一些轻应用实操。因为完成基本的理论学习之后,任何的呈现都在于如何应用及创新。

642
来自专栏CreateAMind

周末轻松一刻,欣赏完全由程序自己回忆的视频片段

962
来自专栏思影科技

《大话脑成像》系列之二:不同模态脑网络的构建

接上回 只见孔乙己涨红了脸,额上的青筋条条绽出,争辩道,“这不能算报错……是BUG!……写代码的事,能算错么?”接连便是难懂的话,什么“涡旋噪声”、“敏捷开发...

2886
来自专栏机器之心

资源 | 谷歌与MIT联袂巨著:《计算机科学的数学》开放下载

选自CSAIL.Mit 机器之心编译 参与:蒋思源、吴攀 谷歌和麻省理工学院联袂出品的《计算机科学的数学》昨日已经开放下载了,读者可点击文末「阅读原文」下载。...

2617
来自专栏专知

【论文推荐】最新5篇知识图谱相关论文—强化学习、习知识图谱的表示、词义消除歧义、并行翻译嵌入、图数据库

【导读】专知内容组整理了最近五篇知识图谱(Knowledge Graph)相关文章,为大家进行介绍,欢迎查看! 1. DeepPath: A Reinforce...

3834

扫码关注云+社区