微信小程序flex布局案例(1)

学习教程 2019-09-24 69次浏览 0个评论
文章目录[隐藏]

微信小程序 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: '动漫'
}]
}
})

 

 

 

喜欢 (0)