当前位置: 首页>編程日記>正文

微信小程序布局技巧(一)

微信小程序布局技巧(一)

微信小程序布局技巧(一)

    • 前言
    • 小程序布局方式
      • Block布局方式
      • flex布局方式
        • wxss添加样式
        • wxml应用样式
        • 效果
      • flex布局种类
        • justify-content属性
        • align-items属性
        • flex-wrap 属性
    • 应用
    • 尾巴

前言

友情提示,阅读本文之前,可能需要有一点微信小程序开发基础。本文旨在为那些刚入坑微信小程序(文中后面统称小程序)或者入坑后对页面UI布局有困难的开发者,老鸟和大神请无视。如果你还没有任何小程序的基础,建议移步官方教程:
小程序官方教程

小程序布局方式

小程序是通过wxss(样式)和wxml(组件)组合,一起来实现UI排列和复杂布局,分为Block和flex两种布局方式。

Block布局方式

我们先来看一段代码:

// 未添加任何样式
<view><view>test1</view><view>test2</view>
</view>

最终呈现效果为:
在这里插入图片描述
可以看到未添加任何样式,默认为竖直排列的。熟悉移动开发的朋友可能要问了,那么我想要实现横向排列、垂直居中、水平居中、靠右,靠左等效果应该怎么做了?不要急,该来的可能会迟到,终归是不会缺席的。

flex布局方式

大家都知道小程序样式控制是通过wxss文件来控制,实现复杂布局一般我们都是通过flex布局方式来实现,要使用 flex 布局的话需要显式的声明:display:flex; 接下来我们就给上面的布局加上样式,使test1和test2两个view能横向排列。

wxss添加样式

// 横向布局
.page {display: flex;flex-direction: row;
}

wxml应用样式

<view class='page'><view>test1</view><view>test2</view>
</view>

效果

在这里插入图片描述
从效果图可以看到,已经达到了我们需要横向布局的效果了。

flex布局种类

首先我们不管是横向布局和竖向布局,要设置属性 flex-direction ,它有4个可选值:

  • row:从左到右的水平方向为主轴
  • row-reverse:从右到左的水平方向为主轴
  • column:从上到下的垂直方向为主轴
  • column-reverse:从下到上的垂直方向为主轴

为了能更好的看到效果,我们改动下代码,给每个view增加色块区分,然后分别展示每个值得不同排列效果:
row:
在这里插入图片描述
row-reverse:
在这里插入图片描述
column:
在这里插入图片描述
column-reverse:(parent view高度固定为750rpx效果)
在这里插入图片描述
相信不用我来解释,大家也能猜到这四个值分别能实现什么样的效果了吧。关于横向和纵向的布局我就不赘述了,各位看官可自行撸码体会。

除了上面提到的控制横向和纵向布局的属性了,常用的还有justify-content、align-items、flex-wrap等属性来辅助我们实现复杂的布局。

justify-content属性

这个属性指的是主轴方向上的子元素的布局方式,它有5个可选值:

  • flex-start:主轴起点对齐(默认值)
  • flex-end:主轴结束点对齐
  • center:在主轴中居中对齐
  • space-between:两端对齐,除了两端的子元素分别靠向两端的容器之外,其他子元素之间的间隔都相等
  • space-around:每个子元素之间的距离相等,两端的子元素距离容器的距离也和其它子元素之间的距离相同
  • 这里的主轴指的是父元素中的flex-direction属性指定的元素

还是分别来展示下效果(默认以横向排列为主轴):
flex-start效果同前面横向排列相同,这里不做展示了

flex-end:
在这里插入图片描述

center:
在这里插入图片描述

space-between:
在这里插入图片描述

space-around:
在这里插入图片描述

align-items属性

这个属性指的是侧轴方向上的子元素的布局方式,它有5个可选值:

  • stretch 填充整个容器,当元素未设置侧轴方向的长度时,充满父元素,如设置了侧轴方向长度,则以子元素设置的长度为准(默认值)
  • flex-start 侧轴的起点对齐 (这里我们手动设置下子 view 的高度,来看的明显一些)
  • flex-end 侧轴的终点对齐
  • center 在侧轴中居中对齐
  • baseline 以子元素的第一行文字对齐
  • 这里的侧轴指的是父元素中的flex-direction属性指定的元素方向的垂直的方向

接下来分别来展示下效果(默认以纵向排列为主轴,用横向方向演示侧轴排列效果,横向宽度固定为750rpx,方便演示):
stretch :(test1元素侧轴方向长度未设置,也就是未设置宽度,test2元素侧轴方向的长度(宽度)设置100rpx)
在这里插入图片描述

flex-start:
在这里插入图片描述
flex-end:
在这里插入图片描述
center :
在这里插入图片描述
baseline:(以子元素的第一行文字对齐,由于文字显示必须横向排列,无法纵向排列,所以这里只能以横向排列为主轴显示效果)
修改下样式:

.page {display: flex;flex-direction: row;align-items: baseline;
}
.test1 {padding-top: 40rpx;text-align: center;width: 100rpx;height: 100rpx;background: green;
}
.test2 {width: 100rpx;height: 100rpx;background: red;
}

效果图:
在这里插入图片描述

flex-wrap 属性

这个属性用于控制子元素 是否换行,有3个值可选:

  • nowrap:不换行(默认)
  • wrap:换行
  • wrap-reverse:换行,第一行在最下面

为了更好的显示效果,我们多增加几个元素来演示:
nowrap:
在这里插入图片描述
wrap:
在这里插入图片描述
wrap-reverse:
在这里插入图片描述
以上就是小程序开发中常用到的一些布局方式,将上面总结的这些属性都熟悉之后,相信聪明的你能举一反三,能解决绝大部分的布局问题,各位看官不妨自己撸码试试上面的这些效果。

应用

上面说了这么多理论知识,现在我们就来写个小例子来实操下,我们要实现效果是一个带删除按钮的矩形输入框,大概长下面的样子:
在这里插入图片描述
我们先写好布局,代码如下:

<view class='row'><input class='input' placeholder='please input'/><icon type='clear'/>
</view>

然后是样式:

.row{display: flex;flex-direction: row;//指定横向布局justify-content: flex-end;//主轴结束点对齐align-items: center;//侧轴居中(垂直居中)border: 1rpx solid #ccc;//边框margin: 20rpx;//边距,为了更加美观,不加没影响border-radius: 20rpx;//圆角
}.input {padding-top: 10rpx;padding-bottom: 10rpx;flex: 1;
}

注释上面已经加的很清楚了,可以对照上面的知识点来解析这个布局和样式为什么要这么写,我这里只是实现一个很简单的例子,属于抛砖引玉的作用,相信各位读者肯定能实现更多丰富的布局效果。

尾巴

笔者才疏学浅,只是想着将自己的理解共享出来,以期能给需要帮助的能带来帮助。如果文中出现错误,欢迎拍砖指正,也欢迎给我留言。


https://www.fengoutiyan.com/post/15533.html

相关文章:

  • 小程序自定义导航栏适配完美版
  • 微信小程序 排版
  • 小程序排版设计
  • 小程序全局组件
  • 小程序动态布局
  • 微信小程序布局预览
  • 微信小程序如何布
  • 小程序如何搭建
  • 鏡像模式如何設置在哪,圖片鏡像操作
  • 什么軟件可以把圖片鏡像翻轉,C#圖片處理 解決左右鏡像相反(旋轉圖片)
  • 手機照片鏡像翻轉,C#圖像鏡像
  • 視頻鏡像翻轉軟件,python圖片鏡像翻轉_python中鏡像實現方法
  • 什么軟件可以把圖片鏡像翻轉,利用PS實現圖片的鏡像處理
  • 照片鏡像翻轉app,java實現圖片鏡像翻轉
  • 什么軟件可以把圖片鏡像翻轉,python圖片鏡像翻轉_python圖像處理之鏡像實現方法
  • matlab下載,matlab如何鏡像處理圖片,matlab實現圖像鏡像
  • 圖片鏡像翻轉,MATLAB:鏡像圖片
  • 鏡像翻轉圖片的軟件,圖像處理:實現圖片鏡像(基于python)
  • canvas可畫,JavaScript - canvas - 鏡像圖片
  • 圖片鏡像翻轉,UGUI優化:使用鏡像圖片
  • Codeforces,CodeForces 1253C
  • MySQL下載安裝,Mysql ERROR: 1253 解決方法
  • 勝利大逃亡英雄逃亡方案,HDU - 1253 勝利大逃亡 BFS
  • 大一c語言期末考試試題及答案匯總,電大計算機C語言1253,1253《C語言程序設計》電大期末精彩試題及其問題詳解
  • lu求解線性方程組,P1253 [yLOI2018] 扶蘇的問題 (線段樹)
  • c語言程序設計基礎題庫,1253號C語言程序設計試題,2016年1月試卷號1253C語言程序設計A.pdf
  • 信奧賽一本通官網,【信奧賽一本通】1253:抓住那頭牛(詳細代碼)
  • c語言程序設計1253,1253c語言程序設計a(2010年1月)
  • 勝利大逃亡英雄逃亡方案,BFS——1253 勝利大逃亡
  • 直流電壓測量模塊,IM1253B交直流電能計量模塊(艾銳達光電)
  • c語言程序設計第三版課后答案,【渝粵題庫】國家開放大學2021春1253C語言程序設計答案
  • 18轉換為二進制,1253. 將數字轉換為16進制
  • light-emitting diode,LightOJ-1253 Misere Nim
  • masterroyale魔改版,1253 Dungeon Master
  • codeformer官網中文版,codeforces.1253 B
  • c語言程序設計考研真題及答案,2020C語言程序設計1253,1253計算機科學與技術專業C語言程序設計A科目2020年09月國家開 放大學(中央廣播電視大學)
  • c語言程序設計基礎題庫,1253本科2016c語言程序設計試題,1253電大《C語言程序設計A》試題和答案200901
  • 肇事逃逸車輛無法聯系到車主怎么辦,1253尋找肇事司機