首页 > 微信 > 详细

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

时间:2017-02-26 16:47:55      阅读:177      评论:0      收藏:0      [点我收藏+]
原文:微信小程序把玩(八)view组件

技术分享

刚看到这个效果的时候还真是和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;
}

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

原文:http://www.cnblogs.com/lonelyxmas/p/6444751.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!