- 微信小程序 flex 布局案例一
- 前言
- wxml 代码
- wxss 代码
- JS 代码
微信小程序 flex 布局案例一
前言
最近在学习微信小程序时，看到很多布局都用到了 flex 布局，其实 flex 布局学习过好多东西不用就忘记了，这次用上就只得再去看了，争取学会。下面是我做的简单的类似文章列表的布局
wxml 代码
<view class=”container”>
<view class=”header”>
<view class=”banner”>
banner
</view>
</view>
<view class=”nav”>
<block wx:for=”{{navItems}}” wx:key=”{{index}}”>
<view class=”nav-item”>
<view class=”item-img”>
<image src=”{{item.image}}”></image>
</view>
<view class=”item-text”>
{{item.text}}
</view>
</view>
</block>
</view>
<view class=”list”>
<scroll-view scroll-y style=”height: 400px;”>
<block wx:for=”{{listArr}}” wx:key=”{{index}}”>
<view class=”list-item”>
<view class=”list-img”>
<image src=”{{item.image}}” alt=”{{item.desc}}”></image>
</view>
<view class=”list-infos”>
<view class=”info-title”>{{item.title}}</view>
<view class=”info-main”>
<view class=”info-category”>{{item.category}}</view>
<view class=”info-author”>{{item.author}}</view>
<view class=”info-view”>{{item.view}}</view>
</view>
</view>
</view>
</block>
</scroll-view>
</view>
</view>
wxss 代码
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.header {
background-color: #fee;
}
.nav {
display: flex;
flex-flow: row wrap;
background-color: #f0f;
justify-content: space-around;
}
.nav-item {
/* flex-grow: 1; */
display: flex;
flex-flow: column wrap;
border: 1px solid red;
text-align: center;
}
.item-img>image {
width: 74rpx;
height: 74rpx;
}
.item-text {
font-size: 0.85rem;
text-align: center;
}
.list {
background-color: #ff0;
}
.list-item {
display: flex;
flex-direction: row;
border-bottom: 1px solid #666;
padding: 20rpx 10rpx;
align-items: stretch;
}
.list-img {
position: relative;
width: 300rpx;
height: 160rpx;
overflow: hidden;
flex: 2 1 300rpx;
}
.list-img>image {
width: 100%;
}
.list-infos {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 10 1 300rpx;
}
.info-title {}
.info-main {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
font-size: 0.65rem;
}
.info-category {}
JS 代码
Page({
data: {
listArr: [{
id: 0,
title: ‘标题 1’,
image: ‘../../images/banner1.jpg’,
desc: ‘我是标题呀’,
view: 100,
category: ‘小程序‘,
author: ‘小何’
}, {
id: 2,
title: ‘标题 2’,
image: ‘../../images/banner1.jpg’,
desc: ‘我是标题 2 呀’,
view: 200,
category: ‘小程序‘,
author: ‘小何’
}, {
id: 3,
title: ‘标题 3’,
image: ‘../../images/banner1.jpg’,
desc: ‘我是标题 3 呀’,
view: 300,
category: ‘小程序‘,
author: ‘小何’
}, {
id: 4,
title: ‘标题 4’,
image: ‘../../images/banner1.jpg’,
desc: ‘我是标题 4 呀’,
view: 200,
category: ‘小程序‘,
author: ‘小何’
}, {
id: 5,
title: ‘标题 5’,
image: ‘../../images/banner1.jpg’,
desc: ‘我是标题 5 呀’,
view: 300,
category: ‘小程序‘,
author: ‘小何’
}],
navItems: [{
id: 0,
image: ‘../../images/nav-icon1.png’,
desc: ‘首页’,
text: ‘首页’
}, {
id: 1,
image: ‘../../images/nav-icon2.png’,
desc: ‘电影’,
text: ‘电影’
}, {
id: 2,
image: ‘../../images/nav-icon3.png’,
desc: ‘电视剧’,
text: ‘电视剧’
}, {
id: 3,
image: ‘../../images/nav-icon4.png’,
desc: ‘综艺’,
text: ‘综艺’
}, {
id: 4,
image: ‘../../images/nav-icon5.png’,
desc: ‘动漫’,
text: ‘动漫’
}]
}
})
