WeUI for 小程序flex布局实现

2018年09月27日 09:13 | 208次浏览 作者原创 版权保护

一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录flex以及文件flex.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">Flex</view>
<view class="page__desc">Flex布局(V型知识库 www.vxzsk.com)</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
</view>
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
</view>
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
</view>
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
</view>
<view class="weui-flex">
<view><view class="placeholder">weui</view></view>
<view class="weui-flex__item"><view class="placeholder">weui</view></view>
<view><view class="placeholder">weui</view></view>
</view>
</view>
</view>


三、在根目录app.json配置文件中配置flex文件路径,保存后会自动生成对应的js、css等文件

"pages/flex/flex",


四、在pages/flex/flex.wxss文件中添加css样式代码

/* pages/flex/flex.wxss V型知识库 www.vxzsk.com*/
.placeholder{
margin: 5px;
padding: 0 10px;
text-align: center;
background-color: #EBEBEB;
height: 2.3em;
line-height: 2.3em;
color: #cfcfcf;
}


五、预览效果

此文章本站原创,地址 https://www.vxzsk.com/1900.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程