文档章节

微信小程序把玩(八)view组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 648
阅读 0
收藏 0
点赞 0
评论 0

这里写图片描述

刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样.
view这个组件就是一个视图组件使用起来非常简单。

主要属性:

flex-direction: 主要两个特性”row”横向排列”column”纵向排列

justify-content 主轴的对齐方式(如果flex-direction为row则主轴就是水平方向)

  • 可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)

align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向)

  • 可选属性 (‘flex-start’, ‘flex-end’, ‘center’)

wxml

<view class="page">
    <view class="page__hd">
        <text class="page__title">view</text>
        <text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时,该组件则为弹性容器,弹性容器的子组件为弹性项目。</text>
    </view>
    <view class="page__bd">
        <view class="section">
            <view class="section__title">flex-direction: row</view>
            <view class="flex-wrp" style="flex-direction:row;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">flex-direction: column</view>
            <view class="flex-wrp" style="height: 300px;flex-direction:column;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">justify-content: flex-start</view>
            <view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">justify-content: flex-end</view>
            <view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">justify-content: center</view>
            <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">justify-content: space-between</view>
            <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">justify-content: space-around</view>
            <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">align-items: flex-end</view>
            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>
        <view class="section">
            <view class="section__title">align-items: center</view>
            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>

       <view class="section">
            <view class="section__title">align-items: center</view>
            <view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-start">
                <view class="flex-item" style="background: red"></view>
                <view class="flex-item" style="background: green"></view>
                <view class="flex-item" style="background: blue"></view>
            </view>
        </view>

    </view>
</view>

wxss

.flex-wrp{ height: 100px; display:flex; background-color: #FFFFFF; }
.flex-item{ width: 100px; height: 100px; }

本文转载自:http://blog.csdn.net/u014360817/article/details/52658350

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
微信小程序运行流程看这篇就够了

一.微信小程序是啥 本质其实就是(混合)的app 介于web app与native 原生app之间,具备丰富的调用手机各种功能的接口,同时又具备灵活性,跨平台 1. 运行环境差异 微信小程序运行在三端:iOS...

⋅ 05/17 ⋅ 0

微信小程序开发--『狗蛋TV』

狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。 线上开...

李帅醒 ⋅ 05/15 ⋅ 0

分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle ⋅ 04/18 ⋅ 0

移动开发之微信小程序——资料集合

本文转载自:知乎 有需要下载的客官可可以点击知乎去下载相关资料 一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2:...

DJY1992 ⋅ 2016/12/21 ⋅ 0

憧憬Licoy/wepy-com-loadings

微信小程序Loading加载动画组件 基于Wepy开发的微信小程序loading加载动画组件 说明 安装 npm i wepy-com-loadings 使用 import wepy from 'wepy'import Loadings from "wepy-com-loadings"e...

憧憬Licoy ⋅ 04/26 ⋅ 0

wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度 ⋅ 01/25 ⋅ 2

微信小程序 UI 组件库 - iView Weapp

iView Weapp —— 一套高质量的微信小程序 UI 组件库 iView Weapp 是什么? 微信小程序提供了自定义组件的功能,这使得 iView Weapp 成为了可能。小程序已经提供了很多组件和 API,但它们过于...

aresn ⋅ 06/11 ⋅ 0

透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度 ⋅ 01/26 ⋅ 0

微信小程序(游戏)----拖拽拼图(拖拽和切换功能的实现)

效果图 touchstart 获取当前触摸位置的坐标(x,y); 记录触摸点下view的各项坐标值; 记录触摸点下view的起点坐标,背景坐标,以及触摸点的坐标; 设置拖拽view为显示状态、设置起始坐标以...

m0_38082783 ⋅ 03/15 ⋅ 0

iView 发布微信小程序 UI 组件库 iView Weapp

末尾有彩蛋。 过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。 与此同时,我们也在思考,除了服务 PC Web...

Aresn ⋅ 06/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java集合类总结笔记

一、集合类的层次关系 主要容器集合类的特点: ArrayList 一种可以动态增长和缩减的索引序列 LinkedList 一种可以在任何位置进行高效地插入和删除的有序序列 ArrayDeque 一种用循环数组实现的...

edwardGe ⋅ 11分钟前 ⋅ 0

spring RMI远程调用

RMI https://www.cnblogs.com/wdh1995/p/6792407.html

BobwithB ⋅ 17分钟前 ⋅ 0

Jenkins实践2 之基本配置

1 插件管理 系统管理->插件管理 在可选插件中可以自主安装插件 2 管理用户 系统管理->管理用户->新建用户 3 安全配置 系统管理->全局安全配置 授权策略 选择安全矩阵 然后添加现有的用户,赋...

晨猫 ⋅ 17分钟前 ⋅ 0

c++智能指针

1、是一种泛型类,针对指针类型的泛型类,会保存指针 2、重载了符号 *和-> 对智能指针使用这两个符号,相当于对保存的泛型使用这两个符号 3、当智能指针引用计数为0时,会去释放指针指向的资...

国仔饼 ⋅ 18分钟前 ⋅ 0

Spring Boot错误处理机制

1)、SpringBoot默认的错误处理机制 默认效果: 1)、浏览器,返回一个默认的错误页面 浏览器发送请求的请求头: 2)、如果是其他客户端,默认响应一个json数据 原理: 可以参照ErrorMvcAut...

小致dad ⋅ 19分钟前 ⋅ 0

ftp连接不上的终极办法 SFTP

假如FTP由于各种原因就是连不上,那么用SFTP协议吧,使用登录服务器的账号密码。

sskill ⋅ 24分钟前 ⋅ 0

Unity 围绕旋转角度限制(Transform.RotateAround)

在 Unity 中可以利用 Transform.RotateAround 围绕指定物体进行旋转,但某些情况下可能需要对旋转角度进行控制。我是先计算出预设角度大小,然后判断是否在限定角度范围内是则进行旋转。 相关...

大轩 ⋅ 25分钟前 ⋅ 0

阿里沙箱环境支付宝测试demo

阿里支付宝支付和微信支付,包括:阿里沙箱环境支付宝测试demo,支付宝支付整合到spring+springmvc+mybatis环境和微信整合到如上环境,功能非常齐全,只需要修改对应的配置文件即可,帮助文档...

码代码的小司机 ⋅ 27分钟前 ⋅ 0

JDK1.6和JDK1.7中,Collections.sort的区别,

背景 最近,项目正在集成测试阶段,项目在服务器上运行了一段时间,点击表格的列进行排序的时候,有的列排序正常,有的列在排序的时候,在后台会抛出如下异常,查询到不到数据,而且在另外一...

tsmyk0715 ⋅ 44分钟前 ⋅ 0

C++ 中命名空间的 5 个常见用法

相信小伙伴们对C++已经非常熟悉,但是对命名空间经常使用到的地方还不是很明白,这篇文章就针对命名空间这一块做了一个叙述。 命名空间在1995年被引入到 c++ 标准中,通常是这样定义的: 命名...

柳猫 ⋅ 49分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部