解读和分析微信小程序组件：二、scroll-view（可滚动视图区)-Pembangunan program mini-php.cn

Rumah

applet WeChat

Pembangunan program mini

解读和分析微信小程序组件：二、scroll-view（可滚动视图区)

巴扎黑

Mar 19, 2017 pm 06:24 PM

wxml

[XML] 纯文本查看 复制代码

<view class="flex-wrp">
    <view class="flex-item red" ></view>
    <view class="flex-item green" ></view>
    <view class="flex-item blue" ></view>
</view>

Salin selepas log masuk

wxss

[XML] 纯文本查看 复制代码

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

Salin selepas log masuk

flex-direction: column：

wxml

[XML] 纯文本查看 复制代码

<view class="flex-wrp 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>

Salin selepas log masuk

wxss

[XML] 纯文本查看 复制代码

.column{
   flex-direction:column;
}
.flex-item{
    width: 100px;
    height: 100px;
}
.flex-wrp{
    height: 100px;
    display:flex;
    background-color: #FFFFFF;
}
.red{
    background: red;
}
.green{
    background: green;
}
.blue{
    background: blue;
}

Salin selepas log masuk

justify-content: flex-start：

wxml

[XML] 纯文本查看 复制代码

<view class="flex-wrp 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>

Salin selepas log masuk

Atas ialah kandungan terperinci 解读和分析微信小程序组件：二、scroll-view（可滚动视图区). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn