文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 648
阅读 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
江门
高级程序员
微信小程序web-view使用整理

一、微信小程序web-view简单使用 指定https链接地址,并且链接白名单,同意设置过的都可以使用 二、web-view使用注意点 1.web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序...

tianma3798
08/13
0
0
微信小程序运行流程看这篇就够了

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

05/17
0
0
微信小程序开发--『狗蛋TV』

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

李帅醒
05/15
0
0
【微信小程序项目实践总结】30分钟从陌生到熟悉

前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自己的U...

叶小钗
08/13
0
0
【值得收藏】微信小程序开发干货合集,快上车!

小程序的成功,让广大程序员早已不再纠结该不该学习小程序开发 ,但会纠结如何学习小程序开发,为帮助大家更好的学习小程序开发,特地整理一批相关学习资源,供大家交流学习! 近期优秀文章 ...

慕课网
08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS三元运算示例

1. topFlag=topFlag ==0?1:0; 等于 if(topFlag=00){ topFlag=1; }else if(topFlag == 1){ topFlag=0; } 2. 5>3?alert('5大'):alert('3大'); 即 if(5>3){alert('5大')}else{alert('3大')}; 注......

森火
53分钟前
0
0
利用Slf4j的MDC跟踪方法调用链

why? 一个web项目通常提供很多URL访问地址, 项目一般都是分层处理,例如Controller——>Service——>DAO。 如果想根据日志查看用户一次请求都走了哪些方法(多数是查错误)。 如果系统是多人...

杨春炼
今天
5
0
Maven介绍及安装

Maven介绍及安装 以下内容是本人早期学习时的笔记,可能比较详实繁琐,现在复习一下Maven,顺便将内容抛出来,供大家一起学习进步。 一、Maven简介 Maven是Apache旗下的一款项目管理工具,是...

星汉
今天
0
0
小程序Aes解密

主要步骤: 1、下载AES源码(JS版) 2、在小程序中新建一个公共的文件夹,把AES源码拷贝进去(注意:需要暴露接口 module.exports = CryptoJS;) 3、添加一个用于加密解密的公共JS,可取名为...

Mr_Tea伯奕
今天
0
0
Go实现文件传输(基本传输可用)

发送端 package mainimport ("fmt""os""net""io")func SendFile(path string, connect net.Conn){file, oerr :=os.Open(path)if oerr !=nil{fmt.Println("Open", oerr)......

CHONGCHEN
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部