微信小程序-布局效果

原创 admin  2019-11-06 07:13  阅读 77 次
摘要:

微信小程序实现头部、底部固定,中间滚动的布局

wxml

<view class='wraper'>
<viewclass='header'>固定头部</view>
<viewclass='main'>
<scroll-viewclass='main-scroll'scroll-ystyle="height: 100%">
<viewclass='main-list'>
<viewclass='card'wx:for="{{cardList}}">
<viewclass='card-box'></view>
<view>{{item.name}}</view>
<viewclass='card-content'>{{item.content}}</view>
</view>
</view>
</scroll-view>
</view>
<viewclass='footer'>固定底部</view>
</view>
wxss
page {
width:100%;
height:100%;
}
.wraper {
display:flex;
flex-direction:column;
width:100%;
height:100%;
}
.header {
background:rgb(8, 117, 94);
color:#fff;
line-height:100rpx;
display:flex;
justify-content:center;
}
.main {
flex:1;
position:relative;
}
.main-scroll {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
.main-list {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin-left:2vw;
margin-right:2vw;
}
.card {
width:47vw;
margin-top:10rpx;
margin-bottom:10rpx;
}
.card-box {
width:100%;
height:200rpx;
border-radius:6rpx;
background:#ccc;
}
.card-content {
color:blue;
}
.footer {
background:rgb(8, 117, 94);
color:#fff;
line-height:100rpx;
display:flex;
justify-content:center;
}
js
Page({
data: {
cardList: [
{
name: '5aik.cn',
content: 'www.5aik.cn'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}, {
name: '5aik.cn',
content: '小程序源码网站'
}
]
},
})
本文地址:https://www.5aik.cn/?p=4937
关注我们:请关注一下我们的头条号:扫描二维码爱看小程序源码网站的公众号,公众号:我爱看评论
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

发表评论


表情