万能前端框架uni app初探05:flex布局设备控制页面

前言

本节我们使用flex布局方式,设计一个设备控制页面。

一、基础知识

1. Flex布局简介

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。传统的布局,基于盒状模型,依赖 display属性 + position属性 + float属性,实现某些特殊布局时候非常不方便,而使用Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

2. Flex布局特点

在这里插入图片描述
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

3. Flex布局方式

实现 flex 布局需要先指定一个容器,任何一个容器都可以被指定为 flex 布局。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

注意:

  • 1.行内元素也使用inline-flex,块容器使用flex

  • 2.当时设置 flex 布局之后,子元素的 float、clear、vertical-align 的属性将会失效。

有下面六种属性可以设置在容器上,它们分别是:

(1) flex-direction

(2) flex-wrap

(3) flex-flow

(4) justify-content

(5) align-items

(6) align-content

各种属性具体使用参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

二、示例

将上一讲app04工程复制为app005,然后拖到HBuilder X中。

1.示例代码

修改pages/index/index.vue中代码如下

<template>
        <view class="container">
                <view class="single_image_wrap">
                        <image src="../../static/led.jpg" class="device_image"></image>
                </view>

                        <view class="view_show">
                          {{text}}
                        </view>

                        <view class="switch_led">
                                <switch @click="btn_clicked">按钮</switch>
                        </view>


        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                flag: 0,
                                text: 'LED灯',
                        }
                },
                methods: {
                        btn_clicked() {
                                if (this.flag == 0)
                                {
                                        this.flag = 1
                                        uni.showToast({
                                                title:"打开LED",
                                        })
                                }else
                                {
                                        this.flag = 0
                                        uni.showToast({
                                                title:"关闭LED",
                                        })
                                }

                        },
                }
        }
</script>

<style>
        .container {
                /* display: flex; */
                display: inline-flex;
                
        }
        .device_image {
          margin-top: 10px;
          width: 40px;
          height: 40px;
        }
        .view_show {
          margin-top: 20px;
          margin-left: 10px;
          font-size: 14px;
          color: #939393;
        }
        .switch_led{
                margin-top: 10px;
                margin-left: 350px;
        }
</style>

本例所有元素都在同一行,所以使用inline-flex。

三、运行

点击运行—>运行到浏览器—>Chome,web端显示如下:
在这里插入图片描述

四、结语

(1) 获取资料

如您在使用过程中有任何问题,请加QQ群进一步交流,也可以github提Issue。

QQ交流群:906015840 (备注:物联网项目交流)

源码获取:扫描下方二维码,关注公众号,回复uni app即可

一叶孤沙出品:一沙一世界,一叶一菩提
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值