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

微信小程序 flex 布局案例一

前言

最近在学习微信小程序时，看到很多布局都用到了 flex 布局，其实 flex 布局学习过好多东西不用就忘记了，这次用上就只得再去看了，争取学会。下面是我做的简单的类似文章列表的布局

wxml 代码

banner

{{item.text}}

{{item.title}}

{{item.category}}

{{item.author}}

{{item.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: ‘动漫’

}]

}

})

IT宅个人博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：微信小程序flex布局案例(1)